React-Nav-Melon/components/molecules/ThemedSwitch.js

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import CustomSwitch from './CustomSwitch'
import colors from '../../theme/colors'
import { interpolateColor, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'

const ThemedSwitch = ({ value = true, onValueChange, theme }) => {
    let style = {}
    let toggleOnColor = colors.white
    let toggleOffColor = colors.white
    const shareValue = useSharedValue(value ? 1 : 0)
    const InterpolateXInput = [0, 1];

    switch (theme) {
        case 'secondary':

            toggleOffColor = colors.primaryColor
            toggleOnColor = colors.white
            style = {
                containerStyle: {
                    // borderColor: colors.primaryColor,
                    borderColor: interpolateColor(shareValue.value, InterpolateXInput, [
                        toggleOffColor,
                        toggleOnColor,
                    ]),
                    borderWidth: 2,
                    backgroundColor: interpolateColor(shareValue.value, InterpolateXInput.reverse(), [
                        toggleOffColor,
                        toggleOnColor,
                    ]),

                }
            }


            break;
        case 'primary':
        default:

            toggleOffColor = colors.primaryColor
            toggleOnColor = colors.white
            style = {
                containerStyle: {
                    // borderColor: colors.primaryColor,
                    borderColor: interpolateColor(shareValue.value, InterpolateXInput.reverse(), [
                        toggleOffColor,
                        toggleOnColor,
                    ]),
                    borderWidth: 2,
                    backgroundColor: interpolateColor(shareValue.value, InterpolateXInput.reverse(), [
                        toggleOffColor,
                        toggleOnColor,
                    ]),

                }
            }


            break;

    }


    const containerAnimatedStyle = useAnimatedStyle(() => style)

    // {
    //     return {
    //       transform: [
    //         {
    //           translateX: interpolate(
    //             shareValue.value,
    //             InterpolateXInput,
    //             [0, BUTTON_WIDTH - SWITCH_BUTTON_AREA - 2 * SWITCH_BUTTON_PADDING],
    //             Extrapolate.CLAMP,
    //           ),
    //         },
    //       ],
    //       backgroundColor: interpolateColor(shareValue.value, InterpolateXInput, [
    //         toggleOffColor,
    //         toggleOnColor,
    //       ]),
    //     };
    //   });
    return (
        <CustomSwitch
            onChange={onValueChange}
            value={value}
            containerStyle={containerAnimatedStyle}
            toggleOffColor={toggleOffColor}
            toggleOnColor={toggleOnColor}
            height={22}
            width={40}
        />
    )
}

export default ThemedSwitch

const styles = StyleSheet.create({})