viewstools / animations Goto Github PK

App Vertical
marginTop 100
onClick <
width 100
backgroundColor #ffaa00
when <isClicked
width 150 spring bounciness 20 speed 20
Label Text
text Hi

/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars */
import React from 'react';
import {
  Animated,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
} from 'react-native';
import { Spring } from '@viewstools/animations/native';

const styles = StyleSheet.create({
  App1: { marginTop: 100, backgroundColor: '#ffaa00' },
});

class App extends React.Component {
  render() {
    const { props } = this;

    return (
      <Spring
        bounciness={20}
        speed={20}
        delay={0}
        to={{ width: props.isClicked ? 150 : 100 }}
      >
        {animatedApp => (
          <TouchableWithoutFeedback
            activeOpacity={0.7}
            onPress={props.onClick}
            underlayColor="transparent"
          >
            <Animated.View
              testID={`${props['testID'] || 'App'}|${
                props.isClicked ? 'isClicked|' : ''
              }`}
              style={[styles.App1, { width: animatedApp.width }]}
            >
              <Text testID={`App.Label|`}>Hi</Text>
              {props.children}
            </Animated.View>
          </TouchableWithoutFeedback>
        )}
      </Spring>
    );
  }
}

export default App;

/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars */
import React from 'react';
import {
  Text,
  TouchableWithoutFeedback,
  View
} from 'react-native';
import { Spring, animated } from 'react-spring/dist/native.cjs';

const SpringView = animated(View)

class App extends React.Component {
  render() {
    const { props } = this;

    return (
      <Spring
        native
        bounciness={20}
        speed={20}
        delay={0}
        to={{ width: props.isClicked ? 150 : 100 }}
      >
        {animatedApp => (
          <TouchableWithoutFeedback
            activeOpacity={0.7}
            onPress={props.onClick}
            underlayColor="transparent"
          >
            <SpringView
              testID={`${props['testID'] || 'App'}|${
                props.isClicked ? 'isClicked|' : ''
              }`}
              style={{ marginTop: 100, backgroundColor: '#ffaa00',  width: animatedApp.width }}
            >
              <Text testID={`App.Label|`}>Hi</Text>
              {props.children}
            </SpringView>
          </TouchableWithoutFeedback>
        )}
      </Spring>
    );
  }
}

export default App;