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

To fill space along the main axis of flexboxes, apply the flex property with a number value to flex children. The number specifies the proportions of how the available space is distributed among the flex children. See the docs on flexbox for details.

In your case, you would specify flex: 1 only for the <Input /> meaning that this component alone is allowed to fill the rest of the space. I've created this React Native & MUI Codesandbox to demonstrate it.

<View style={{ flexDirection: 'row' }} >
     <Switch style={styles.switch}
             trackColor={{true: "#36d79a", false: 'grey'}}
             thumbColor={{true: "#36d79a", false: 'grey'}}
     />
    <Input style={{ flex: 1 }} right placeholder="Type your custom question here." iconContent= 
   {<Block />} 
     />
</View>

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;

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',
  },
});