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.