react-navigation-modal-screen v0.1.0

react-navigation-modal-screen

Modal in React Native with react-navigation

• handle back
• custom backdrop
• transitions

Motivations

Although React Native provides built-in Modal and a more powerful react-native-modal, some bugs on Android still make it hard to use and it still doestnot implement Portal yet (so the modal lives deeply in your view). With the modal statusbar issue, we have to find a better way to build the modal type interface like alert box, date picker and so on. The modal stack in react-navigation simply makes it easier and requires much less hacks.

Installation

yarn add react-navigation-modal-screen

Usage

import { createStackNavigator } from 'react-navigation';
import ModalScreen from 'react-navigation-modal-screen';
import { fadeIn } from 'react-navigation-transitions';

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: MainNavigator
    },
    Modal: {
      screen: ModalScreen
    }
  },
  {
    mode: 'modal',
    headerMode: 'none',
    transparentCard: true,
    transitionConfig: () => fadeIn(300)
  }
);

License

MIT