react-native-interactable-reanimated

react-native-interactable-reanimated made with reanimted and interactable

Usage no npm install needed!

<script type="module">
  import reactNativeInteractableReanimated from 'https://cdn.skypack.dev/react-native-interactable-reanimated';
</script>

README

react-native-interactable-reanimated

NPM JavaScript Style Guide

              

Note

This is a copy of interactable from react-native-reanimated

Install

npm install --save react-native-interactable-reanimated

Usage

import React, { Component } from 'react'

import Interactable from 'react-native-interactable-reanimated'

class Example extends Component {
  render() {
    return (
        <Interactable.View
          horizontalOnly={true}
          snapPoints={[{x: 0}, {x: -200}]}
          onSnap={this.onDrawerSnap}>
    
      // the view that you wrap here will now support interactions
    
        </Interactable.View>
    )
  }
}

Disclaimer

This is a copy of example app from react-native-interactable project.

There are several changes made to the files here:

  • index.js has been added to list all the samples such that they can be presented as react-navigation screens
  • all imports of react-native-interactable has been replaced and instead Interactable.js is loaded from the main folder of the Example app
  • whenever Interactable.View is used with Animated.Value we replace importing Animated from react-native and import react-native-reaminated instead
  • in RealChatHeads.js we modified timing animation to include easing as a config parameter as reanimated does not currently have a default value for that
  • in TinderCard.js we modified rotation interpolation not to include strings in output array but instead is wrapped in a concat node to append deg at the end. This is necessary as reanimated version of interpolate does not support interpolating strings this way.
  • finally there is a chance some (if not all) of the files has been reformatted by prettier

License

MIT © nomi9995