All Projects → MohamadKh75 → react-navigation-transition-config

MohamadKh75 / react-navigation-transition-config

Licence: MIT License
Custom transition config for react-navigation

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-navigation-transition-config

react-navigation-polyfill
DEPRECATED: somes experiments usng react-navigation in web
Stars: ✭ 19 (+58.33%)
Mutual labels:  react-navigation
expo-multi-screen-starter
react native / expo / react navigation v6
Stars: ✭ 74 (+516.67%)
Mutual labels:  react-navigation
react-native-boilerplate
React Native Boilerplate - React Native Starter Kits : react-navigation and its dependencies, redux, redux persist and redux thunk, redux toolkit, react native vector icons, react-native async storage
Stars: ✭ 68 (+466.67%)
Mutual labels:  react-navigation
react-native-template
Template project with Redux, Saga, ReactNavigation
Stars: ✭ 19 (+58.33%)
Mutual labels:  react-navigation
umi-react-native
umi preset plugins for react-native
Stars: ✭ 54 (+350%)
Mutual labels:  react-navigation
react-native-bubble-tab-bar
Custom animated TabBar component
Stars: ✭ 38 (+216.67%)
Mutual labels:  react-navigation
react-native-navigation-mobx-demo
React native Navigation with MobX demo. Blog post write up ->
Stars: ✭ 32 (+166.67%)
Mutual labels:  react-navigation
SolarNews
🐙 React-native news app for developper
Stars: ✭ 13 (+8.33%)
Mutual labels:  react-navigation
react-native-boilerplate
Expo + Redux + React Navigation Pre-setup Template (expo SDK 44)
Stars: ✭ 142 (+1083.33%)
Mutual labels:  react-navigation
RNLauncher
A custom Android Launcher made with ReactNative
Stars: ✭ 89 (+641.67%)
Mutual labels:  react-navigation
reactnative-typescript
Playground and evolution of learnings done in react native with typescript
Stars: ✭ 28 (+133.33%)
Mutual labels:  react-navigation
React-Native-Chat-App
A simple chatting app built with React Native, Socket.io, ExpressJS and MongoDB. The server app provides APIs for authentication, message sending and receiving. In the client app React-Native-Gifted-Chat is used for the chat interface.
Stars: ✭ 22 (+83.33%)
Mutual labels:  react-navigation
react-native-authentication
Extended React-native authentication with React-navigation
Stars: ✭ 45 (+275%)
Mutual labels:  react-navigation
acgnfuns-app
A react native app based on expo, dva, etc.
Stars: ✭ 14 (+16.67%)
Mutual labels:  react-navigation
reddit-clone
Full stack Reddit clone with nodejs and react native.
Stars: ✭ 69 (+475%)
Mutual labels:  react-navigation
yunle-template-react-native
yunle-cli 前端开发模板- RN 专为react-native开发 IOS&Android APP
Stars: ✭ 14 (+16.67%)
Mutual labels:  react-navigation
react native app start kit
a react-native app template
Stars: ✭ 11 (-8.33%)
Mutual labels:  react-navigation
react-native-boilerplate
React Native boilerplate with react-navigation and native-base
Stars: ✭ 15 (+25%)
Mutual labels:  react-navigation
MyApp
A template to create awesome Apps easily ⚡️
Stars: ✭ 39 (+225%)
Mutual labels:  react-navigation
react-native-shopping-app
A shopping app using React Navigation, Redux, Redux-Thunk and Firebase.
Stars: ✭ 67 (+458.33%)
Mutual labels:  react-navigation

react-navigation-transition-config

PRs Welcome   code style: prettier   npm version   DUB


Install

Package Manager Command
npm npm i --save react-navigation-transition-config
yarn yarn add react-navigation-transition-config

Usage

Use these functions as transitionConfig with react-navigation:

Example

import { createStackNavigator } from "react-navigation";
import { fromLeft } from "react-navigation-transition-config";

const rootStack = createStackNavigator(
  {
    ScreenA: {
      screen: ScreenA
    },
    ScreenB: {
      screen: ScreenB
    }
  },
  {
    initialRouteName: "ScreenA",
    transitionConfig: () => fromLeft()
  }
);

Note: The default duration is 300 milliseconds change it:

transitionConfig: () => fromLeft(1000),

You can also take a look at examples:

cd examples

yarn

react-native run-android

# OR

react-native run-ios

Transitions

  • fromLeft

  • fromRight

  • fromBottom

  • fromTop

  • zoomIn

  • zoomOut

  • flipX

  • flipY

  • fadeIn

Credit

This library is based on react-navigation-transitions. I added more transitions!

More references

Read more in react-navigation docs.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].