A React Native mobile application for controlling a Bluetooth-enabled car. This app allows you to connect to your RC car via Bluetooth (Classic or BLE) and control it using an intuitive D-pad interface.
- 🚗 Control your Bluetooth RC car with a responsive D-pad interface
- 📶 Support for both Classic Bluetooth and Bluetooth Low Energy (BLE)
- 🔄 Auto-discover and connect to available Bluetooth devices
- 📱 Cross-platform support (iOS and Android)
- 🎮 Intuitive directional controls (Forward, Backward, Left, Right, Stop)
- React Native with TypeScript
- React Native BLE Manager
- Context API for state management
- Custom SVG icons
Before you begin, ensure you have completed the React Native - Set Up Your Environment guide.
- Node.js (v16 or higher)
- npm or Yarn
- React Native CLI
- Android Studio (for Android development)
- Xcode (for iOS development, macOS only)
- CocoaPods (for iOS dependencies)
-
Clone the repository: ```sh git clone cd bluetooth-car ```
-
Install dependencies: ```sh npm install
yarn install ```
- For iOS, install CocoaPods dependencies: ```sh cd ios bundle install bundle exec pod install cd .. ```
First, you will need to run Metro, the JavaScript build tool for React Native.
To start the Metro dev server, run the following command from the root of your React Native project:
```sh
npm start
yarn start ```
With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
```sh
npm run android
yarn android ```
```sh
npm run ios
yarn ios ```
If everything is set up correctly, you should see the app running in your Android Emulator, iOS Simulator, or on your connected device.
This app requires the following permissions:
- `BLUETOOTH_SCAN`
- `BLUETOOTH_CONNECT`
- `BLUETOOTH_ADVERTISE`
- `ACCESS_FINE_LOCATION` (required for Bluetooth scanning on Android)
- Bluetooth usage permissions (configured in Info.plist)
``` src/ ├── App.tsx # Main app component ├── BTDevices.tsx # Device list screen ├── BTPanel.tsx # Control panel screen ├── ble/ # Bluetooth management │ ├── bleManager.ts # BLE connection handler │ ├── classicBTManager.ts # Classic Bluetooth handler │ ├── bondedDevices.ts # Bonded devices management │ └── permissions.ts # Permission handling ├── components/ │ └── DPad.tsx # D-pad control component ├── contexts/ │ └── BluetoothContext.tsx # Bluetooth state management └── icons/ # Custom SVG icons ```
- Launch the app on your device
- Grant necessary Bluetooth and location permissions
- Tap the Bluetooth icon to scan for available devices
- Select your RC car from the device list
- Once connected, use the D-pad to control your car:
- ⬆️ Forward
- ⬇️ Backward
- ⬅️ Turn Left
- ➡️ Turn Right
- ⏹️ Stop
To modify the app, edit the files in the `src/` directory. The app uses Fast Refresh, so your changes will be reflected immediately.
If you're having issues getting the app to work:
- Ensure Bluetooth is enabled on your device
- Check that location permissions are granted (required for Bluetooth scanning on Android)
- Make sure your RC car is powered on and in pairing mode
- Try restarting the Metro bundler and rebuilding the app
- For more general React Native issues, see the React Native Troubleshooting page
```sh emulator -list-avds ```
```sh
emulator -avd <emulator_name>
emulator -avd <emulator_name> -writable-system
emulator -avd <emulator_name> -port 5556 ```
```sh
adb devices | grep emulator | cut -f1 | while read line; do adb -s $line emu kill; done ```
```sh
adb devices
adb tcpip 5555 adb connect <device_ip>:5555
adb kill-server adb start-server
adb shell getprop ro.product.model adb shell getprop ro.build.version.release ```
```sh
adb install path/to/app.apk adb install -r path/to/app.apk # Reinstall (keep data)
adb uninstall com.package.name
adb shell pm list packages adb shell pm list packages | grep <app_name>
adb shell pm clear com.package.name
adb shell am start -n com.package.name/.MainActivity
adb shell am force-stop com.package.name ```
```sh
adb logcat
adb logcat -c
adb logcat -s ReactNativeJS
adb logcat | grep $(adb shell ps | grep com.package.name | awk '{print $2}')
adb logcat -d > logcat.txt ```
```sh
adb pull /sdcard/file.txt ./local_directory
adb push local_file.txt /sdcard/
adb shell ls /sdcard/
adb shell screencap -p /sdcard/screenshot.png adb pull /sdcard/screenshot.png
adb shell screenrecord /sdcard/demo.mp4 adb pull /sdcard/demo.mp4 ```
```sh
adb shell pm grant com.package.name android.permission.CAMERA adb shell pm grant com.package.name android.permission.ACCESS_FINE_LOCATION
adb shell pm revoke com.package.name android.permission.CAMERA
adb shell dumpsys package com.package.name | grep permission ```
```sh
adb shell input keyevent 82 # Open dev menu adb shell input text "RR" # Reload
adb reverse tcp:8081 tcp:8081
adb shell input keyevent 82
adb shell settings put global development_settings_enabled 1 adb shell settings put global adb_enabled 1 ```
```sh
cd android && ./gradlew clean cd ..
cd android && ./gradlew clean && cd .. && npm run android
watchman watch-del-all
npm start -- --reset-cache
rm -rf node_modules rm -rf android/app/build rm -rf ios/build npm install ```
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
To learn more about React Native, take a look at the following resources:
- React Native Website - learn more about React Native.
- Getting Started - an overview of React Native and how setup your environment.
- Learn the Basics - a guided tour of the React Native basics.
- Blog - read the latest official React Native Blog posts.
- `@facebook/react-native` - the Open Source; GitHub repository for React Native.