react-native#Animated JavaScript Examples

// Render any loading content that you like here
  constructor(props) {
    super(props);
    const _state = {};
    Object.assign(_state, visibleModal, {
      disabled: true,
      otp: '',
      statusUpload: null,
      codeString: '',
    });
    this.state = _state;
    this.keyboardHeight = new Animated.Value(0);

    this.keyboardDidShow = this.keyboardDidShow.bind(this);
    this.keyboardDidHide = this.keyboardDidHide.bind(this);
    this.onChangeText = this.onChangeText.bind(this);
    this.onConfirmPress = this.onConfirmPress.bind(this);
    this.stopUpload = this.stopUpload.bind(this);
    this.uploadHistory = this.uploadHistory.bind(this);
    this.uploadHistorySuccess = this.uploadHistorySuccess.bind(this);
    this.uploadHistoryFailure = this.uploadHistoryFailure.bind(this);
    this.alertOTPInvalid = this.alertOTPInvalid.bind(this);
    this.alertOTPExpired = this.alertOTPExpired.bind(this);
    this.errorSendHistory = this.errorSendHistory.bind(this);
    this.onResetModal = this.onResetModal.bind(this);
    this.onCloseModal = this.onCloseModal.bind(this);
    this.onCloseModalHistorySuccess = this.onCloseModalHistorySuccess.bind(
      this,
    );
  }

