lazaronixon / react-native-turbolinks

React Native adapter for building hybrid apps with Turbolinks 5

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

react-native-turbolinks's Issues

Native authentication

Is possible to do native authentication with this library the same way Turbolinks IOS describes it in their documentation?

https://github.com/turbolinks/turbolinks-ios/blob/master/Docs/Authentication.md#basecamp-3

We handle that response by making a special request in a hidden WKWebView to an endpoint on our server using our OAuth token which sets the appropriate cookies for the web view.

Is that possible?

Toggling from single screen to tab based app

Your library its awesome!

Just wondering if its possible or what do you recommend. We we trying to make a demo APP that when user is not logged it start with a startSingleScreenApp that display a carousel with info about the app and the login and sign up buttons. So far this part was easy, but when we detect the user login and try to replace the component with a startTabBasedApp the APP It just push the screen and render the same startSingleScreenApp with our welcomeComponent.

When we detect the login the action we run is Turbolinks.replaceWith({component: 'TabBasedViews'})

Do you have any suggestions of how to accomplish this?

Thanks!

Set right button icon and event

If we want to use something other than an actions menu there doesn't seem to be a way to replace the right button on the nav bar.

Support for TypeScript?

Hi, sorry if this isn't the place to ask...but is there planned support for TypeScript types file?

Add ability to get the current route or current path of Turbolinks instance

Looking for a method to get the current path /current/path or url https://app.com/current/path of current Turbolinks instance.

This would be useful in determining what to do in a lot of cases, including, when a modal is open in front of the Turbolinks view.

Turbolinks.getCurrentPath() or Turbolinks.getCurrentUrl()

Feature Request: Position Network Activity Indicator

Being able to position the activity indicator would complement automaticallyAdjustContentInsets and contentInset.

The layout I'm tinkering with has a sticky footer with hidden navbar.

Turbolinks.startSingleScreenApp({ url: baseUrl, navBarHidden: true }, {automaticallyAdjustContentInsets: false, contentInset: { top: 0, left: 0, bottom: -17, right: 0 }})

The progress indicator is hugging the top of the screen, would be nice to be able to adjust it.

Is there a workaround? can I just edit the RTTurbolinksManager.swift?

Great project, thank you.

Turbolinks Android Deprecated

Thanks a lot for the amazing project

I am just starting to learn ReactNative.
I just noticed this DEPRECATION warning and I wanted to have your ideas

https://github.com/turbolinks/turbolinks-android/wiki/Turbolinks-Android-Adapter-1.x-Deprecation

thanks a lot
Fabrizio

How to keep the tabs while navigating

After I cilck a link on a page the tab navigation disappears. How to I make the tab navigation permanent?

Crash on reload in iOS simulator

Thanks for the wonderful library. I have a small issue when using it.

I generated a new app using react-native CLI and added your library using instruction in the readme. After this, if I won't start turbolinks app in js and just will reload app in the simulator it will crash.

Here's my App.js file (just default RN code):

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

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

This is how error looks like in Xcode:

Log from Xcode:

