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:
git clone <repository-url> cd bluetooth-car
-
Install dependencies:
npm install # OR yarn install -
For iOS, install CocoaPods dependencies:
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:
# Using npm
npm start
# OR using Yarn
yarn startWith 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:
# Using npm
npm run android
# OR using Yarn
yarn android# Using npm
npm run ios
# OR using Yarn
yarn iosIf 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_SCANBLUETOOTH_CONNECTBLUETOOTH_ADVERTISEACCESS_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
emulator -list-avds# Start a specific emulator
emulator -avd <emulator_name>
# Start emulator with writable system
emulator -avd <emulator_name> -writable-system
# Start emulator with specific port
emulator -avd <emulator_name> -port 5556# Kill all emulators
adb devices | grep emulator | cut -f1 | while read line; do adb -s $line emu kill; done# List connected devices
adb devices
# Connect to device over TCP/IP
adb tcpip 5555
adb connect <device_ip>:5555
# Restart ADB server
adb kill-server
adb start-server
# Get device info
adb shell getprop ro.product.model
adb shell getprop ro.build.version.release# Install APK
adb install path/to/app.apk
adb install -r path/to/app.apk # Reinstall (keep data)
# Uninstall app
adb uninstall com.package.name
# List installed packages
adb shell pm list packages
adb shell pm list packages | grep <app_name>
# Clear app data
adb shell pm clear com.package.name
# Start app
adb shell am start -n com.package.name/.MainActivity
# Force stop app
adb shell am force-stop com.package.nameadb logcatadb logcat -cadb logcat -s ReactNativeJSadb logcat | grep $(adb shell ps | grep com.package.name | awk '{print $2}')adb logcat -d > logcat.txtadb pull /sdcard/file.txt ./local_directoryadb push local_file.txt /sdcard/adb shell ls /sdcard/adb shell screencap -p /sdcard/screenshot.png
adb pull /sdcard/screenshot.pngadb shell screenrecord /sdcard/demo.mp4
adb pull /sdcard/demo.mp4adb shell pm grant com.package.name android.permission.CAMERA
adb shell pm grant com.package.name android.permission.ACCESS_FINE_LOCATIONadb shell pm revoke com.package.name android.permission.CAMERAadb shell dumpsys package com.package.name | grep permissionadb shell input keyevent 82 # Open dev menu
adb shell input text "RR" # Reloadadb reverse tcp:8081 tcp:8081adb shell input keyevent 82adb shell settings put global development_settings_enabled 1
adb shell settings put global adb_enabled 1cd android && ./gradlew clean
cd ..cd android && ./gradlew clean && cd .. && npm run androidwatchman watch-del-allnpm start -- --reset-cacherm -rf node_modules
rm -rf android/app/build
rm -rf ios/build
npm installContributions 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.