Home

Awesome

React Native Turbolinks

A implementation of Turbolinks for iOS and Turbolinks Android for React Native.

React Native Turbolinks

Getting started

yarn add react-native-webview react-native-turbolinks
cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

Warning

Basic Usage

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

export default class App extends Component {

  componentDidMount() {
    Turbolinks.addEventListener('turbolinksVisit', this.handleVisit)
    Turbolinks.addEventListener('turbolinksError', this.handleError)
    Turbolinks.startSingleScreenApp({url: 'http://MYIP:9292'})
  }

  handleVisit = (data) => {
    Turbolinks.visit({url: data.url, action: data.action})
  }

  handleError = (data) => {
    alert(data.description)
  }

  render() { return null }
}

Running the Demo

This repository includes a demo application to show off features of the framework. The demo bundles a simple HTTP server that serves a Turbolinks 5 web app on localhost at port 9292.

To run the demo, clone this repository to your computer and change into its directory. Then, Open file Example/app.json and change baseUrl with your IP and start the demo server by running Example/demo-server from the command line.

Once you’ve started the demo server, explore the demo application in the Simulator by running react-native run-ios or react-native run-android on Example folder.

React Native Turbolinks Demo Application

Methods

startSingleScreenApp(route, appOption = {})

Start a Single Screen App. Use it instead visit for first visit.

startSplitScreenApp(primaryComponent, secondaryRoute, appOption = {})

Start a Splitted Screen App. Use it instead visit for first visit. It is a good choice for iPad. (iOS Only)

visit(route)

Visit a URL or Component.

replaceWith(route)

Replace current visitable with a component. With the same route param like to visit a component.

reloadVisitable()

Reload current visitable. For example when a connection error view is launched and you want to retry.

reloadSession()

Reload current session.

removeAllCookies()

Remove all cookies. Return a promise.

dismiss(animated = true)

Dismiss a overlaped view presented by visiting a component with modal option. Return a promise.

popToRoot(animated = true)

Back until to root view. Return a promise.

back(animated = true)

Trigger a native back event. For example if you using a custom navbar and need to provide a back button. Return a promise.

renderTitle(title, subtitle = null)

Change title of current view. For example if you want to get title from page source.

renderActions(actions)

Change actions of current view. For example if you want to mount a menu looking for data-attributes on page source.

renderNavBarStyle(navBarStyle)

Change navbarStyle on run time. For example if you want to provide a way for the user to choose a theme.

injectJavaScript(script)

Function that accepts a string that will be passed to the WebView and executed immediately as JavaScript. Return a promise.

addEventListener(eventName, handler)

Adds an event handler. Supported events:

removeEventListener(eventName, handler)

Removes the listener for given event.

Objects

Route

AppOption

Action

Constants

Turbolinks.Constants.ErrorCode.httpFailure: 0

Turbolinks.Constants.ErrorCode.networkFailure: 1

Turbolinks.Constants.Action.advance: 'advance'

Turbolinks.Constants.Action.replace: 'replace'

Turbolinks.Constants.Action.restore: 'restore'

Android Style

For android set your style on android/app/src/main/res/values/styles.xml.

TODO

Resources