How to use the react-native-reanimated.Easing.inOut function in react-native-reanimated

function runLoop() {
  const clock = new R.Clock()

  const state = {
    finished: new R.Value(0),
    frameTime: new R.Value(0),
    position: new R.Value(-1),
    time: new R.Value(0),
  }

  const config = {
    duration: new R.Value(600 * 2),
    easing: ReAnimatedEasing.inOut(ReAnimatedEasing.ease),
    toValue: new R.Value(1),
  }

  return R.block([
    R.startClock(clock),
    R.timing(clock, state, config),
    R.cond(state.finished, [
      R.stopClock(clock),
      // reset state
      R.set(state.finished, 0),
      R.set(state.frameTime, 0),
      R.set(state.position, -1),
      R.set(state.time, 0),

      // start clock again
      R.startClock(clock),

export const runTiming = (
  { clock, oppositeClock, value, dest, onFinish }: IAnimationConfig,
  props: TimingTweenAnimation,
) => {
  const state = {
    finished: new A.Value(0),
    position: new A.Value(0),
    time: new A.Value(0),
    frameTime: new A.Value(0),
  };

  const config = {
    duration: props.timing.duration,
    toValue: new A.Value(0),
    easing: props.timing.easing || Easing.inOut(Easing.ease),
  };

  return A.block([
    // stops opposite (opposite direction) clock
    A.cond(
      A.clockRunning(oppositeClock),
      A.stopClock(oppositeClock),
      0,
    ),
    A.cond(A.clockRunning(clock), 0, [
      updateStateProc(
        value,
        dest,
        state.finished,
        state.position,
        state.time,

const Progress = ({ progress }: { progress: number }) => {
  const ref = useRef(new Animated.Value(0));
  Animated.timing(ref.current, {
    toValue: progress,
    duration: 250,
    easing: Easing.inOut(Easing.ease)
  }).start();

  return (
    
  );
};

export const timingAnimationConfig = (
  duration: number,
  toValue: number,
): TimingAnimationConfig => ({
  duration,
  toValue,
  easing: Easing.inOut(Easing.ease),
})

} from "react-native-reanimated";
import { PanGestureHandler, State } from "react-native-gesture-handler";
import {
  decay,
  limit,
  bInterpolate,
  useTransition,
  gestureEvent
} from "react-native-redash";

import Tab, { ITab, OVERVIEW } from "./Tab";

const { height } = Dimensions.get("window");
const { Value, eq, neq } = Animated;
const durationMs = 400;
const easing = Easing.inOut(Easing.ease);
const transition = (
  
);

export type ITabs = ITab[];

interface TabsProps {
  tabs: ITabs;
}

export default ({ tabs: tabsProps }: TabsProps) => {
  const ref = useRef();
  const [tabs, setTabs] = useState([...tabsProps]);
  const [selectedTab, setSelectedTab] = useState(OVERVIEW);
  const transitionVal = useTransition(
    selectedTab,

const dragging = new Value(0);
	const start = new Value(0);
	const position = new Value(0);
	const clock = new Clock();

	const state = {
		finished: new Value(0),
		position: position,
		time: new Value(0),
		frameTime: new Value(0)
	};

	const config = {
		duration: new Value(duration),
		toValue: new Value(-1),
		easing: Easing.inOut(Easing.ease)
	};

	const isNotDragging = and(
		neq(gestureState, State.ACTIVE),
		neq(gestureState, State.BEGAN)
	);

	const isDragging = or(
		eq(gestureState, State.ACTIVE),
		eq(gestureState, State.BEGAN)
	);

	const delayed = new Value(0);

	const translation = translateAnimation(gestureTranslation, gestureState);

new Promise(resolve => {
        timing(transition.progress, {
          toValue: 1,
          duration: 1000,
          easing: Easing.inOut(Easing.cubic),
        }).start(resolve)
      }),
  }