Need help with react-native-navigation-animation?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Mindinventory
130 Stars 19 Forks MIT License 11 Commits 0 Opened issues

Description

Transition navigation component for React Native

Services available

!
?

Need anything else?

Contributors list

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.