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 (
        
            
                
                + Create
            


        <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:" margintop: color:>
                Hello,{"\n"}Dance Montgomery
            </text>

            <text style="{{" marginleft: marginright: margintop: color: fontsize: fontweight:>
                What you want to cook today?
            </text>


            {/* Search View Container ........ */}
            <view style="{styles.topSearchContainer}">
                <image style="{{" marginleft: width: scaletodimension backgroundcolor: height: resizemode: source="{require('/Volumes/Project/ReactProject/AnimationDemo/Images/magnifying-glass-icon.png')}/">
                <textinput style="{{flex:" marginleft: marginright: color : placeholder="{'Search'}" placeholdertextcolor="#3842B0"></textinput>
            </image></view>


        </image></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)}
                /&gt;
            </flatlist></view>

            {/* Grid View........ */}
            <view style="{styles.bottomGridContainer}">
                <flatlist showshorizontalscrollindicator="{false}" onpress horizontal="{true}" data="{arrTapBar}" renderitem="{({item," index> this.renderGridItem(item, index)}
                /&gt;
            </flatlist></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.