React Native Turbolinks

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

Getting started

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

Warning

• 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 0.0.0.0.

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.

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:

• 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.

Objects

Route

• 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')

AppOption

• 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.

Action

• 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)

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

• Third party library to provide native dialogs. Using MZFormSheetPresentationController and Dialogs.

Resources

• RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson
• Basecamp 3 for iOS: Hybrid Architecture
• The Majestic Monolith