Skip to content

mnshkv/react-native-popup-navigation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published