Skip to content

philipshurpik/react-native-animated-tabs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Animated Tabs for React Native. Both for iOS and Android

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published