react-native - 反応ネイティブに反応スプリングを使用する

Question

このライブラリを反応ネイティブに使用したいのですが、方法がわかりませんでした。反応ネイティブのドキュメント リンクが壊れています。反応ネイティブのライブラリを使用できますか?

Answer 1

以下の例は動作します。

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