0.1.4 • Published 6 months ago
react-native-joystick-lite v0.1.4
react-native-joystick-lite
A customizable joystick component for React Native with gesture support. Built using react-native-gesture-handler
and react-native-reanimated
for smooth and responsive controls.
Features
- 🎮 Smooth gesture-based joystick control.
- 🎨 Fully customizable size, color, and styles.
- 📱 Works on both Android and iOS.
- ⚡ High performance with reanimated animations.
- 🛠 Easy integration into existing React Native projects.
Installation
For Expo Projects:
yarn add react-native-joystick-lite react-native-gesture-handler react-native-reanimated expo-haptics
For React Native CLI Projects:
yarn add react-native-joystick-lite
npx react-native link react-native-gesture-handler react-native-reanimated
Usage
import React from 'react';
import Joystick from 'react-native-joystick-lite';
const App = () => {
const handleMove = (data) => {
console.log('Joystick moved:', data);
};
return (
<Joystick
onMove={handleMove}
onEnd={() => console.log('Joystick released')}
size={200}
color="#ff5733"
haptics={true}
/>
);
};
export default App;
Props
Prop | Type | Default | Description |
---|---|---|---|
onMove | Function | () | Callback when joystick moves. |
onEnd | Function | () | Callback when joystick is released. |
size | Number | 150 | Diameter of the joystick boundary. |
color | String | #06b6d4 | Joystick color. |
haptics | Boolean | false | Enables haptic feedback (Expo only). |
interval | Number | 100 | Debounce interval for movement callback. |
Development
To run the example project:
cd example
yarn
npx expo start # or npx react-native run-android
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library
Issues
If you encounter any issues, feel free to open an issue.