Usage

render(){return(<SafeAreaViewstyle={styles.mainContainer}><Viewstyle={styles.navigationHeaderContainer}><Imagestyle={{bottom:15,position:'absolute',left:15,height:20,width:20,}}source={require('/Volumes/Project/ReactProject/AnimationDemo/Images/ic_menu.png')}/><Textstyle={{bottom:15,position:'absolute',right:15,color:'#3842B0',}}>+ Create</Text></View><ScrollViewstyle={styles.mainContainer}>{/* Top Container ........ */}<Viewstyle={styles.topContainer}>{/* User Image ........ */}<Imagestyle={styles.userImageContainer}source={require('/Volumes/Project/ReactProject/AnimationDemo/Images/maxresdefault.jpg')}/><Textstyle={{marginLeft:15,marginTop:8,color:'#6471F4'}}>                    Hello,{"\n"}Dance Montgomery</Text><Textstyle={{marginLeft:15,marginRight:15,marginTop:30,color:'#3842B0',fontSize:40,fontWeight:'bold'}}>                    What you want to cook today?</Text>{/* Search View Container ........ */}<Viewstyle={styles.topSearchContainer}><Imagestyle={{marginLeft:5,width:scaleToDimension(40),backgroundColor:'transparent',height:scaleToDimension(40),resizeMode:'center'}}source={require('/Volumes/Project/ReactProject/AnimationDemo/Images/magnifying-glass-icon.png')}/><TextInputstyle={{flex:1,marginLeft:5,marginRight:10,color :"#3842B0"}}placeholder={'Search'}placeholderTextColor='#3842B0'/></View></View>{/* Bottom Container ........ */}<Viewstyle={styles.bottomContainer}>{/* Tab bar View........ */}<Viewstyle={styles.bottomTabBarContainer}><FlatListshowsHorizontalScrollIndicator={false}horizontal={true}data={arrTapBar}extraData={this.state}renderItem={({item, index})=>this.renderTapBarItem(item,index)}/></View>{/* Grid View........ */}<Viewstyle={styles.bottomGridContainer}><FlatListshowsHorizontalScrollIndicator={false}onPresshorizontal={true}data={arrTapBar}renderItem={({item, index})=>this.renderGridItem(item,index)}/></View></View></ScrollView></SafeAreaView>);}

Dependencies

Changelog

Version: 1.0

LICENSE!

Let us know!