1. The parallax Intro

This feature used an awesome component from "react-native-app-intro"

We can get the parallax effect by put every image to separate view, the difference level will identify the difference moving time when switching the layer.

<View level={10} style={intro.imageView}>
       <Image style={intro.image} source={require('../../images/phone.png')}></Image>
</View>

2. Custom TabBar

This is probably my favorite navigation pattern on iOs and Android, the TabBar with scroll view is getting from ScrollableTabView component and render the tab bar by inject from ScrollableTabBar, you can customer the ScrollableTabBar with Icon or many kind of views

Example it could be customize to the progressBar with very cool effect from Animation view.

<ScrollableTabView tabBarTextStyle={{height: 20, fontWeight: 'normal', fontSize: 13}}
      renderTabBar={() => yourCustomTabBar()}
      <Shipping tabLabel="Shipping"/>
             <Payment tabLabel="Payment"/>
             <Confirm tabLabel="Confirm"/>
</ScrollableTabView>

3. Native TabBar

The native tabBar could get with the translucent only from iOS as the Android is still in development.

<TabBarIOS
    tintColor="#1CAADE"
    translucent={true}>
         <TabBarIOS.Item
             title="My order" badge={3}
             icon={{uri: iconOrder, scale: 4}}
             selected={this.state.selectedTab === 'tabOne'}
             onPress={() => {
                   this.setState({
                   selectedTab: 'tabOne'
              });
               }}>
          <MyOrder />
         </TabBarIOS.Item>
    ....
</TabBarIOS>

4. Drawer & Router

This used for manage the left side bar menu and routing the page with Actions component from "react-native-router-flux" which can be used for:

• Define scene transitions in one central location

• Without having to pass navigator objects around, and allow you to

• Call transitions anywhere in your code with a simple syntax (e.g. Actions.login({username, password}) orActions.profile({profile}) or even Actions.profile(123) - all params will be part of this.props for given Scene component).

<Drawer
      ref="drawer"
      type="static"
      tweenHandler={Drawer.tweenPresets.parallax}
      tapToClose={true}
      panCloseMask={0.2}
      openDrawerOffset={0.2}
      content={<SideMenu />}>
      <Router hideNavBar={true} dispatch={this.closeSideMenu.bind(this)} scenes={scenes} />
</Drawer>