To achieve your first switch example you can look at react-native-switch and tweak it slightly to take a height and width (instead of circle size). I have a working example of this here.

For your second example a simple TouchableOpacity with toggle icon should suffice. You can get a little more elborate and add a color animation if you wanted.

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;

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 !