Switch toggle button in react native

 

import * as React from 'react';

import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

import Constants from 'expo-constants';

export default function App() {

  const [pressed1, setPressed1]= React.useState(false);

  const [pressed2, setPressed2]= React.useState(false);

  const forfirst=()=> {

    setPressed1(!pressed1);

    setPressed2(false)

  };

  const forsecond=()=> {

    setPressed1(false);

    setPressed2(!pressed2)

  };

  return (

    <View style={styles.container}>

    <Text style={{fontSize: 18, fontWeight: 'bold'

    , alignContent: 'center', textAlign: 'center'}}

    >Switch on button</Text>

      <View style={styles.buttonBg}>

      <TouchableOpacity onPress={() => forfirst()}

      style ={{

        width: '53%',

        height: "100%",

        backgroundColor: pressed1 ? '#49B9E9' : 'white',

        borderRadius: 10,

        padding: 20,

        justifyContent: 'center'

      }}>

       <Text style={{fontWeight: 'bold',}}>Switched off</Text>

      </TouchableOpacity>

      <TouchableOpacity onPress={() => forsecond() }

       style ={{

        width: '55%',

        height: '100%',

        backgroundColor: pressed2 ? '#49B9E9' : 'white',

        borderRadius: 10,

        padding: 20,

        justifyContent: 'center',

        marginLeft: -23,

        borderWidth: 0.2,

        borderTopLeftRadius: 30

      }}>

      <Text style={{fontWeight: 'bold',}}>Switched on</Text>

      </TouchableOpacity>

      </View>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    paddingTop: Constants.statusBarHeight,

    backgroundColor: '#ecf0f1',

  },

  buttonBg: {

    borderWidth: 1,

    height: '7%',

    margin: 30,

    marginHorizontal: 50,

    borderRadius: 10,

    flexDirection: 'row',

  }

});