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


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) => {

  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


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 a URL or Component.


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


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


Reload current session.


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.


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


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


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.






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.