2018-05-07 15:59:15.524 [info][tid:main][RCTCxxBridge.mm:210] Initializing <RCTCxxBridge: 0x6080001c4830> (parent: <RCTBridge: 0x6040000d3a90>, executor: (null))
2018-05-07 15:59:15.526068+0300 testapp[26340:1719060] Initializing <RCTCxxBridge: 0x6080001c4830> (parent: <RCTBridge: 0x6040000d3a90>, executor: (null))
2018-05-07 15:59:15.567 [warn][tid:main][RCTBridge.m:119] Class RCTCxxModule was not exported. Did you forget to use RCT_EXPORT_MODULE()?
2018-05-07 15:59:15.566754+0300 testapp[26340:1719060] Class RCTCxxModule was not exported. Did you forget to use RCT_EXPORT_MODULE()?
2018-05-07 15:59:15.578 [warn][tid:main][RCTModuleData.mm:67] Module RCTImageLoader requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
2018-05-07 15:59:15.578128+0300 testapp[26340:1719060] Module RCTImageLoader requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
2018-05-07 15:59:15.589 [info][tid:main][RCTRootView.m:293] Running application testapp ({
    initialProps =     {
    };
    rootTag = 1;
})
2018-05-07 15:59:15.667748+0300 testapp[26340:1719060] Running application testapp ({
    initialProps =     {
    };
    rootTag = 1;
})
2018-05-07 15:59:15.779335+0300 testapp[26340:1719864] [] nw_connection_get_connected_socket 4 Connection has no connected handler
2018-05-07 15:59:16.940 [info][tid:com.facebook.react.JavaScript] Running application "testapp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
2018-05-07 15:59:16.940292+0300 testapp[26340:1719854] Running application "testapp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
2018-05-07 15:59:16.953601+0300 testapp[26340:1719829] [] nw_connection_get_connected_socket 5 Connection has no connected handler
2018-05-07 15:59:17.787708+0300 testapp[26340:1719830] [] nw_connection_get_connected_socket 6 Connection has no connected handler
2018-05-07 15:59:18.541 [info][tid:main][RCTCxxBridge.mm:917] Invalidating <RCTCxxBridge: 0x6080001c4830> (parent: <RCTBridge: 0x6040000d3a90>, executor: (null))
2018-05-07 15:59:18.541290+0300 testapp[26340:1719060] Invalidating <RCTCxxBridge: 0x6080001c4830> (parent: <RCTBridge: 0x6040000d3a90>, executor: (null))
2018-05-07 15:59:18.541 [info][tid:main][RCTCxxBridge.mm:210] Initializing <RCTCxxBridge: 0x6080001c5460> (parent: <RCTBridge: 0x6040000d3a90>, executor: (null))
2018-05-07 15:59:18.541502+0300 testapp[26340:1719060] Initializing <RCTCxxBridge: 0x6080001c5460> (parent: <RCTBridge: 0x6040000d3a90>, executor: (null))
2018-05-07 15:59:18.542 [warn][tid:main][RCTModuleData.mm:67] Module RCTImageLoader requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
2018-05-07 15:59:18.542007+0300 testapp[26340:1719060] Module RCTImageLoader requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
(lldb)

The same problems appears when I reloading from any plain RN component. If turbolinks is initialized then it reloads everything fine.

Do you know what causing this problem? How I can fix it?

P.S. I use CMD + R for reloading in simulator.

Brainstorming how to make a tablet interface

Basecamp uses a two column layout. What they are doing is they are showing a native "view" on the left, and the Turbolinks holder on the right.

If we could figure out a way to have a secondary view on the screen, it could work similar to the tab example in the wiki with a webview instance.

Of course, the correct answer might be "do a sidebar in your HTML" which is how Youtube works.

HTTP 401 not captured on android

On iOS my authentication view is triggered normally just like in the example. However, on Android, the 401 unauthorised page is shown on the Turbolinks view without being captured by the error handler.

The handleError function is copied directly from the example app and hasn't been changed yet

[Android] Image gallery does not open on File Chooser click

Hello, first of all thank you very much for this project. We are looking at using it for a production app we own, where we have turbolinks-ios and turbolinks-android adapters already in place, but would like to have a common codebase, and react-native combined with turbolinks is the perfect solution!

At the moment, the image gallery does not open in Android when you click on an input type="file". It works out of the box for iOS.

We already had this issue in our native turbolinks-android adapter, and this is the code we had to add in our onCreate activity:

// Code to open library
webView.setWebChromeClient(new WebChromeClient() {
    //For Android 4.1+
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
        mUploadingFile = true;
        mUploadMessage = uploadMsg;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("image/*");
        startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);
    }

    //For Android 5.0+
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        mUploadingFile = true;
        if (uploadMessage != null) {
            uploadMessage.onReceiveValue(null);
            uploadMessage = null;
        }
        uploadMessage = filePathCallback;

        Intent intent = null;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            intent = fileChooserParams.createIntent();
        }
        try {
            startActivityForResult(intent, REQUEST_SELECT_FILE);
        } catch (ActivityNotFoundException e) {
            uploadMessage = null;
            Toast.makeText(getApplicationContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG)
                    .show();
            return false;
        }
        return true;
    }
});