TabScene = ({
  numCols,
  data,
  renderItem,
  onGetRef,
  scrollY,
  onScrollEndDrag,
  onMomentumScrollEnd,
  onMomentumScrollBegin,
}) => {
  const windowHeight = Dimensions.get('window').height;

  return (
    <Animated.FlatList
      scrollToOverflowEnabled={true}
      numColumns={numCols}
      ref={onGetRef}
      scrollEventThrottle={16}
      onScroll={Animated.event([{nativeEvent: {contentOffset: {y: scrollY}}}], {
        useNativeDriver: true,
      })}
      onMomentumScrollBegin={onMomentumScrollBegin}
      onScrollEndDrag={onScrollEndDrag}
      onMomentumScrollEnd={onMomentumScrollEnd}
      ItemSeparatorComponent={() => <View style={{height: 10}} />}
      ListHeaderComponent={() => <View style={{height: 10}} />}
      contentContainerStyle={{
        paddingTop: HeaderHeight + TabBarHeight,
        paddingHorizontal: 10,
        minHeight: windowHeight - TabBarHeight,
      }}
      showsHorizontalScrollIndicator={false}
      data={data}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}

show() {
    Animated.timing(
      this.aniVal,
      {
        toValue: 1,
        duration: 500,
      },
    ).start(() => {
      Animated.timing(
        this.aniVal,
        {
          toValue: 0,
          duration: 500,
          delay: 1000,
        },
      ).start();
    });
  }

animate() {
    this.animatedValue.setValue(1)
    Animated.timing(
      this.animatedValue,
      {
        toValue: 8,
        duration: 800,
        easing: Easing.linear,
        useNativeDriver: true
      }
    ).start(() => this.animate())
  }

FloatingPlusButton = ({ onPress, shadow, plusPosition }) => {
  if (!plusPosition && plusPosition !== 0) return null;

  return (
    <Animated.View style={[styles.buttonWrapper, { transform: [{ translateX: plusPosition }] }]}>
      <Button
        backgroundColor={colors.LIGHT_BLUE}
        iconColor={colors.WHITE}
        borderWidth={0}
        icon="small-plus"
        visible={true}
        onPress={() => {
          logEvents.logFeelingStartFloatingPlus();
          onPress();
        }}
        shadow={shadow}
      />
    </Animated.View>
  );
}

animate() {
    this.animation = Animated.sequence([
      Animated.timing(this.backgroundValue, {
        toValue: 1,
        duration: 1200,
        useNativeDriver: true
      }),
      Animated.timing(this.backgroundValue, {
        toValue: 0,
        duration: 1200,
        useNativeDriver: true
      })
    ]);

    this.animation.start(({ finished }) => {
      if (finished) {
        this.animate();
      }
    });
  }

Toast = ({ type, message, isVisible, onClose }) => {
  const dimensions = useWindowDimensions();
  const fontScale = isNaN(dimensions.fontScale) ? 1 : dimensions.fontScale;
  const offset = -300 * fontScale;
  const translateY = useRef(new Animated.Value(-200)).current;

  useEffect(() => {
    const delayedAnimation = setTimeout(() => {
      Animated.spring(translateY, {
        toValue: isVisible ? 0 : offset,
        friction: 10,
        tension: 11,
      }).start();
    }, 200);
    return () => clearTimeout(delayedAnimation);
  }, [isVisible]);

  return (
    <ui.Wrap type={type} style={{ transform: [{ translateY }] }}>
      <ui.Inner>
        <ui.Toast>
          <ui.CloseButton onPress={onClose}>
            <Close color={Colors.white} />
          </ui.CloseButton>
          <ui.Message type={type}>{message}</ui.Message>
        </ui.Toast>
      </ui.Inner>
    </ui.Wrap>
  );
}

FadeInView = (props) => {
    const fadeAnim = useRef(new Animated.Value(0)).current;
  
    useEffect(() => {
      Animated.timing(
        fadeAnim,
        {
          toValue: 1,
          duration: 400,
          useNativeDriver: true,
        }
      ).start();
    }, [fadeAnim])
  
    return (
      <Animated.View
        style={{
          ...props.style,
          opacity: fadeAnim,
        }}
      >
        {props.children}
      </Animated.View>
    );
}

render() {
    return (
      <Animated.View
        style={[
          styles.heartWrap,
          this.getHeartAnimationStyle(),
          this.props.style,
        ]}>
        <Icon
          name={`${this.props.reactionName || 'heart'}`}
          size={30}
          color="#de3a39"
        />
      </Animated.View>
    );
  }

constructor(props) {
    super(props);

    this.state = {
      stepLength: 1250, // Duration of a step in milliseconds
      currentStep: props.currentStep || 0, // Current step displayed on the phone
      animationPlaying: false,
    };

    // Enables to update the current step inside an animation
    if (this.props.currentStepAV !== null && this.props.currentStepAV !== undefined)
      this.currentStepAV = this.props.currentStepAV;
    else this.currentStepAV = new Animated.Value(0);

    this.currentStepAV.addListener((progress) => {
      this.setState({ currentStep: progress.value });
    });

    this.animationWidth = 100;
    this.animationHeight = 100;

    // Distance between the top of the window and the animation area
    this.dTop = this.props.dTop || 0;

    // Distance between the left of the window and the animation area
    if (Platform.OS === 'ios') {
      this.dLeft = 0;
    } else {
      this.dLeft = this.props.dLeft || 0;
    }
  }

componentDidUpdate(prevProps) {
    const { isLoaded } = this.props
    const { loadingProgress } = this.state

    if (isLoaded && !prevProps.isLoaded) {
      Animated.timing(loadingProgress, {
        toValue: 100,
        duration: 1000,
        useNativeDriver: true,
      }).start(() => {
        this.setState({
          animationDone: true,
        })
      })
    }
  }

export function data2Grid(data) {
  return data.map((column, y) =>
    column.map((box, x) => {
      const rotate = value2RotaionMap[box.type][box.values.join('')];
      const animation = new Animated.Value(rotate);
      return {
        ...box,
        rotate,
        animation,
        id: `${y}-${x}`,
      };
    }),
  );
}

Card = styled(Animated.View)`
  flex: 1;
  background: #FFF;
  border-radius: 4px;
  margin: 0 20px;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
`

render(){
        const { animated} = this.state;
        const { content } = this.props;
        return(
            <View style={[styles.container]}>
                <Animated.View                 
                style={{
                    ...styles.inner,
                    flex: animated,
                    backgroundColor: content === 'light' ? 'rgba(255,255,255,0.2)'  : 'rgba(0,0,0,0.1)',
                }}
                >
            </Animated.View>
            </View>
        );
    }

/**
 * Fades a set of children to the top
 * @param children {Array<React.ReactElement>}
 * @param fadeToTop {boolean}
 * @returns {*}
 * @constructor
 */
function Fade({ children, show }) {
  const fadeAnim = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: show ? 1 : 0,
      easing: Easing.ease,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim, show]);

  return (
    <Animated.View
      style={[
        {
          flex: 1,
          paddingVertical: 10,
          opacity: fadeAnim,
        },
      ]}
    >
      {children}
    </Animated.View>
  );
}

setModalVisible(visible) {
    const { closeFunction, height } = this.props;
    const { animatedHeight, pan } = this.state;
    if (visible) {
      this.setState({ modalVisible: visible });
      Animated.timing(animatedHeight, {
        toValue: height,
        duration: 300,
        useNativeDriver: false,
      }).start();
    } else {
      Animated.timing(animatedHeight, {
        toValue: 0,
        duration: 400,
        useNativeDriver: false,
      }).start(() => {
        pan.setValue({ x: 0, y: 0 });
        this.setState({
          modalVisible: visible,
          animatedHeight: new Animated.Value(0),
        });
        if (typeof closeFunction === "function") closeFunction();
      });
    }
  }

componentDidMount() {
        (async () => {
            await delay(this.state.delay);

            Animated.timing(
                this.state.opacity, {
                    toValue: this.state.endValue,
                    duration: this.state.duration,
                },
            ).start();
        })();
    }

constructor(props) {
    super(props);

    this.state = {
      activeIndex: 0,
    };

    this.animated = new Animated.Value(0);
    this.activeAnimated = new Animated.Value(0);
  }

