react-native-popup-navigation
v0.2.0
Published
popup navigation
Downloads
11
Maintainers
Readme
| | :---------------:|:----------------:|
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