Using react-spring for react-native

Question

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?

score 10 · Answer 1 · answered Oct 10 '18 at 06:03

React-Spring can be used for react-native. They have updated it for all platform. Try this out:- yarn add react-spring@5.3.0-beta.0

import React from 'react'
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'
import { Spring, animated } from 'react-spring/dist/react-spring-native.esm'

const styles = {
    flex: 1,
    margin: 0,
    borderRadius: 35,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
}

export default class App extends React.Component {
    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}>
                        <animated.View style={{ ...styles, ...props }}>
                            <Text>It's working!</Text>
                        </animated.View>
                    </TouchableWithoutFeedback>
                )}
            </Spring>
        )
    }
}

`

the animated.View thing was just a test phase thing, we didn't want to include all RN components like that because it would bloat the end bundle. You basically extend them yourself: `const AnimatedView = animated(View)`. The import is also simpler: `import { Spring, animated } from 'react-spring'` — hpalu, Oct 10 '18 at 10:20
Thank you for your kind help. When I tried to use animated.View it gives me an error but the solution @hpalu provided works. Thank you both of you :) — Murat Erdogan, Oct 11 '18 at 05:29

score 6 · Answer 2 · answered Apr 28 '19 at 06:13

For anyone with issues, try using a different import. This worked for me on expo's react native.

import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback } from 'react-native';
import { Spring, animated } from 'react-spring/renderprops-native';

const AnimatedView = animated(View);

const styles = {
    flex: 1,
    margin: 0,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
}


export default class App extends Component {

    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>{flag ? "true" : 'false'}</Text>
                        </AnimatedView>
                    </TouchableWithoutFeedback>
                )}
            </Spring>
        );
    }
}

score 4 · Accepted Answer · edited Oct 11 '18 at 07:04

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>
    );
  }
}

Using react-spring for react-native

3 Answers3