You could create your own custom component with React Native. Just Inherit it and Create Own component like as https://github.com/arshigtx/react-native-custom-switch create a component copy inner src fix issues then make it your own. Please start the project.

----- Edited ------

https://snack-web-player.s3.us-west-1.amazonaws.com/v2/46/index.html?initialUrl=exp%3A%2F%2Fexp.host%2F%40snack%2Fsdk.46.0.0-HVS884TWR6&origin=https%3A%2F%2Fsnack.expo.dev&verbose=false

import React, { useState } from "react";
import { View, Switch, StyleSheet,Text } from "react-native";

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View style={styles.container}>
      <View>
      {
        isEnabled ? <Text style={{position: 'absolute', color: 'white', top: 3, left: 2, zIndex: 5, fontSize: 11}} >On</Text> : <Text style={{position: 'absolute', color: 'white', top: 3, left: 20, zIndex: 5, fontSize: 11}}>Off</Text>
      }
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  }
});

export default App;

Finally I got the On off inside switch .......

install

npm install --save react-native-switch

    import { Switch } from 'react-native-switch';

<Switch
value={true}
onValueChange={(val) => console.log(val)}
disabled={false}
activeText={'On'}
inActiveText={'Off'}
backgroundActive={'green'}
backgroundInactive={'gray'}
circleActiveColor={'#30a566'}
circleInActiveColor={'#000000'}/>

Refer this link... https://github.com/shahen94/react-native-switch

Hye finally i made a custom switch, do check out :

Do check out this expo https://snack.expo.dev/@gaurav1995/gnarly-sandwich

Its completely built with react native, no external libraries etc

Do lemme know in case of any doubts :)

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


export default function App() {

    const positionButton = useRef(new Animated.Value(0)).current;

  const [isOn, setIsOn] = useState(false);

  const startAnimToOff = () => {
    Animated.timing(positionButton,{
      toValue:0,
      duration:500,
      easing:Easing.ease
    }).start()
  };

  const startAnimToOn = () => {
 Animated.timing(positionButton,{
      toValue:1,
      duration:500,
      easing:Easing.ease
    }).start()

  };

  const positionInterPol = positionButton.interpolate({inputRange:[0,1],outputRange:[0,30]})

  const backgroundColorAnim = positionButton.interpolate({inputRange:[0,1],outputRange:["#767577","#81b0ff"]})

  const initialOpacityOn = positionButton.interpolate({inputRange:[0,1],outputRange:[0,1]})

    const initialOpacityOff = positionButton.interpolate({inputRange:[0,1],outputRange:[1,0]})

  const onPress = () => {
    if (isOn) {
      startAnimToOff();
      setIsOn(false);
    } else {
      startAnimToOn();
      setIsOn(true);
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={{height:30,width:60}}  activeOpacity={0.9} onPress={onPress} >
      <Animated.View style={[styles.mainStyes,{
        backgroundColor:backgroundColorAnim
      }]} >
        <Animated.Text
          style={[
            styles.eahcStyles,
            {
              opacity: initialOpacityOn,
            },
          ]}>
          ON
        </Animated.Text>
        <Animated.Text
          style={[
            styles.eahcStylesOf,
            {
              opacity: initialOpacityOff,
            },
          ]}>
          OFF
        </Animated.Text>
        <Animated.View style={[styles.basicStyle,{
          transform:[{
            translateX:positionInterPol
          }]
        }]} />
          </Animated.View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  basicStyle: {
    height: 20,
    width: 20,
    borderRadius: 20,
    backgroundColor: '#FFF',
    marginTop: 5,
    marginLeft: 5,
  },
  eahcStyles: {
    fontSize: 14,
    color: '#f5dd4b',
    position: 'absolute',
    top: 6,
    left: 5,
  },

  eahcStylesOf: {
    fontSize: 14,
    color: '#f4f3f4',
    position: 'absolute',
    top: 6,
    right: 5,
  },
  mainStyes: {
    borderRadius: 30,
    backgroundColor: '#81b0ff',
    height: 30,
    width: 60,
  },

  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});