Android roadmap / timeframe?

[adamski]

Excited to discover this library, I've been trying out different navigation solutions and this seems like the one for me. I'm just wondering where you guys are at with the Android version. Is there an experimental branch you are working on. Any ideas of approach etc? Open to community involvement / PR's?

[guyca]

@adamski Thanks for showing your interest in react-native-navigation! we're currently working on an Android adaption and are aiming to ship it early next week.
The API will be fairly similar to the current iOS API so migrating your code base should be smooth. We're always open for new ideas and PR's!

[adamski]

Ok great thanks. Looking forward to checking it out.
I've tried NavigatorIOS (too limiting), then discovered Redux and React-Native-Router-Flux (great combo in the simulator but an iPhone 4S feels very laggy), so great to see a library supporting Redux and native controls.

[sandan10]

Is there any updates on the Android-support? Looking forward to it!

[aprct]

+1

Very excited for this.

[bosung90]

+1 any news for Android?

[SergeyKorochansky]

It is the best React Native navigation library, ever! We need Android version too! 👻

[alexeypodolian]

Great navigation library! We do really need Android version :)

[joakimbugge]

+1 We need this.

[andreasbhansen]

This will definitely replace our current navigation library! Android support +1.

[AndrewPetrus]

Great for iOS navigation! Looking forward for Android implementation))

[bosung90]

@guyca Great work and thank you for contributing to the community. You mentioned 2 weeks ago that Android solution is coming soon but haven't heard from you since. I am not trying to rush you guys or anything but would really appreciate if you can update us on any timeline/news. Thank you and keep up the work!

[guyca]

Hey guys. Sorry for the long silence. we're still working on the Android adaptation. I had hoped it would've been ready by now but we've encountered a few issues with the first approach we took, so we had to go back to the drawing board and rethink our Android implementation.

While we are fully committed to this project, we're still mostly working on it in our spare time.
I'll post updates in this thread during the week about time estimation and progress.

[adamski]

Thanks for the update. I'm sure there are people in the community that would be keen to contribute too (myself included). I wonder if its worth making a pre-release branch once you're happy with the direction. It might also be beneficial to open a discussion about the general approach here.

[guyca]

@adamski That'a a great idea. Glad to have you on board with us.

[akaone]

You guys are doing an amazing job, can't wait for the Android version
+1

[guyca]

Hey guys

I pushed the Android implementation branch. You’re welcome to take a look and give feedback.
The approach we took is pretty simple; Instead of exposing native UI components to JS, We’re creating the entire navigation stack natively in good old XML. The reason for that, is since react-native-navigation abstracts navigation creation in the first place, we really don’t gain anything from creating the JS abstraction for the native views (abstracting an abstraction?).

Quick overview
RctActivityModule - This is where activities are handled. Opening specific types of activities or going back in the activity stack (pop). You can take a look at currently implemented methods: startTabBasedApp and navigatorPush.

Each react screen is a ReactRootView, initialized with the same ReactInstanceManager so they all share the same JS context

Where do we stand
Initially we thought of implementing each view and exposing it to JS. It looked really cool but wasn’t practical for our use case. I left out those classes for now, if anyone is interested, and will remove them in the next clean up cycle.

There’s still lots of work to be done.

• Navigation views styling
• Add callbacks to JS for native events such as tab selection, back press, menu button press etc.
• Implement View Controller api similar to iOS which will let us push multiple screens easily into the same tab.
• Test redux example

Once the redux sample project works on Android, and I know for sure the callback mechanism for view interaction won’t require API changes. I think we can merge into master. Hopefully this will happen even before the weekend.

Guy

[sandan10]

Just a question, is the Android_implementation-branch supposed to work for us now?
I downloaded the project and tried running the example-redux (and the example, and trying to implement it in my app) but I got this error when running react-native run-android:

Execution failed for task ':react-native-navigation:bundleLibraryReleaseJsAndAssets'.

Google tells me there is a bunch of people getting the same error (in other scenarios), but I have no idea if it's related to this example-project or just RN / gradle in general.

If you have any insight on this, any help will be appreciated.

[adamski]

Just a heads up, after reading up on the subject of tab bar style in Android vs iOS I discovered that Google have just recently updated their guidelines to support iOS style bottom tab navigation. Seems like there is not an official API yet but a couple of components / examples on Github (see https://groups.google.com/forum/#!topic/android-developers/

[guyca]

@adamski We've been working on a "ScreenStack" ViewGroup implementation. So calling Navigator.push will display your react screen inside a tab (You'll be able to push screens into other tabs as well, not only to the active tab). You'll also be able to display multiple screens inside the same tab. All of this is done in preparation for the newly introduced bottom bar.

We've been conducting some comparisons between our ScreenStack implementation and vanilla RN's Navigator. Navigator seems to have serious memory issues. When you push a new screen, previously pushed screens' memory isn't released. If you push a couple of screens with memory intensive components, you're likely to get OOM exception.
We're trying to address this by detaching the ReactRootViews from screen, while letting the screen keep its internal state (state + props).

@sandan10
The Android_Implementation branch should work for you. Here's what you need to do to get the example-redux working:

