how to create sliding tab button in react native - reactjs

Question

I follow a tutorial for creating a sliding tab or segment component using animation like below:
const SlidingTabBar = (props) => {
const [active, setActive] = useState(0)
const [xTabOne, setXTabOne] = useState(0)
const [xTabTwo, setXTabTwo] = useState(0)
const [transX, setTransX] = useState(new Animated.Value(0))
const handleSlide = (type) => {
Animated.spring(transX, {
toValue: type,
duration: 100
}).start()
}
return (
<View style={styles.screen}>
<View style={styles.tabContainer}>
<Animated.View style={styles.active, {transform: [{ translateX: transX}]}} />
<TouchableOpacity onLayout={(e) => setXTabOne(e.nativeEvent.layout.x)} onPress={() => setActive(0), handleSlide(xTabOne)}><Text>tab one</Text></TouchableOpacity>
<TouchableOpacity onLayout={(e) => setXTabTwo(e.nativeEvent.layout.x)} onPress={() => setActive(1), handleSlide(xTabTwo)}><Text>tab 2</Text></TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
tabContainer: {
flexDirection: 'row',
borderWidth: 1,
borderColor: 'blue',
width: 300,
justifyContent: 'space-around',
position: 'relative',
},
active: {
position: 'absolute',
backgroundColor: 'lightblue',
width: '50%',
height: '100%',
left: 0,
top: 0
}
})
but when I implement my transform on the View component my overlay disappear and break like this:
any suggestions?

Answer 1

This is very simple in starting I was also struggling in this but I sort it out
Note: code is for functional component
just do it take a View as button container and inside it take to button like this
<View style={styles.tabGroup}>
<TouchableOpacity
activeOpacity={0.6}
underlayColor="#0000ff"
onPress={()=> handleTab("tab1")}
style={[styles.tabButton, tab.tab1 && styles.tabButtonActive]}
>
<Text style={[styles.tabButtonTitle, tab.tab1 && styles.tabButtonTitleActive]}>Tab btn1</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.6}
underlayColor="#0000ff"
onPress={()=> handleTab("tab2")}
tyle={[styles.tabButton, tab.tab2 && styles.tabButtonActive]}
>
<Text style={[styles.tabButtonTitle, tab.tab2 && styles.tabButtonTitleActive]}>Tab btn2</Text>
</TouchableOpacity>
</View>
Add some styles to button and button group
tabGroup:{
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: 'rgba(11, 93, 30, 0.11)',
borderRadius: 46,
marginHorizontal: 20,
justifyContent: 'space-between'
},
tabButton:{
backgroundColor: 'transparent',
borderRadius: 46,
paddingHorizontal: 20,
paddingVertical: 12,
alignItems: 'center',
},
tabButtonActive:{
backgroundColor: '#0B5D1E',
borderRadius: 46,
paddingHorizontal: 20,
paddingVertical: 12,
alignItems: 'center',
},
tabButtonTitle:{
fontSize: 16,
fontWeight: 'normal',
textAlign: 'center',
color: '#000'
},
tabButtonTitleActive:{
fontSize: 16,
fontWeight: 'normal',
textAlign: 'center',
color: '#fff'
}
Then define function and state on the top of
const [tab, setTab] = useState({
tab1: false,
tab2: true
});
const handleTab = (swap) =>{
if(swap==="tab1"){
setTab({
tab1: true,
tab2: false
})
}
else{
setTab({
tab1: false,
tab2: true
})
}
}