I hope this code can help you implement this functionality for Android!

Can iOS contentInsetAdjustmentBehavior be changed?

Hi, thanks for this great project!

Can the iOS WebView contentInsetAdjustmentBehavior be changed from react native code in order to remove the safe area of the webview (if we want the webview to take all the screen size in iPhone X)?

[ios] problem building on iPhone

@lazaronixon Does anything need to be done for building project on a phone?
anyone else encountered this?

thanks!

crashing silently react 0.59.0 xcode 10.2.1

Hello,

None of the below commands fail but the ios simulator crashes before it loads the rails project http://127.0.0.1:3000. There is no error output.

 react-native init AwesomeProject --version 0.59.0
 cd AwesomeProject
 copy the App.js and adjust it to point to rails app http://127.0.0.1:3000
 npm install react-native-turbolinks --save
 react-native link
 react-native run-ios

Can I have the exact commands to start a new project? with required react native, xcode android studio versions?

This project would be wonderful, if I could get it working :D thank you.

After page refresh in app that breaks event listeners

In normal browser with full refresh, everything works as expected. But in app when i refresh page that breaks event listeners. My event listeners are under turbolinks:load listener. what is difference beetwen browser refreshes and app page refreshes?

Edit: for more details that affect only modals, sidenavbar other event listeners works as usual. I use materialize css modals and sidenavbar

WkWebView no longer shares cookies with fetch

This used to work but now my fetch requests don't share the cookie that is set when the user logs into the webview.
May be related: react-native-webview/react-native-webview#68

Are we able to fall back to UIWebview so the cookies still work?

Update navBarStyle to include borderBottomWidth & borderBottomColor

Please allow for the borderBottomWidth & the borderBottomColor to be set in the navBarStyle property, including renderNavBarStyle(navBarStyle)

visitTabBar problem

hi, how am I suppose to provide icon Image?

this doesn't seem to work

Turbolinks.visitTabBar([
      {  
        tabTitle: 'Home',
        tabIcon: require('./home.png'),
        title: 'Title',
        url: 'https://somelink.com'
      },
])

I also tried to add image in xcode and access it through assets/home

thanks?

React Native 0.60

Did you plan a pod version for the new React Native 0.60 ?

Unable to run Example app on iOS

Is this a bug report?

Yes

Environment

react-native: 0.55.2
iOS 11.3 on simulator

Steps to Reproduce

Follow the steps for running the demo
One additional step to run npm install inside the Example folder
demo-server is running and I can visit it on http://localhost:9292
I have changed the constants.js file to http://localhost:9292
react-native run-ios

Expected Behavior

Should see demo app running

Actual Behavior

Error Json value
Type NSMutableDictionary cannot be converted to NSArray

Reproducible Demo

The Example folder in the repo

Separators in action menu

It would be great to be able to add separators to the action menu

Can no longer get evaluated JS

I am trying to upgrade my app to the latest RNTurbolinks but it seems to be missing a function my app relies on:
const script = 'document.documentElement.outerHTML';
Turbolinks.evaluateJavaScript(script).then((source) => {
const $ = cheerio.load(source);
//Extract stuff from the source using cheerio
});

I can see there is now an 'injectJavaScript' function but that doesn't seem to return a promise or anything else. Is there any chance of adding this back in?
Or how should I be getting the HTML of the page to be able to parse it?

turbolinksRightButtonPress event doesn't work

I've got the event setup like this in the example app:

App.js

  componentDidMount() {
    Turbolinks.addEventListener(
      'turbolinksRightButtonPress',
      this.rightButtonPress,
    );

    Turbolinks.startSingleScreenApp(
      {url: baseUrl, rightButtonText: 'righty'},
      {messageHandler: 'turbolinksDemo'},
    );
  }

  rightButtonPress = () => {
    alert('why you no work??');
  };

=

When pressing the right nav bar link, nothing happens. However if I update the event to this:

    Turbolinks.addEventListener(
      'turbolinksLeftButtonPress',
      this.rightButtonPress,
    );

