Comments (33)
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
from react-native-navigation.
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.
from react-native-navigation.
Is there any updates on the Android-support? Looking forward to it!
from react-native-navigation.
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.
from react-native-navigation.
Marvellous! Works great 😄
from react-native-navigation.
@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 tinttitleColor
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 inandroid
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
extendcom.reactnativenavigation.activities.RootActivity
. If you need to overridegetPackages()
, make sure you addRnnPackage
as well. You can probably safely remove the rest of the logic in your MainActivity.
from react-native-navigation.
@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!
from react-native-navigation.
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.
from react-native-navigation.
@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:
- Clone
react-native-navigation
, checkoutAndroid_Implementation
branch cd example-redux
npm install
cd node_modules
rm -rf react-native-navigation
// Delete the module you got from NPMgit clone [email protected]:wix/react-native-navigation.git
// Just pull our branch into yournode_modules
cd react-native-navigation
git checkout Android_Implementation
react-native run-android
- 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. :)
from react-native-navigation.
@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.
from react-native-navigation.
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/
from react-native-navigation.
@akaone I'll add this functionality soon
from react-native-navigation.
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.
from react-native-navigation.
+1
Very excited for this.
from react-native-navigation.
+1 any news for Android?
from react-native-navigation.
It is the best React Native navigation library, ever! We need Android version too! 👻
from react-native-navigation.
Great navigation library! We do really need Android version :)
from react-native-navigation.
+1 We need this.
from react-native-navigation.
This will definitely replace our current navigation library! Android support +1.
from react-native-navigation.
Great for iOS navigation! Looking forward for Android implementation))
from react-native-navigation.
@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!
from react-native-navigation.
@adamski That'a a great idea. Glad to have you on board with us.
from react-native-navigation.
You guys are doing an amazing job, can't wait for the Android version
+1
from react-native-navigation.
@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?
from react-native-navigation.
@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
from react-native-navigation.
@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 ?
from react-native-navigation.
@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?
from react-native-navigation.
@guyca Any timeline for android release? I understand that the example works but what's preventing Android_implementation from being merged into master.
from react-native-navigation.
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.
from react-native-navigation.
@gilra2000 Can you please open a separate issue for this? Thanks.
from react-native-navigation.
: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.
from react-native-navigation.
@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.
from react-native-navigation.
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
from react-native-navigation.
Related Issues (20)
- RN 0.74 New Architecture Support HOT 7
- App crashes with more than 5 tabs
- Incorrect rendering order of initial tab
- Xcode 15 RN 0.59 error: UIViewController is missing its initial trait collection populated during initialization HOT 3
- Title and subtitle test ID's
- ReactTextShadowNode.UNSET is not available on RN 0.74.1 HOT 13
- Getting Execution failed for task ':react-native-navigation:compileReactNative71DebugJavaWithJavac HOT 4
- 底部导航栏频繁修改iconColor反应慢
- We need Some attention to the Keyboard UI problem
- Bottom Tab should render customizable component (not just icon properties) HOT 1
- Align Navigation.getLaunchArgs() for Android and iOS
- Overflowed part of the right topBarButton is not visible
- Upgrade from 0.64.1 to 0.74.1. Do you have a good guide with all necessary steps? HOT 17
- min SDK version
- "No package name found" HOT 1
- I want to add gif in bottom tabs HOT 1
- Getting Execution failed for task ':react-native-navigation:compileReactNative71DebugJavaWithJavac'. HOT 2
- bottomTabs.currentTabId is not triggered on IOS
- React Native 0.75.x HOT 1
- Diference in behavior from android vs iOS for the `RNN.ComponentWillAppear` event
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-navigation.