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',

  }


});


Comments

Popular posts from this blog

WR3D wwe 2k19 MOD apk direct download link for Android

Download wwe2k17 wr3d

How to make resizeable window in pygame and make content adjustable according to window size