1. Clone react-native-navigation, checkout Android_Implementation branch
2. cd example-redux
3. npm install
4. cd node_modules
5. rm -rf react-native-navigation // Delete the module you got from NPM
6. git clone git@github.com:wix/react-native-navigation.git // Just pull our branch into your node_modules
7. cd react-native-navigation
8. git checkout Android_Implementation
9. react-native run-android
10. If build fails, open example-redux in Android Studio and build+run it from there

Let me know if you have any problems

PS
Regular example is currently broken. :)

[andreasbhansen]

@guyca, following your previous instructions for the Android_implementation branch, the output I get when trying to $ react-native run-android inside the example-redux project is:

Command `bundle` unrecognized. Did you mean to run this inside a react-native project?
:react-native-navigation:bundleLibraryReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-navigation:bundleLibraryReleaseJsAndAssets'.
> Process 'command 'react-native'' finished with non-zero exit value 1

Am I doing something completely wrong?

[guyca]

@andreasbhansen @sandan10
You're right, react-native run-android is not working properly ATM.
After react-native run-android fails, open the example-redux project in Android Studio and build+run it from there.

Edit:
Since this branch is still in development, so there are some bugs. A bug that we didn't manage to fix today is that the app starts with a blank white page, you need to refresh it (hit the R button twice) then it will load properly.
Edit 2:
fixed in 760292b

[akaone]

@guyca It will be good to make a list of all not implemented method for android, just so we know those we can use at current time...
Also is there a way we can edit tabar color and fontColor ?

[sandan10]

@guyca
Thanks, running with Android Studio now works (I tried it several commits ago but it didn't work).
Do you have any idea why run-android fails? Or if it's related to this library at all?

[guyca]

@sandan10 I just pushed ae2430a which should fix react-native run-android

It was a mistake on my end, the standard react.gradle script, which is generated when react-native init is called, was executed in navigation's gradle script. This isn't needed and broke the command.

[andreasbhansen]

Marvellous! Works great 😄

[guyca]

@akaone I'll add this functionality soon

[peterlazar1993]

@guyca Any timeline for android release? I understand that the example works but what's preventing Android_implementation from being merged into master.

[guyca]

@peterlazar1993 actually version 2.0.3 2.0.4 already includes android support, though not all features available in iOS have yet been implemented in Android.

Available features:

• Single screen activity
• Tab activity
• Modals
• Styles

Style options:

• statusBarColor
• toolBarColor
• navigationBarColor
• buttonsTint - toolbar buttons tint
• titleColor
• tabSelectedTextColor
• tabNormalTextColor
• tabIndicatorColor

note: Some style features are currently only available for Lollipop and above (status bar color for example). I'll add backwards compatibility for KitKat after we reach feature parity with iOS.

Installation:

• update settings.gradle file located in android folder:

include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')

• Update project dependencies in build.gradle

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"
    debugCompile project(path: ':react-native-navigation', configuration: 'libraryDebug')
    releaseCompile project(path: ':react-native-navigation', configuration: 'libraryRelease')
}

• Have your MainActivity.java extend com.reactnativenavigation.activities.RootActivity. If you need to override getPackages(), make sure you add RnnPackage as well. You can probably safely remove the rest of the logic in your MainActivity.

[gilra2000]

Android react-native run-android error...

3 errors
:react-native-navigation:compileLibraryDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-navigation:compileLibraryDebugJavaWithJavac'.

  Compilation failed; see the compiler error output for details.

[guyca]

@gilra2000 Can you please open a separate issue for this? Thanks.

[gilra2000]

:react-native-navigation:compileLibraryDebugJavaWithJavac
/Users/gilra2000/react-native-navigation-master 3/example-redux/node_modules/react-native-navigation/android/app/src/main/java/com/reactnativenavigation/activities/BaseReactActivity.java:187: error: cannot find symbol
mReactInstanceManager.onResume(this, this);
^
symbol: method onResume(BaseReactActivity,BaseReactActivity)
location: variable mReactInstanceManager of type ReactInstanceManager
/Users/gilra2000/react-native-navigation-master 3/example-redux/node_modules/react-native-navigation/android/app/src/main/java/com/reactnativenavigation/activities/BaseReactActivity.java:196: error: cannot find symbol
mReactInstanceManager.onPause();
^
symbol: method onPause()
location: variable mReactInstanceManager of type ReactInstanceManager
/Users/gilra2000/react-native-navigation-master 3/example-redux/node_modules/react-native-navigation/android/app/src/main/java/com/reactnativenavigation/activities/BaseReactActivity.java:210: error: cannot find symbol
mReactInstanceManager.onDestroy();
^
symbol: method onDestroy()
location: variable mReactInstanceManager of type ReactInstanceManager
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
3 errors
:react-native-navigation:compileLibraryDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

[guyca]

@gilra2000 This should've been fixed in version 1.0.1. What version do you have?

Edit:
Fixed in 1.0.2. The file where this issue was fixed was left out of v1.0.1. Let me know if you encounter any other issues.

[vonovak]

hello :)
just wanted to ask - do you have an estimate of when Android support will be ready to ship?
Can I, with the current version, specify navbar buttons?
thank you