This is a port of react-native-interactable to JS. It allows your UI to react in a physically natural way to user's drag interactions. See it working in the react-interactable playground and start playing with it using this code sandbox.
This library is for you if you want to have nice interaction animations in your:
- Multiplatform app using react-native-web.
- Expo app that you don't want to eject.
- React.js webapp, not a native one.
If you are building a well performant android/ios app with react-native, react-native-interactable is a much better option than this library.
Just install via npm or yarn
If our project is using react-native-web:
npm install --save react-interactable
If we are using just plain React:
npm install --save react-interactable animated react-panresponder-web
With an interactable view you can make any component react to dragging events.
Using it with react-native-web
// Import the librariesimportReactfrom'react'importInteractablefrom'react-interactable'// ... later, in your render codereturn(<Interactable.View><Text>I am draggable!</Text></Interactable.View>)If we want to use react-native-interactable for iOS and Android versions and react-interactable for the dom seamlessly, we can add an alias to our webpack.config.js and just use import Interactable from "react-native-interactable" as we are used to do:
// Inside webpack.config.jsmodule.exports={//...resolve: {alias: {'react-native-interactable': 'react-interactable'}}};Using it with plain react (react-dom)
// Import the libraries, pay attention to require the no native versionimportReactfrom'react'importInteractablefrom'react-interactable/noNative'// ... later, in your render codereturn(<Interactable.View>I am draggable!</Interactable.View>)You can see the options in the react-native-interactable docs.
- Wix team for the original react-native-interactable
- Of course, Facebook team for its game changing React.
- @souporserious for lending the
react-interactablenpm package :)