pasindu1

import React, {useState} from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';
import Animated, {
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
  Easing,
  Extrapolate,
  interpolateColor,

pasindu1

const onChangeToggle = () => {
  setToggled(!toggled);
  onChange?.(!toggled);
};

const onPressSwitch = () => {
  if (shareValue.value === 0) {
    shareValue.value = withTiming(1, {
      duration: 800,
      easing: Easing.bezier(0.4, 0.0, 0.2, 1),

pasindu1

///...
  const containerScale = {
    height: BUTTON_HEIGHT,
    width: BUTTON_WIDTH,
  };
  const switchScale = {
    height: SWITCH_BUTTON_AREA,
    width: SWITCH_BUTTON_AREA,
  };
//...

pasindu1

///...
const BUTTON_WIDTH = width;
const BUTTON_HEIGHT = height;
const SWITCH_BUTTON_AREA = BUTTON_HEIGHT - SWITCH_BUTTON_PADDING;
const [toggled, setToggled] = useState(value);
const shareValue = useSharedValue(value ? 1 : 0);
///...

pasindu1

import React, {useState, useRef} from 'react';
import {Animated, Easing, TextInput, StyleSheet} from 'react-native';

const FlaotingTextInput = ({
  label = 'New Title',
  titleActiveSize = 12,
  titleInActiveSize = 14,
  titleActiveColor = '#444444',
  titleInactiveColor = '#c2c2c2',
}) => {

pasindu1

.../
<Animated.View style={[styles.subContainer, viewStyles]}>
  <Animated.Text style={[returnAnimatedTitleStyles]}>{label}</Animated.Text>
  <TextInput
    onChangeText={onChangeText}
    value={text}
    style={styles.textStyle}
    onBlur={onBlur}
    onFocus={onFocus}
  />

pasindu1

    Animated.timing(animatedValue?.current, {
      toValue: 1,
      duration: 500,
      easing: Easing.bezier(0.4, 0.0, 0.2, 1),
      useNativeDriver: false,
    }).start();

pasindu1

  const returnAnimatedTitleStyles = {
    transform: [
      {
        translateY: animatedValue?.current?.interpolate({
          inputRange: [0, 1],
          outputRange: [22, -4],
          extrapolate: 'clamp',
        }),
      },
    ],

pasindu1

jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));

jest.mock("react-native-reanimated", () => ({
  ...mock,
  useSharedValue: jest.fn().mockReturnValue(0),
  useAnimatedStyle: jest.fn().mockReturnValue({}),
  useAnimatedScrollHandler: jest.fn().mockReturnValue({}),
  createAnimatedComponent: (component) => jest.fn().mockReturnValue(component),
  __reanimatedWorkletInit: jest.fn(),
  ScrollView: "ScrollView",

pasindu1

  const animatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        progress.value,
        [0, 1],
        ['red', 'green']
      ),
    };
  });