Sliding tab bars are used in the Facebook app, so I was thinking, why not try to do the same in React Native, especially considering that is what they used to build the Facebook app? I quickly realized that I could achieve this using a View
that was hidden partially, off-screen, and then using animation to translate it along the X-direction, to move the other parts of the view into place as and when needed. For this, I used the Animated
library, and the translateX
property of transform
. What we're doing is, binding that property to the value of slideAnim
, which changes when we press the tab buttons. I'm not covering the basics of Animated
here, you can find that in the official docs - https://reactnative.dev/docs/animated . In fact, this example below has been made by slightly modifying the code in the docs. Without further ado, here's the full code.
import React, {useRef} from 'react';
import {
Animated,
Text,
View,
StyleSheet,
TouchableOpacity,
Dimensions,
} from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const TestPage = () => {
const slideAnim = useRef(new Animated.Value(0)).current;
const selectTab = (tabIndex) => {
Animated.timing(slideAnim, {
toValue: -windowWidth * tabIndex,
duration: 300,
useNativeDriver: true,
}).start();
};
return (
<>
<View>
<Animated.View
style={{flexDirection: 'row', transform: [{translateX: slideAnim}]}}>
<FirstTab />
<SecondTab />
<ThirdTab />
</Animated.View>
</View>
<View style={styles.buttonRow}>
<TouchableOpacity
style={styles.tabButton}
onPress={() => {
selectTab(0);
}}>
<Text>One</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.tabButton}
onPress={() => {
selectTab(1);
}}>
<Text>Two</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.tabButton}
onPress={() => {
selectTab(2);
}}>
<Text>Three</Text>
</TouchableOpacity>
</View>
</>
);
};
const FirstTab = () => (
<View style={styles.tabBox}>
<Text style={styles.caption}>First Tab</Text>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim
nulla ac mauris condimentum volutpat. In at tincidunt dolor. Pellentesque
eu congue turpis. Integer viverra quam neque, id imperdiet dui laoreet id.
Vestibulum dapibus velit non tortor congue scelerisque. Aliquam sed tempor
nibh. Nam id eros in ex commodo pulvinar nec in erat. Fusce sodales eget
felis accumsan fermentum. Aliquam a arcu mattis, consequat dui in, rhoncus
arcu. Aenean sollicitudin semper diam eu aliquet. Donec dignissim
fermentum feugiat. Curabitur commodo viverra elit, ut elementum nisl
gravida vitae. Morbi lobortis luctus dictum. Fusce ornare luctus arcu sit
amet ultrices. Donec nec ipsum in quam condimentum tempor aliquam id
tortor. In pharetra orci non eros hendrerit dapibus. Aliquam erat
volutpat. Nunc blandit dui id augue consequat eleifend. Phasellus et
molestie felis, vitae accumsan mauris. Vivamus diam ligula, malesuada vel
eros et, sodales scelerisque purus. Aenean at mi eget lectus mollis
facilisis a vel lacus. Sed facilisis mauris nec facilisis lobortis. Donec
augue erat, volutpat a diam a, dictum mattis eros.
</Text>
</View>
);
const SecondTab = () => (
<View style={styles.tabBox}>
<Text style={styles.caption}>Second Tab</Text>
<Text style={styles.text}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</Text>
</View>
);
const ThirdTab = () => (
<View style={styles.tabBox}>
<Text style={styles.caption}>Third Tab</Text>
<Text style={styles.text}>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident, similique
sunt in culpa qui officia deserunt mollitia animi, id est laborum et
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut
officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae sint et molestiae non recusandae. Itaque earum rerum hic
tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
consequatur aut perferendis doloribus asperiores repellat.
</Text>
</View>
);
const styles = StyleSheet.create({
tabBox: {
padding: 10,
backgroundColor: '#ffe8',
height: windowHeight,
},
caption: {
fontSize: 28,
textAlign: 'center',
margin: 10,
},
buttonRow: {
flexDirection: 'row',
position: 'absolute',
bottom: 0,
},
tabButton: {
padding: 15,
backgroundColor: '#fff',
flex: 1,
margin: 1,
width: 100,
justifyContent: 'center',
alignItems: 'center',
},
text: {
textAlign: 'justify',
},
});
export default TestPage;
See it on Snack here - https://snack.expo.io/pi0WJYfSN
The great thing is, because we're translating by a value of windowWidth * tabIndex
every time, it's completely dynamic. So you could have as many or as few tabs here as possible, and everything will still work.
Top comments (0)