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 libraries
import React from 'react'
import Interactable from 'react-interactable'
// ... later, in your render code
return (
<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.js
module.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 version
import React from 'react'
import Interactable from 'react-interactable/noNative'
// ... later, in your render code
return (
<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 :)