iq-scm / react-native-animated-tabs

Animated Tabs for React Native. Both for iOS and Android

react-native-animated-tabs

Animated Tabs for React Native. Both for iOS and Android. Just swipe between tabs to navigate.

Changelog:

v 1.1.0

• Fixed bug on Android
• Supported navigation between tabs with external buttons (see example)

v 1.2.1

• Reinitialisation of component when Children are changed
• Pass onMoveShouldSetPanResponder handler to set on which swipes animation should react. For example to react only on horizontal swipes:

    onMoveShouldSetPanResponder={(a, e) => {
        return Math.abs(e.dx) > 30 && Math.abs(e.dx) > Math.abs(e.dy) * 1.5;
    }}

v 1.3 Correct support for changing orientation

Usage:

npm i react-native-animated-tabs --save

Example of usage:

<AnimatedTabs>
    <View style={styles.tabContent}>
        <Text style={styles.text}>Tab 1 Content</Text>
    </View>
    <View style={styles.tabContent}>
        <Text style={styles.text}>Tab 2 Content</Text>
    </View>
    <View style={styles.tabContent}>
        <Image style={styles.image} source={require('./images/cat1.gif')} resizeMode='stretch'/>
    </View>
</AnimatedTabs> 

More - in example folder

---

API:

Property	Type	Description	Default value
activePanel	number	active panel	0
animatedConfig	object	spring animation properties	{ tension: 70, friction: 10 }
onAnimate	function	animate start callback, returns next active panel index
onAnimateFinish	function	animate finish callback, returns next active panel index
onMoveShouldSetPanResponder	function	should animation be started	undefined (start immediately)
panelStyle	object	animated view styles
panelWidth	number	animated view width	deviceWidth / 1.4
swipeThreshold	number	threshold - to start or cancel swipe	deviceWidth / 7
sidePanelOpacity	number	opacity of not active panels	1
sidePanelScale	number	scale of not active panels	0.8