It works fine

popToRoot() without animation? && reloadVisitable()

It would be great to be able to use Turbolinks.popToRoot(animated: false),
In my case, I use popToRoot to go to the root page then visit(/logout) and I have kind of blinkering because of the animated: true.

In the iOS app, if I use Turbolinks.reloadVisitable(); the app will crash any idea how to solve this?

Thanks

Rendering components in tab bars

Looking at the Wiki here

https://github.com/lazaronixon/react-native-turbolinks/wiki/Simple-TabBar

It has something like this

 Turbolinks.startTabBasedApp([
                              {tabTitle: 'App', title: 'Home', url: baseUrl}, 
                              {tabTitle: 'One', url: baseUrl + '/one'}, 
                              {tabTitle: 'Two', title: 'Numbers', component: 'NumbersView'}
                            ])

Is the NumberView component loaded automatically? Or do we need to import it?

I've tried it both ways and it seems to crash the simulator

Below is my code

import React, { Component } from 'react'
import Turbolinks from 'react-native-turbolinks'
import Scan from './Scan'
export default class Home extends Component {

  componentDidMount() {
    Turbolinks.addEventListener('turbolinksVisit', this.handleVisit)
    Turbolinks.addEventListener('turbolinksError', this.handleError)
    Turbolinks.startTabBasedApp([
                                 { tabTitle: 'PS', url: 'http://192.168.1.8:5000/ps' },
                                 { tabTitle: 'PC', url: 'http://192.168.1.8:5000/pc' },
                                 { tabTitle: 'PR', url: 'http://192.168.1.8:5000/pr' },
                                 { tabTitle: 'Two', component: 'Scan' }
                                ])
  }

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

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

  render() {
    return null
  }
}

It works fine if i just add the objects that contain url but crashes when I add the object with component

Thanks in advance!

Turbolinks.visitTabBar causes issues with the app

I'm having issues getting a tab bar to work, I have the example app running using the example server. Inside the componentDidMount function in App.js I've added this line

Turbolinks.visitTabBar([{tabTitle: 'Home', url: Constants.baseUrl}])

When I launch the app on IOS it only partially functions, here's a gif showing the issue.

I don't see any errors or warnings in the console when I have that running either.

Custom Navigation

It is great we can set an actions menu, however, we also need to set the icon for the App.
Our app also needs to use an image for the Title of the navigation bar and would benefit from a more complex menu component.
Is there a way to use our own toolbar rather than the one generated?
Or a way to get access to the properties of the Turbolinks navigation bar?

Webview scrolls when content does not exceed viewport

Hi, so I've noticed on all my screens the that the webview is scrollable. This caused an issue when using a floating action button with materializecss.css as it's hidden until you scroll to it.

Is there something special I need to do to prevent the scrolling or only scroll when content is long enough?

In the first screenshot, I'm able to scroll down further

In the second screenshot, the starting position which is unscrolled shows that it's already scrolled down. I believe this is the issue that I have as the floating action button positions itself with a fixed position bottom right of screen-based e.g

.fixed-action-btn {
    position: fixed;
    right: 23px;
    bottom: 23px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 997;
}

[Android] Swiping between tabs does not update active tab

As the title explains, in Android we can swipe between tabs, but only the view swipes, not the active tab in the tab bar.

Tapping on a tab works (updates active tab and displays corresponding view).

Edit: link to test application

Custom loading view not showing on iOS reloadSession()

The loading view works great everywhere except on iOS when calling reloadSession() where it just shows a blank screen.
Without using the loadingView the spinner is shown correctly

[Android] TabBar title and actions are not taken into account

Hi @lazaronixon, thanks again for the great work on TabBar!

I have this issue only on Android with the following setting in componentDidMount():

Turbolinks.setTabBar({
  routes: [
    {
      tabTitle: 'Home',
      title: 'RNT Showcase',
      url: env.BASE_URL,
      actions: [{ id: 404, title: '404 error' }]
    },
    {
      tabTitle: 'Posts',
      title: 'View all posts',
      url: `${env.BASE_URL}/posts`,
      actions: [{ id: 11, title: 'New post' }]
    }
  ]
});

