Skip to content
No description, website, or topics provided.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gifs update demo Sep 5, 2019
lib
src build 0.1.2 Sep 5, 2019
.gitignore
README.md
package.json delete example and some fixes Sep 5, 2019
yarn.lock

README.md

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

name required description
screen yes React.Component
props no your props
name yes name to navigate
init no inital page
snapPoints no
popupStyle no form popup styles

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
You can’t perform that action at this time.