Skip to content

jljlpch/react-native-animated-tabs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 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)

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
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

Languages

  • JavaScript 50.5%
  • Objective-C 33.1%
  • Python 9.7%
  • Java 6.7%