react-native-popup-navigation v0.2.0

Installation

Open a Terminal in the project root and run:

yarn add react-native-popup-navigation

Install and link react-native-gesture-handler

Usage

Navigator

import React from 'react'
import { Navigator } from 'react-native-popup-navigation'
import { Dimensions } from 'react-native'

import Home from './home'
import Popup from './pop_up'

const { height } = Dimensions.get('window')

export default () => {
  return (
    <Navigator pages={[ 
      { screen: Home, props: {}, name: 'home', init: true },
      { screen: Popup, props: {}, name: 'popup', snapPoints: [0, height] }
    ]} />
  )
}

Props

Moving between screens

import React from 'react';
import {View, Text, Dimensions, TouchableOpacity, StyleSheet} from 'react-native'

const { width, height } = Dimensions.get('window')

const Home = (props) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => { props.present('popup') }} style={styles.btn}>
        <Text>Present</Text>
      </TouchableOpacity>
    </View>
  )
}

const PopUp = (props) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => { props.dismiss() }} style={styles.btn}>
        <Text>Present</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = {
  container: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  btn: {
    padding: 20,
    backgroundColor: 'green'
  }
}

export default App