The title and actions on all Tabs are the ones of the first route only, they do not change when navigating to other tabs.

It works as expected on iOS.

I brought up a repo for my experiments ;-) available here: RNT Showcase

[Android] navIcon clickable?

Hey @lazaronixon,

I'm trying to find a solution for my app to add search icon in the navigation,
it works on IOS with leftButtonIcon and
Turbolinks.addEventListener("turbolinksLeftButtonPress",this.handleLeftButtonPress);

So my solution to use navIcon on android and implement 'handleNavIconPress' in java

I followed handleTitlePress code and I did the same but I have one issue to identify navIcon on click,
so it works but the whole title area and navIcon clickable,

What should i do in this case?

Here is the code:

protected void handleNavIconPress(final String component, final String url, final String path) { toolBar.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { WritableMap params = Arguments.createMap(); params.putString("component", component); params.putString("url", url); params.putString("path", path); getEventEmitter().emit(TURBOLINKS_NAVICON_PRESS, params); } }); }

Thank you!

Turbolinks modal closes when using file upload element

When launching a component with a visit the modal is dismissed when trying to upload a file using a form file element.

Turbolinks.visit({ component: 'ModuleView', modal: false});
Works well on Android but the component is dismissed when camera or photo gallery is loaded.

RN navigation drawer + RN Turbolinks

Can they work together? Quite new on this and can't find a way to make it happen if possible.

Thanks

Any production apps using this?

First let me say this library is awesome.

Just wondering if there are any production apps you know that use this. Or if you yourself have deployed any.

Thanks

Flicker on update and when using data-turbolinks-permanent

Found a big bug that would be great to fix.

Whenever I update any record there is a flicker and also when using data-turbolinks-permanent there is a flicker.

This does not happen when using the app directly in safari ios or when using any other browser I've tried.

Is it using WKWebView? or would know the reason for the flicker?

Dynamic android styles

One of the requirements for our project is to be able to style the navigation via a remote api.
This works great for iOS as we can set the colours in navBarStlye.
On Android we cant do this because colours are set from styles.xml.
Is there any workaround for being able to style the android navigation dynamically?

Ability to render one action as a button

See the "edit" button.

I already do something similar to this with the react-native-navbar in the modal example.

This is less of a priority to me personally.

Tabbed Navigator

I'm trying to migrate an existing NativeApp + Turborbolinks to ReactNativeApp + Turborbolinks
It is a tabbed based app so...
First I tried to use:
https://github.com/lazaronixon/react-native-turbolinks/wiki/Simple-TabBar-(V1)
but it looks deprecated in the current version.

After I tried https://github.com/lazaronixon/react-native-turbolinks/wiki/Simple-TabBar-(V2)
but the example is not clear because there is no reference to any url.
I tried this solution:

Here my code

const HomeStack = createStackNavigator({Home: HomeScreen})


const TabNavigator = createBottomTabNavigator({
	Home: {
	   	  screen: HomeStack,
	   	  navigationOptions: {
	   	          tabBarIcon: ({ focused, horizontal, tintColor }) => (
	   	           <Image name="home" size={30} source={ focused ? require('./assets/tabIcons/homeActive/home.png') : require('./assets/tabIcons/homeNoActive/home.png') } />
	   	         )
	   	}
	  },
  Search: {
  	   screen: Search,
	    navigationOptions: {
			tabBarIcon: ({ focused, horizontal, tintColor }) => (
	          <Image name="home" size={30} source={ focused ? require('./assets/tabIcons/searchActive/search.png') : require('./assets/tabIcons/searchNoActive/search.png')} />
			)
	} 
   },
  Profile: { 
	  screen: HomeScreen,
      navigationOptions: {
          tabBarIcon: ({ focused, horizontal, tintColor }) => (
           <Image name="home" size={30} source={focused ? require('./assets/tabIcons/userActive/user.png') : require('./assets/tabIcons/userNoActive/user.png')} />
         )
   } 
  }
});

const TabBarNavigator = createAppContainer(TabNavigator)
const url = 'http://192.168.1.54:3000'

