react-nativeanimationreact-spring

Using react-spring for react-native


I want to use this library for react-native but couldn't figure out how. The documentation link for react-native is broken. Can i use the library for react-native?


Solution

  • The example below works.

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native';
    import { Spring, animated } from 'react-spring'
    
    const AnimatedView = animated(View)
    
    const styles = {
      flex: 1,
      margin: 0,
      borderRadius: 35,
      backgroundColor: 'red',
      alignItems: 'center',
      justifyContent: 'center',
    }
    
    type Props = {};
    export default class App extends Component<Props> {
    
      state = { flag: true }
        toggle = () => this.setState(state => ({ flag: !state.flag }))
      render() {
        const { flag } = this.state
        return (
          <Spring native from={{ margin: 0 }} to={{ margin: flag ? 100 : 0 }}>
          {props => (
              <TouchableWithoutFeedback onPressIn={this.toggle}>
                  <AnimatedView style={{ ...styles, ...props }}>
                      <Text>It's working!</Text>
                  </AnimatedView>
              </TouchableWithoutFeedback>
          )}
      </Spring>
        );
      }
    }