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