Skip to content
This repository has been archived by the owner on Oct 20, 2022. It is now read-only.


Repository files navigation

React Native Turbolinks

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

React Native Turbolinks

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


  • This component only applies to projects made with react-native init or to those made with expo-cli which have since ejected. For more information about ejecting, please see the guide on Expo docs.

  • On android you should use Volume UP to show Developer Menu instead ⌘ M.

  • React Native Turbolinks doesn't support Fast Refresh, please disable it on React Native developer menu ⌘ D.

  • Start rails with rails s -b

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:

  • turbolinksVisit: Fires when you tap a Turbolinks-enabled link. The argument to the event handler is an object with keys: url, path, action.
  • turbolinksError: Fires when your visit’s network request fails.The argument to the event handler is an object with keys: code, statusCode, description.
  • turbolinksMessage: Fires when you send messages from JavaScript to your native application. The argument to the event handler is a string with the message.
  • turbolinksTitlePress: Fire when title is tapped. The arguments to the event handler is an object with keys: url, path, component.
  • turbolinksActionPress: Fire when a action is tapped. The arguments to the event handler is an object with keys: url, path, component, actionId.
  • turbolinksLeftButtonPress: Fire when left button item is tapped. The arguments to the event handler is an object with keys: url, path, component. (iOS Only)
  • turbolinksRightButtonPress: Fire when right button item is tapped. The arguments to the event handler is an object with keys: url, path, component. (iOS Only)
  • turbolinksVisitCompleted: Fire when the request has been fulfilled successfully and the page fully rendered, Here you can parse html and create a dynamic menu for example. The arguments to the event handler is url, path.

removeEventListener(eventName, handler)

Removes the listener for given event.



  • Url properties
    • url: Url to visit. (Required)
  • Component properties
    • component: Component to visit. (Required)
    • modal: A boolean to show a view without navbar and backbutton. (Default false)
    • dismissable: When true is possible dismiss modal. (Default false)
    • passProps: Passes this in as props to the rendered component.
  • Common properties
    • title: The default value is the title of the Web page.
    • subtitle: A subtitle for visitable view.
    • visibleDropDown: Show a small arrow next to title.
    • hidesNavBar: Hide navigation bar. (Default false)
    • hidesShadow: Indicates whether to hide the navigation 1px hairline shadow. (Default false) (iOS Only)
    • leftButtonText/leftButtonIcon: A left button text/icon. (iOS Only)
    • rightButtonText/rightButtonIcon: A right button text/icon. (iOS Only)
    • actions: A Array of action objects to mount a menu.
    • action: If action is 'advance', so it will perform a animated push, if "replace" will perform a pop without animation. (Default 'advance')


  • userAgent: You can check for this string on the server and use it to send specialized markup or assets to your application.
  • messageHandler: You can register a Message Handler to send messages from JavaScript to your application.
  • loadingView: Set a custom loadingView using a react component.
  • navBarStyle: {titleTextColor, subtitleTextColor, barTintColor, tintColor, menuIcon}.
  • injectedJavaScript: Set this to provide JavaScript that will be injected into the web page when the view loads.


  • id: A integer identifier for the action. (Required)
  • title: A title for the action.
  • icon: A icon for the action.
  • button: A boolean to show action inside menu or in toolbar. (Default false) (Android Only)


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.