Tab Navigator - lazaronixon/react-native-turbolinks GitHub Wiki

This Wiki show you how to implement a simple TabBar app.

Look out!

React Native Turbolinks doesn't support multiple turbolinks webviews. What you can do is put a <WebView/> inside each TabNavigatorItem and intercept the click on links and execute a Turbolinks.visit({url: this.clickedLinkUrl}).

To make intercept works you need disable turbolinks with data-turbolinks="false".

Install react-native-tab-navigator

$ yarn add react-native-tab-navigator

App.js

import React, { Component } from 'react'
import Turbolinks from 'react-native-turbolinks'

export default class App extends Component {

  componentDidMount() {
    Turbolinks.startSingleScreenApp({title: "App", component: "TabbedView"})
  }

  render() { return null }
}

TabbedView.js

import React, {Component} from 'react'
import {Platform, StyleSheet, Text, View, SafeAreaView} from 'react-native'
import { WebView } from 'react-native-webview'
import Turbolinks from 'react-native-turbolinks'
import TabNavigator from 'react-native-tab-navigator'

const baseUrl = 'http://MYIP:9292/'

class Home extends Component {
  onLoadStart = (event) => {
    if (event.nativeEvent.url != baseUrl) {
      this.webview.stopLoading()
      Turbolinks.visit({url: event.nativeEvent.url})
    }
  }

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <WebView ref={webview => { this.webview = webview }}
                 source={{uri: baseUrl}}
                 onLoadStart={this.onLoadStart}/>
      </SafeAreaView>
    )
  }
}

class Profile extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Profile
        </Text>
      </View>
    )
  }
}

export default class TabbedView extends Component {

  state = { selectedTab: 'home' };

  render() {
    return (
      <TabNavigator style={styles.container}>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          title="Home"
          onPress={() => this.setState({selectedTab: 'home'})}>
          <Home/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'profile'}
          title="Profile"
          onPress={() => this.setState({selectedTab: 'profile'})}>
          <Profile/>
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});