react-native-reanimated#round TypeScript Examples

The following examples show how to use react-native-reanimated#round. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CloseButton.tsx    From react-native-paper-onboarding with MIT License 5 votes vote down vote up 
CloseButtonComponent = ({
  data,
  safeInsets,
  animatedIndex,
  closeButton,
  closeButtonText,
  closeButtonTextStyle: textStyleOverride,
  onCloseButtonPress,
}: CloseButtonProps) => {
  const containerRef = useRef<Animated.View>(null);

  //#region animations
  const animatedShowButtonOpacityValues = useValues(
    ...data.map((item, index) =>
      index === data.length - 1 || item.showCloseButton ? 1 : 0
    )
  );
  const animatedShowButtonPointerEventValues = useValues(
    ...data.map((item, index) =>
      index === data.length - 1 || item.showCloseButton ? 'auto' : 'none'
    )
  );

  const defaultShowButtonOpacity = new Animated.Value(0);
  const defaultShowButtonPointerEvent = new Animated.Value('none');

  const animatedShowButtonOpacity = get(
    animatedShowButtonOpacityValues,
    round(animatedIndex),
    defaultShowButtonOpacity
  );

  const animatedShowButtonPointerEvent = get(
    // @ts-ignore
    animatedShowButtonPointerEventValues,
    round(animatedIndex),
    defaultShowButtonPointerEvent
  ) as any as Animated.Value<'auto' | 'none'>;
  //#endregion

  //#region styles
  const containerStyle: any = useMemo(
    () => [
      styles.container,
      {
        opacity: animatedShowButtonOpacity,
        top: safeInsets.top,
      },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [safeInsets]
  );
  const textStyle = useMemo(
    () => [styles.text, textStyleOverride],
    [textStyleOverride]
  );
  //#endregion
  return (
    <Animated.View
      ref={containerRef}
      pointerEvents={animatedShowButtonPointerEvent}
      style={containerStyle}
    >
      {closeButton ? (
        typeof closeButton === 'function' ? (
          closeButton()
        ) : (
          closeButton
        )
      ) : (
        <TouchableOpacity onPress={onCloseButtonPress}>
          <Text style={textStyle}>{closeButtonText}</Text>
        </TouchableOpacity>
      )}
    </Animated.View>
  );
}