react-native#Animated TypeScript Examples

function reducer(
  state: any,
  action: {
    type: string;
    data?: Item[];
    opened?: boolean;
    height?: [];
    isMounted?: [];
    lastSelectedIndex?: number;
    selectedIndex?: number;
    opacityValues?: Animated.Value;
    animatedValues?: Animated.Value[];
    rotateValueHolder?: Animated.Value[];
  },
) {
  switch (action.type) {
    case 'set':
      return {...state, ...action};
    case 'reset':
      return {
        opened: false,
        height: [],
        data: [],
        isMounted: [],
        lastSelectedIndex: -1,
        selectedIndex: -1,
        opacityValues: new Animated.Value(0),
        animatedValues: [],
        rotateValueHolder: [],
      };
    default:
      return {...state};
  }
}

Star = ({ size = 3, x, y, index, isClicked, ...props }) => {
  const value = createAnimatedValue(isClicked);

  React.useEffect(() => {
    Animated.timing(value.current, {
      toValue: isClicked ? 1 : 0,
      duration: 50 * index,
      useNativeDriver: false
    }).start();
  }, [isClicked]);

  return (
    <Animated.View
      {...props}
      style={[
        styles.star,
        {
          width: size,
          height: size,
          top: 8 + y,
          left: 8 + x,
          opacity: value.current,
          transform: [
            {
              translateY: value.current.interpolate({
                inputRange: [0, 1],
                outputRange: [10, 0],
              }),
            },
          ],
        },
        props.style,
      ]}
    />
  );
}

FlutterwaveCheckoutBackdrop: React.FC<
  FlutterwaveCheckoutBackdropProps
> = function FlutterwaveCheckoutBackdrop({
  animation,
  onPress
}) {
  // Interpolation backdrop animation
  const backgroundColor = animation.interpolate({
    inputRange: [0, 0.3, 1],
    outputRange: [colors.transparent, colors.transparent, 'rgba(0,0,0,0.5)'],
  });
  return (
    <TouchableWithoutFeedback testID='flw-checkout-backdrop' onPress={onPress}>
      <Animated.View style={Object.assign({}, styles.backdrop, {backgroundColor})} />
    </TouchableWithoutFeedback>
  );
}

render() {
    const { children, containerStyle } = this.props;
    return (
      <Animated.View
        style={{ ...containerStyle, opacity: this.animatedOpacity }}
      >
        {children}
      </Animated.View>
    );
  }

static getDerivedStateFromProps(props, state) {
        const { colors: prevColors } = state;
        const { colors } = props;
        const tweener = new Animated.Value(0);

        return {
            prevColors,
            colors,
            tweener,
        };
    }

ProgressBar: React.FC<ProgressBarProps> = ({
  style,
  sections = 1,
  activeSection = 1
}) => {
  const width = useRef(new Animated.Value((100 / sections) * activeSection))
    .current;
  useEffect(() => {
    const newWidth = (100 / sections) * activeSection;
    Animated.timing(width, {
      toValue: newWidth,
      duration: 200,
      useNativeDriver: false
    }).start();
  }, [activeSection, sections, width]);

  return (
    <View style={[styles.container, style]}>
      <Animated.View
        style={[
          styles.bar,
          {
            width: width.interpolate({
              inputRange: [0, 100],
              outputRange: ['0%', '100%']
            })
          }
        ]}
      />
    </View>
  );
}

constructor(props: ActionSheetProps) {
    super(props);
    this.state = {
      modalVisible: false,
      scrollable: false,
      layoutHasCalled: false,
      keyboard: false,
      deviceHeight:
        calculatedDeviceHeight ||
        getDeviceHeight(this.props.statusBarTranslucent),
      deviceWidth: Dimensions.get("window").width,
      portrait: true,
      safeAreaInnerHeight,
      paddingTop: safeAreaPaddingTop,
      keyboardPadding: 0,
    };

    this.scrollViewRef = createRef();
    this.safeAreaViewRef = createRef();

    this.currentOffsetFromBottom = this.props.initialOffsetFromBottom ?? 1;
    this.indicatorTranslateY = new Animated.Value(-this.state.paddingTop | 0);
  }

KnobBubble = ({ translateX, scale, knobSize, valueLabelsBackgroundColor: fill, textStyle, textInputRef }: KnobProps) => {
  const d = useMemo(() => "M20.368027196163986,55.24077513402203 C20.368027196163986,55.00364778429386 37.12897994729114,42.11537830086061 39.19501224411266,22.754628132990383 C41.26104454093417,3.393877965120147 24.647119286738516,0.571820003300814 20.368027196163986,0.7019902620266703 C16.088935105589453,0.8321519518460209 -0.40167016290734386,3.5393865664909434 0.7742997013327574,21.806127302984205 C1.950269565572857,40.07286803947746 20.368027196163986,55.4779024837502 20.368027196163986,55.24077513402203 z", []);
  const stroke = fill;
  const height = 56;
  const svgOffset = useMemo(() => osRtl ? { right: (knobSize - 40) / 2 } : { left: (knobSize - 40) / 2 }, [knobSize]);
  return (
    <Animated.View
      style={[styles.container, { opacity: scale, transform: [{ translateX }, { translateY: height / 2 }, { scale }, { translateY: -height / 2 },] }]}
    >
      <Svg width={height * .74} height={height} style={[svgOffset, { justifyContent: 'center', alignItems: 'center' }]} >
        <Path {...{ d, fill, stroke }} strokeWidth={1} />
      </Svg>
      <TextInput editable={false} style={[styles.textInput, svgOffset, textStyle]} ref={textInputRef} />
    </Animated.View>
  )
}