export default class App extends React.Component {
  
    componentDidMount() {
    Turbolinks.startSingleScreenApp({component:  'TabBarNavigator'})
		
    }
 

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

  handleError = (data) => {
    alert(data.description)
  }
  render() {
	  return null;
  }
}


const url = 'http://192.168.1.54:3000'
export default class HomeScreen extends React.Component {
    componentDidMount() {
	}
  render() {
      return (
          <WebView ref={webview => { this.webview = webview }}
                   source={{uri: url}}
                   onLoadStart={this.handleAuthentication}/>
      )
  }
}
AppRegistry.registerComponent('TabBarNavigator', () => TabBarNavigator)

It works but there is no turbolinks navigation(I mean no native navigation), when I click on any links.
Thanks in advance

[iOS] Incompatible with Xcode 9.3

First of all - thanks for this wonderful library.

I updated Xcode to 9.3 recently (around 20 March). And can't compile app anymore. I receive this error:

Module compiled with Swift 4.0.3 cannot be imported in Swift 4.1: /Users/kirillplatonov/Code/react-native-turbolinks/ios/Turbolinks.framework/Modules/Turbolinks.swiftmodule/x86_64.swiftmodule

Do you know how to fix it? Looks like it's turbolinks-ios problem. Maybe there is a simple way to recompile turbolinks framework with latest swift version?

Error when using iOS simulator

Thanks so much for this project!

I was following the README instructions and when I build for the iOS simulator, I get the following error:

Is there any additional steps needed to make this work?

Note: The base react-native example app will run, it's when I bring in this package i get the error above.

Toggling Navigation Bar's visibility

I would like to display the navigation bar in some pages and others not, is it possible?

After upgrade of xCode get the following error

/node_modules/react-native-turbolinks/ios/TurbolinksUtils/TurbolinksSession.swift:2:8: Module compiled with Swift 4.1 cannot be imported by the Swift 4.2 compiler: /node_modules/react-native-turbolinks/ios/Turbolinks.framework/Modules/Turbolinks.swiftmodule/x86_64.swiftmodule

Swift is set as 4 in the parent project settings no 4.2
I have upgraded react-native-turbolinks

setNavigationBarHidden crashes app

@lazaronixon Hi, I just started a new project and everything works fine until I add Turbolinks.setNavigationBarHidden(true). then the app won't start at all.

componentDidMount() {
    Turbolinks.setNavigationBarHidden(true)
    Turbolinks.addEventListener('turbolinksVisit', this.handleVisit)
    Turbolinks.addEventListener('turbolinksError', this.handleError)
    Turbolinks.visit({url: url}, true)
  }

Fatal error: Unexpectedly found nil while unwrapping an Optional value

is there anyone else who encountered this ? :)

thanks!

Use with other navigation components?

Is it possible to use this library with other react navigation libraries? My use case is building an app with a native tabbed navigation bar at the bottom of the screen, something like this..

https://snack.expo.io/@react-navigation/basic-tabs

Only each tab would be a Turbolinks view. In this example, one to /home and the other to /settings.

I've tried dropping in a few different navigation components but nothing seems to play nicely with react-native-turbolinks yet.

Still have issue with file uploads on IOS

#27 was closed by mistake
We need to check that the camera window isn't open before closing with this event:

override func dismiss(animated flag: Bool, completion: (() -> Void)? = nil){ if(self.presentedViewController != nil) { super.dismiss(animated: flag, completion: completion) } }
This will fix the issue with file uploads on iOS turbolink modals

Deep linking, Universal links, App links?

Hello, are deep linking, Apple Universal links and Android App links working at the moment?

[Android] Silent error when selecting a file after file manager closes

On input type="file", clicking on "Choose a file" opens the file manager, but when the file manager closes (either by selecting a file or by going back), no file is selected, and clicking on "Choose a file" does not work anymore.

You can test it in my showcase repo.

Edit: and here is the compiled test application

Show In app notification

Hello,
we are trying to show a in app push-notification. There is some way to display a component like the this notification? I tried to use visit modal but it takes the entire screen by default, and it is not possibile to change the size