How to use the react-native-web.Animated.Value function in react-native-web

To help you get started, we’ve selected a few react-native-web examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github taofed / react-web / src / DrawerLayout / DrawerLayout.web.js View on Github external
drawerWidth: PropTypes.number.isRequired,
    drawerPosition: PropTypes.oneOf(['left', 'right']).isRequired,
    renderNavigationView: PropTypes.func.isRequired,

    onDrawerSlide: PropTypes.func,
    onDrawerStateChanged: PropTypes.func,

    onDrawerOpen: PropTypes.func,
    onDrawerClose: PropTypes.func,

    /* Not implemented */
    keyboardDismissMode: PropTypes.oneOf(['none', 'on-drag']),
  }

  state = {
    openValue: new Animated.Value(0),
  }

  componentWillMount() {
    let { openValue } = this.state;

    openValue.addListener(({value}) => {
      this._lastOpenValue = value;
      this.props.onDrawerSlide && this.props.onDrawerSlide({nativeEvent: {offset: value}});
    });

    this._panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: this._shouldSetPanResponder,
      onPanResponderGrant: this._panResponderGrant,
      onPanResponderMove: this._panResponderMove,
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: this._panResponderRelease,
github taofed / react-web / src / ViewPager / ViewPager.web.js View on Github external
* When false, the content does not scroll.
    * The default value is true.
    */
    scrollEnabled: PropTypes.bool
  }

  static defaultProps = {
    initialPage: 0,
    scrollEnabled: true
  }

  state = {
    selectedPage: this.props.initialPage,
    pageWidth: deviceSize.width,
    pageCount: this.props.children.length,
    offsetLeft: new Animated.Value(0)
  }

  getInnerViewNode() {
    return this.refs[VIEWPAGER_REF].childNodes[0];
  }

  componentWillMount() {
    // let { offsetLeft, selectedPage } = this.state;

    // offsetLeft.addListener(({value}) => {
    // bad performance
    // this._onPageScroll({
    //  nativeEvent: {
    //    position: selectedPage,
    //    offset: value - selectedPage
    //  }
github alloy / relational-theory / app / containers / react-native-web / artist / inverted_button.tsx View on Github external
constructor(props: any) {
    super(props)
    this.state = {
      backgroundColor: new Animated.Value(props.selected ? 1 : 0),
      textOpacity: new Animated.Value(1),
    }
  }
github alloy / relational-theory / app / containers / react-native-web / artist / inverted_button.tsx View on Github external
constructor(props: any) {
    super(props)
    this.state = {
      backgroundColor: new Animated.Value(props.selected ? 1 : 0),
      textOpacity: new Animated.Value(1),
    }
  }