keyboardDidShow(event) {
    Animated.timing(this.keyboardHeight, {
      duration: 50,
      toValue: event.endCoordinates.height,
    }).start();
  }

Switch = ({ isOn, onToggle }) => {
  const animatedValue = React.useRef(new Animated.Value(isOn ? 1 : 0)).current

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: isOn ? 1 : 0,
      duration: 200,
      easing: Easing.linear,
      useNativeDriver: true
    }).start()
  }, [animatedValue, isOn])

  const moveToggle = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [4, 27]
  })

  const background = isOn ? '#4f5f78' : '#97b9d2'
  const toggle = isOn ? '#c4d3e0' : '#f5dd4b'
  const border = isOn ? 'white' : '#d7b04e'
  const borderWidth = isOn ? (Platform.OS === 'android' ? 0.8 : null) : 1.1
  const shadow = isOn ? 'white' : '#97b9d2'

  return (
    <TouchableWithoutFeedback onPress={onToggle}>
      <View style={[styles.switchContainer, { backgroundColor: background }]}>
        <Animated.View
          style={[
            styles.switchWheel,
            {
              transform: [{ translateX: moveToggle }],
              borderColor: border,
              borderWidth: borderWidth,
              backgroundColor: toggle,
              shadowColor: shadow
            }
          ]}
        />
      </View>
    </TouchableWithoutFeedback>
  )
}

AnimatedIndicator = Animated.createAnimatedComponent(ActivityIndicator)

componentDidUpdate(prevProps) {
    const { height } = this.props;
    if (height !== prevProps.height) {
      this.verticalAniVal = new Animated.Value(-height);
    }
  }

AnimatedHeader = Animated.createAnimatedComponent(Header)

AnimatedContainer = Animated.createAnimatedComponent(Container)

constructor(props) {
    super(props)
    this.animatedValue = new Animated.Value(1)
  }

Icon = ({
  icon,
  color,
  styleContainer,
  spin,
  badge = false,
  onPress,
  activeOpacity = 0.4,
  ...props
}) => {
  const [spinFn, setSpinFn] = useState(null);

  useEffect(() => {
    if (spin === undefined) return;

    const spinValue = new Animated.Value(spin ? 0 : 1);

    Animated.timing(spinValue, {
      toValue: spin ? 1 : 0,
      duration: 200,
      easing: Easing.linear, // Easing is an additional import from react-native
      useNativeDriver: true, // To make use of native driver for performance
    }).start();

    setSpinFn(
      spinValue.interpolate({
        inputRange: [0, 1],
        outputRange: ["0deg", "45deg"],
      })
    );
  }, [spin]);

  const Icon = mapIconToSvg(icon);

  const render = () => (
    <Animated.View
      style={[styles.iconContainer, styleContainer, spinFn && { transform: [{ rotate: spinFn }] }]}
    >
      {badge ? <View style={styles.badge}>{/* <Text style={styles.badgeText}></Text> */}</View> : null}
      <Icon width={20} height={20} color={color || "black"} {...props} />
    </Animated.View>
  );

  return onPress ? (
    <TouchableOpacity activeOpacity={activeOpacity} onPress={onPress}>
      {render()}
    </TouchableOpacity>
  ) : (
    render()
  );
}

constructor() {
    super();
    this.rotation = new Animated.Value(-0.25);
  }

function HomeSearch({ isSearchFocus, onSearchFocus }) {
  const [bgOpacity] = React.useState(new Animated.Value(1))
  const [heroHeight] = React.useState(new Animated.Value(HERO_HEIGHT))

  React.useEffect(() => {
    if (isSearchFocus) {
      // bg-opacity
      Animated.timing(bgOpacity, {
        toValue: 0,
        duration: 230
      }).start()
      // hero-height
      Animated.timing(heroHeight, {
        toValue: 52 + 32,
        duration: 230
      }).start()
    } else {
      // bg-opacity
      Animated.timing(bgOpacity, {
        toValue: 1,
        duration: 230
      }).start()
      // hero-height
      Animated.timing(heroHeight, {
        toValue: HERO_HEIGHT,
        duration: 230
      }).start()
    }
  }, [bgOpacity, heroHeight, isSearchFocus])

  return (
    <Box as={Animated.View} position="relative" zIndex={1} height={heroHeight}>
      <Box mt={-60} as={Animated.View} style={{ opacity: bgOpacity }}>
        <Bg pt={60} pb={26}>
          <Box flex={1} alignItems="center" justifyContent="center">
            <Logo width={120} color="white" />
          </Box>
        </Bg>
      </Box>

      {/* search */}
      <Box
        position="absolute"
        left={0}
        bottom={isSearchFocus ? 0 : -42}
        p={16}
        width="100%"
      >
        <Search onChangeFocus={status => onSearchFocus(status)} />
      </Box>
    </Box>
  )
}

Wrap = styled(Animated.View)`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: ${({ type }) => backgrounds[type] || backgrounds.neutral};
  z-index: 100;
`