NavigationBar - lazaronixon/react-native-turbolinks GitHub Wiki

This Wiki show you how to use React Native Turbolinks integrated with React Native Navbar.

Installation

$ yarn add react-native-status-bar-height react-native-navbar

ModalView

import React, { Component } from 'react'
import { View, StyleSheet, Platform } from 'react-native'
import { getStatusBarHeight } from 'react-native-status-bar-height'
import Turbolinks from 'react-native-turbolinks'
import NavigationBar from 'react-native-navbar'

export default class ModalView extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <NavigationBar
          title={{title: 'Modal'}}
          leftButton={{title: 'Close', handler: () => Turbolinks.dismiss()}}
          statusBar={{hidden: true}}
          containerStyle={styles.navBarContainerStyle} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  navBarContainerStyle: {
    paddingTop: getStatusBarHeight(true),
    backgroundColor: '#fff',
    borderBottomColor: '#aaa',
    borderBottomWidth: StyleSheet.hairlineWidth,
    justifyContent: 'center',
    height: Platform.select({ android: 56, default: 44 + getStatusBarHeight(true) })
  }
})
⚠️ **GitHub.com Fallback** ⚠️