React-native-animated-tabs NPM

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

npm.io

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