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?
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
Add some styles to button and button group
Then define function and state on the top of