RefreshButton : React.FC<Props> = (props) => {

    let rotation = new Animated.Value(0)
    const animation = Animated.loop(Animated.timing(rotation, {
        toValue: 1,
        duration: 1000,
        easing: Easing.linear,
        useNativeDriver: true,
      })).start()

    const spin = rotation.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    })

    return (
    <View>
        <TouchableOpacity onPress={props.pressed} style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Animated.Image style={[styles.icon, {transform: props.refeshing ? [{rotate: spin}] : []}]} source={require('../assets/images/refresh.png')} />
        </TouchableOpacity>
    </View>
    );
}

_initializeRotationAnimation(isRotating) {
    this.state.rotationAnim.setValue(0);
    if (!isRotating && !this.state.isVisible) {
      return;
    }

    Animated.timing(this.state.rotationAnim, {
      toValue: 1,
      duration: 800,
      easing: Easing.linear
    }).start(() => {
      this._initializeRotationAnimation();
    });
  }

Elevation: React.FC<Props> = ({ style, theme, children, ...rest }) => {
  const { elevation = 4, borderRadius: radius } =
    StyleSheet.flatten(style) || {};
  const { colors } = theme;
  const borderRadius = radius;

  return (
    <Animated.View
      {...rest}
      style={[
        {
          borderRadius,
          backgroundColor: colors.surface,
        },
        elevation ? shadow(elevation) : null,
        style,
      ]}
    >
      <View style={{ overflow: "hidden", borderRadius }}>{children}</View>
    </Animated.View>
  );
}

function Text({ children, animated, style, ...rest }: TextProps) {
  const Wrapper = animated ? Animated.Text : RNText;
  return (
    <Wrapper
      style={[
        {
          fontFamily: Typography.MAIN_FONT_FAMILY,
          fontSize: 14, // TODO: import from /styles/typography
          color: Colors.BLACK_TEXT.toString(),
        },
        style,
      ]}
      {...rest}>
      {children}
    </Wrapper>
  );
}

static defaultProps: {
        overlayEnabled: boolean;
        shadowEnabled: boolean;
        gestureEnabled: boolean;
        gestureVelocityImpact: number;
        overlay: ({ style, }: {
            style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
        }) => JSX.Element | null;
    };

createAnimatedValue = (isOn: boolean) =>
  React.useRef(new Animated.Value(isOn ? 1 : 0))

componentDidUpdate() {
    const { visible } = this.props;
    Animated.timing(this.animatedOpacity, {
      toValue: visible ? 1 : 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }

GradientViewWrapper = Animated.createAnimatedComponent(GradientView)

export default function Collapse({
  visible = false,
  animationDuration = 250,
  byPassAnimationCallback = false,
  children,
}: CollapseProps) {
  const [animating, setAnimating] = useState(false);
  const height = useRef<number>(0);
  const animation = useRef(new Animated.Value(visible ? 1 : 0)).current;
  const toggle = useRef(visible);
  const fakeContent = !animating && !toggle.current;

  const handleLayoutView = useCallback(
    (event: LayoutChangeEvent) => {
      if (!animating) {
        height.current = event.nativeEvent.layout.height;
      }
    },
    [animating],
  );

  const handleRunAnimation = useCallback(() => {
    setAnimating(true);
    Animated.timing(animation, {
      toValue: visible ? 1 : 0,
      duration: animationDuration,
      useNativeDriver: false,
    }).start(callback => {
      if (callback.finished || byPassAnimationCallback) {
        toggle.current = visible;
        setAnimating(false);
      }
    });
  }, [animation, visible, animationDuration]);

  useDidUpdate(handleRunAnimation, [handleRunAnimation]);

  return (
    <Animated.View
      style={StyleSheet.flatten([
        toggle.current && !animating
          ? undefined
          : {
              overflow: 'hidden',
              height: animation.interpolate({
                inputRange: [0, 1],
                outputRange: [0, height.current],
              }),
            },
      ])}>
      <View
        testID="view"
        pointerEvents={fakeContent ? 'none' : 'auto'}
        style={StyleSheet.flatten([fakeContent && {position: 'absolute'}])}
        onLayout={handleLayoutView}>
        {children}
      </View>
    </Animated.View>
  );
}

transformValue: Animated.Value;