Two buttons based on click, function will be called - react-native

Question

I want to create a design which I have attached, there are two buttons, when I click on unlimited credit the colour of the button should become red and limited should be white and when I click on limited the limited button should be red and unlimited colour should be white as shown in the image and also when I click on button it should call functions, the function will have some design part and there will be two functions one for unlimited and other for limited based on the button click it should call that function, please let me know how can I execute this.

Answer 1

Final Output:
Full code:
const ButtonContainer = () => {
const [btnOne, setBtnOne] = useState(false);
const [btnTwo, setBtnTwo] = useState(false);
const clickStyle = { backgroundColor: '#F5D9D0', borderColor: '#F3805E' }
return (
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => {
setBtnOne(true);
setBtnTwo(false);
}}
style={[
styles.button,
btnOne ? clickStyle : null,
]}>
<Text>Unlimited Credit</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setBtnOne(false);
setBtnTwo(true);
}}
style={[
styles.button,
btnTwo ? clickStyle : null,
]}>
<Text>Limited Credit</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
},
button: {
borderColor: 'grey',
borderWidth: 2,
padding: 10,
borderRadius: 20,
},
});
Live working example: Expo Snack

Answer 2

here's a snack I created: https://snack.expo.io/#yoobit0616/two-buttons
import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import Constants from 'expo-constants';
export default function App() {
const [disabledButton, setDisabledButton] = useState(true);
return (
<View style={styles.container}>
<View style={styles.buttonView}>
<Button
style={styles.button}
onPress={() => setDisabledButton(!disabledButton)}
buttonStyle={
disabledButton
? { backgroundColor: 'white' }
: { backgroundColor: 'red' }
}
titleStyle={{ color: 'black' }}
title="Unlimited Credit"></Button>
<Button
style={styles.button}
onPress={() => setDisabledButton(!disabledButton)}
buttonStyle={
!disabledButton
? { backgroundColor: 'white' }
: { backgroundColor: 'red' }
}
titleStyle={{ color: 'black' }}
title="Limited Credit"></Button>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
buttonView: {
flexDirection: 'row',
justifyContent: 'center',
},
button: {
height: 40,
width: 150,
marginLeft: 20,
borderRadius: 5,
borderWidth: 1,
},
});