I don't know how you try to add manually a Text as a Label, but as you said, you have to play with Switch, Text|Image... and some Styles to get what you want.

This is a simple example of code:

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

export function App() {
  const [value, setValue] = useState(false)

  const onValueChange = value => {
    setValue(value)
  }
  return (
    <View style={styles.container}>
      <View style={styles.switchContainer}>
        <Text>{value ? "ON" : "OFF"}</Text>
        <Switch
          style={styles.switch}
          onValueChange={onValueChange}
          value={value}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  switchContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  switch: {
    marginLeft: 10
  }
})

Answer from Boopy on Stack Overflow
🌐
React Native
reactnative.dev › docs › switch
Switch · React Native
1 month ago - Invoked when the user tries to change the value of the switch. Receives the new value as an argument.
🌐
Swmansion
docs.swmansion.com › react-native-reanimated › examples › switch
Switch | React Native Reanimated
2 weeks ago - const Switch = ({ value, onPress, style, duration = 400, trackColors = { on: '#82cab2', off: '#fa7f7c' }, }) => { const height = useSharedValue(0); const width = useSharedValue(0); const trackAnimatedStyle = useAnimatedStyle(() => { const color = interpolateColor( value.value, [0, 1], [trackColors.off, trackColors.on] ); const colorValue = withTiming(color, { duration }); return { backgroundColor: colorValue, borderRadius: height.value / 2, }; }); const thumbAnimatedStyle = useAnimatedStyle(() => { const moveValue = interpolate( Number(value.value), [0, 1], [0, width.value - height.value] ); c
🌐
GeeksforGeeks
geeksforgeeks.org › react native › react-native-switch-api
React Native Switch API - GeeksforGeeks
February 16, 2026 - The React Native Switch API is a core component used to toggle between two states, typically on and off.
🌐
GitHub
github.com › shahen94 › react-native-switch
GitHub - shahen94/react-native-switch: Customisable switch component for RN · GitHub
import { Switch } from 'react-native-switch'; export const App = () => ( <Switch value={true} onValueChange={(val) => console.log(val)} disabled={false} activeText={'On'} inActiveText={'Off'} circleSize={30} barHeight={1} circleBorderWidth={3} backgroundActive={'green'} backgroundInactive={'gray'} circleActiveColor={'#30a566'} circleInActiveColor={'#000000'} renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.) changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to comple
Starred by 293 users
Forked by 169 users
Languages   JavaScript
🌐
React Native Elements
reactnativeelements.com › switch
Switch | React Native Elements
⭐ and join the Discord server! ... Switch represents user's decision of a process and indicates whether a state is on/off. Switch is a controlled component that requires an onValueChange to update the value prop.
🌐
npm
npmjs.com › package › react-native-switch
react-native-switch - npm
February 21, 2022 - import { Switch } from 'react-native-switch'; export const App = () => ( <Switch value={true} onValueChange={(val) => console.log(val)} disabled={false} activeText={'On'} inActiveText={'Off'} circleSize={30} barHeight={1} circleBorderWidth={3} backgroundActive={'green'} backgroundInactive={'gray'} circleActiveColor={'#30a566'} circleInActiveColor={'#000000'} renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.) changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to comple
      » npm install react-native-switch
    
Published   Feb 21, 2022
Version   1.5.1
Find elsewhere
🌐
Peerlist
peerlist.io › blog › engineering › creating-custom-switch-component-in-react-native
Creating a Custom Toggle Switch Component in React Native
Switch component, which accepts two props: value (the current state of the switch) and onValueChange (a function to handle state changes). You initialize an animatedValue using React State to manage the animation of the switch's head.
🌐
MageComp
magecomp.com › home › react native › react native | switch
React Native | Switch
February 27, 2025 - The Switch component is a mainstay of the React Native library in React Native and aids in user interaction by performing a toggle action. With this versatile component, users can very smoothly switch between two very distinct states that represent ...
🌐
GitHub
github.com › Splicer97 › react-native-switch
GitHub - Splicer97/react-native-switch: Custom Switch component for React Native · GitHub
Custom Switch component for React Native that use Reanimated and Gesture Handler
Author   Splicer97
🌐
GitHub
github.com › mymai91 › react-native-toggle-element
GitHub - mymai91/react-native-toggle-element: Switch toggle component for React Native. You can add title, icon, modify component for toggle button. · GitHub
Switch toggle component for React Native. You can add title, icon, modify component for toggle button. - mymai91/react-native-toggle-element
Starred by 178 users
Forked by 20 users
Languages   TypeScript 99.7% | JavaScript 0.3%
🌐
GitHub
github.com › nithinpp69 › react-native-switch-toggles
GitHub - nithinpp69/react-native-switch-toggles: react Native customizable switch component library
<> <Text style={styles.label}>Simple Switch</Text> <Switch value={isEnabled} onChange={(value) => setIsEnabled(value)} /> </> <> <Text style={styles.label}>Switch with on/off indicator</Text> <Switch value={isEnabled} onChange={(value) => setIsEnabled(value)} activeTrackColor={'#45D058'} renderOffIndicator={() => ( <Text style={{ fontSize: 8, color: 'white' }}>OFF</Text> )} renderOnIndicator={() => ( <Text style={{ fontSize: 8, color: 'white' }}>ON</Text> )} /> </> <> <Text style={styles.label}>Switch with on/off thumb indicator</Text> <Switch size={40} value={isEnabled} onChange={(value) => s
Starred by 19 users
Forked by 3 users
Languages   TypeScript 97.3% | JavaScript 2.2% | Shell 0.5% | TypeScript 97.3% | JavaScript 2.2% | Shell 0.5%
🌐
Medium
medium.com › @songyishu.yang › react-native-switch-recolor-resize-6dc6a2ce183a
React Native Switch: recolor & resize | by Songyishu Yang | Medium
April 11, 2019 - <Switch onTintColor={Colors.tintColor} onValueChange={value=>this.setState({switchAll:value}} value={this.state.switchAll} style={{ transform:[{ scaleX: .7 }, { scaleY: .7 }] }} />
🌐
Callstack
oss.callstack.com › switch
Switch | React Native Paper
import * as React from 'react'; import { Switch } from 'react-native-paper'; const MyComponent = () => { const [isSwitchOn, setIsSwitchOn] = React.useState(false); const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn); return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />; }; export default MyComponent;
🌐
DEV Community
dev.to › amitkumar13 › how-to-handle-multiple-switches-in-react-native-4el6
How to Handle Multiple Switches in React Native - DEV Community
February 14, 2025 - In this guide, we'll walk through handling multiple switches efficiently using React Native's state management.
🌐
React Native Archive
archive.reactnative.dev › docs › switch
Switch · React Native Archive
Renders a boolean input · This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to ...
Top answer
1 of 1
3

I have made a custom switch in react native and You can do the styling in it a source code is given below -

import React from 'react'
import { Text, TouchableOpacity } from 'react-native'
import styled from 'styled-components/native'

class App extends React.Component {
  state = {
    active: false
  }
  handleOFF = () => {
    this.setState({
      active: false
    });

  }

  handleOn = () => {
    this.setState({
      active: true
    });
  }

  render() {
    return (
      <MainView>
        <Label>
          <LabelOff onPress={this.handleOFF} active={this.state.active} activeOpacity={0.8}>
            <Off>OFF</Off>
          </LabelOff>
          <LabelOn onPress={this.handleOn} active={this.state.active} activeOpacity={0.8}>
            <On>ON</On>
          </LabelOn>
        </Label>
      </MainView>
    )
  }
}


const MainView = styled.View`
  margin:50px;
`
const Label = styled.View`
  height:60px;
  width:240px;
  flex-direction:row;
  justify-content:space-around;
  align-items:center;
  background-color:transparent;
`

const LabelOff = styled.TouchableOpacity`
  height:60px;
  width:120px;
  background-color:${props => props.active ? 'transparent' : '#cb6161'};
  border:2px solid #cb6161;
  border-right-width:0px;
  align-items:center;
  justify-content:space-around;
`
const LabelOn = styled.TouchableOpacity`
  height:60px;
  width:120px;
  background-color:${props => props.active ? '#55acee' : 'transparent'};
  border:2px solid #55acee;
  border-left-width:0px;
  align-items:center;
  justify-content:space-around;
`
const Off = styled.Text`
  font-size:22px;
`
const On = styled.Text`
  font-size:22px;
`
export default App 

Custom switch is done !

🌐
Reactnativereusables
reactnativereusables.com › docs › components › switch
Switch
A control that allows the user to toggle between checked and not checked.