Beautiful Navigation animation with transition made with React Native
source link: https://reactnativeexample.com/beautiful-navigation-animation-with-transition-made-with-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Beautiful Navigation animation with transition made with React Native
React Native Navigation Animation
Beautiful Navigation animation with transition made with React Native.
Check it out on Dribbble (https://dribbble.com/shots/4115418-Home-page-interactions)
Android: react-native run-android
iPhone: react-native run-ios
Usage
render() {
return (
<SafeAreaView style={styles.mainContainer}>
<View style={styles.navigationHeaderContainer}>
<Image style={{bottom: 15, position: 'absolute', left: 15,height:20,width:20,}}
source={require('/Volumes/Project/ReactProject/AnimationDemo/Images/ic_menu.png')}/>
<Text style={{bottom: 15, position: 'absolute', right: 15,color: '#3842B0',}}>+ Create</Text>
</View>
<ScrollView style={styles.mainContainer}>
{/* Top Container ........ */}
<View style={styles.topContainer}>
{/* User Image ........ */}
<Image style={styles.userImageContainer}
source={require('/Volumes/Project/ReactProject/AnimationDemo/Images/maxresdefault.jpg')}/>
<Text style={{marginLeft: 15, marginTop: 8, color: '#6471F4'}}>
Hello,{"\n"}Dance Montgomery
</Text>
<Text style={{
marginLeft: 15,
marginRight: 15,
marginTop: 30,
color: '#3842B0',
fontSize: 40,
fontWeight: 'bold'
}}>
What you want to cook today?
</Text>
{/* Search View Container ........ */}
<View style={styles.topSearchContainer}>
<Image style={{
marginLeft: 5,
width: scaleToDimension(40),
backgroundColor: 'transparent',
height: scaleToDimension(40),
resizeMode: 'center'
}}
source={require('/Volumes/Project/ReactProject/AnimationDemo/Images/magnifying-glass-icon.png')}/>
<TextInput style={{flex: 1, marginLeft: 5, marginRight: 10, color : "#3842B0"}} placeholder={'Search'} placeholderTextColor='#3842B0' />
</View>
</View>
{/* Bottom Container ........ */}
<View style={styles.bottomContainer}>
{/* Tab bar View........ */}
<View style={styles.bottomTabBarContainer}>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
data={arrTapBar}
extraData={this.state}
renderItem={({item, index}) => this.renderTapBarItem(item, index)}
/>
</View>
{/* Grid View........ */}
<View style={styles.bottomGridContainer}>
<FlatList
showsHorizontalScrollIndicator={false}
onPress
horizontal={true}
data={arrTapBar}
renderItem={({item, index}) => this.renderGridItem(item, index)}
/>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
Dependencies
react-navigation-fluid-transitions
Changelog
Version: 1.0
- Initial Build
LICENSE!
React-native-navigation-animation is MIT-licensed.
Let us know!
We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK