##### Custom button switch page file
```
import React, { useState } from "react";
import { StyleSheet, Text ,TouchableOpacity,View} from 'react-native';
import { colors, gbs, sc } from "../../utils/import/import_options";
type ButtonSwitchViewProps = {
leftTitle: string,
rightTitle: string,
onSelected(isTrue: boolean): void
};
const ButtonSwitchView = ({leftTitle, rightTitle, onSelected}: ButtonSwitchViewProps) => {
const [selected, setSelected] = useState(leftTitle);
const updateSelectedButton = (value: string) => {
setSelected(value);
selected === leftTitle ? onSelected(true) : onSelected(false);
}
return (
<View style={[styles.container, {flexDirection: "row", borderRadius: sc.padMin, }]}>
<TouchableOpacity
style={[styles.buttonLeft, { backgroundColor: selected === leftTitle ? colors.backgroundNavbar : colors.thirdBlue}]}
onPress={() => {updateSelectedButton(leftTitle)}}
>
<Text style= {[styles.text, gbs.bodyTrirong , {}]}>{leftTitle}</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.buttonRight, { backgroundColor: selected === rightTitle ? colors.backgroundNavbar : colors.thirdBlue}]}
onPress={() => {updateSelectedButton(rightTitle)}}
>
<Text style= {[styles.text, gbs.bodyTrirong , {}]}>{rightTitle}</Text>
</TouchableOpacity>
</View>
);
}
export default ButtonSwitchView;
const styles = StyleSheet.create({
container: {
width: "100%",
height: sc.sectionBlockHeight
},
buttonLeft: {
flex: 1,
borderTopLeftRadius: sc.maxSpace,
borderBottomLeftRadius: sc.maxSpace,
alignItems: "center",
justifyContent: "center"
},
buttonRight: {
flex: 1,
borderTopRightRadius: sc.maxSpace,
borderBottomRightRadius: sc.maxSpace,
alignItems: "center",
justifyContent: "center"
},
text: {
color: colors.white,
}
});
```
##### Usage file
```
import React, { useState } from "react";
import { Text ,View} from 'react-native';
import ButtonSwitchView from "../../../components/button/button_switch_view";
import { colors, gbs, sc } from "../../../utils/import/import_options";
import InsideScreen from "./sub_screens/inside_screen";
import OutsideScreen from "./sub_screens/outside_screen";
const Test = () => {
const [isSwitchView, setIsSwitchView] = useState(false);
return (
<View style={[{ minHeight: sc.spaceFiftyEightHeight, paddingHorizontal: sc.padMid, marginBottom: sc.spaceFiftyEightHeight }]}>
<View style={[{ flexDirection: "row", }]}>
<View style={[{ flex: 3 }]}>
<Text style={[gbs.bodyTrirong, { color: colors.white }]}>Features</Text>
</View>
<View style={[{ width: sc.caption }]}></View>
<View style={[{ flex: 5 }]}>
<ButtonSwitchView
leftTitle="Inside"
rightTitle="Outside"
onSelected={(value) => setIsSwitchView(value)}
/>
</View>
</View>
{
isSwitchView
? <OutsideScreen
address="Bangkok Thailand"
phone="999-999-999"
/>
: <InsideScreen
address="123 ..... Soi Jomthong Bangkok Thailand"
phone="999-999-999"
/>
}
</View>
);
}
export default Test;
```
## SubViews
# <InsideScreen /> file
# <OutsideScreen /> file