@applicaster/zapp-react-native-ui-components/Components/Transitioner/config.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { Dimensions, Easing } from "react-native";

const easing = Easing.in(Easing.bezier(0.25, 0.1, 0.25, 1.0));
const duration = 350;

function pushTransition(animatedValue, width, height, isRTL) {
  const rtlFactor = isRTL ? 1 : -1;

  return {
    duration,
    easing,
    from: {
      overlayStyle: {
        position: "absolute",
        width,
        height,
        backgroundColor: "black",
        opacity: animatedValue.interpolate({
          inputRange: [0.0, 1.0],
          outputRange: [0.0, 0.35],
        }),
      },
      style: {
        position: "absolute",
        width,
        height,
        transform: [
          {
            translateX: animatedValue.interpolate({
              inputRange: [0.0, 1.0],
              outputRange: [0.0, rtlFactor],
            }),
          },
        ],
      },
    },
    to: {
      style: {
        position: "absolute",
        width,
        height,
        transform: [
          {
            translateX: animatedValue.interpolate({
              inputRange: [0.0, 1.0],
              outputRange: [-rtlFactor * width, 0.0],
            }),
          },
        ],
      },
    },
  };
}

function backTransition(animatedValue, width, height, isRTL) {
  const rtlFactor = isRTL ? 1 : -1;

  return {
    duration,
    easing,
    from: {
      style: {
        position: "absolute",
        width,
        height,
        transform: [
          {
            translateX: animatedValue.interpolate({
              inputRange: [0.0, 1.0],
              outputRange: [0.0, -rtlFactor * width],
            }),
          },
        ],
      },
    },
    to: {
      overlayStyle: {
        position: "absolute",
        width,
        height,
        backgroundColor: "black",
        opacity: animatedValue.interpolate({
          inputRange: [0.0, 1.0],
          outputRange: [0.35, 0.0],
        }),
      },
      style: {
        position: "absolute",
        width,
        height,
        transform: [
          {
            translateX: animatedValue.interpolate({
              inputRange: [0.0, 1.0],
              outputRange: [rtlFactor, 0.0],
            }),
          },
        ],
      },
    },
  };
}

export function transitionConfig(animatedValue, isRTL) {
  const { width, height } = Dimensions.get("window");

  return {
    push: pushTransition(animatedValue, width, height, isRTL),
    back: backTransition(animatedValue, width, height, isRTL),
  };
}