v3 alpha [05/08 alpha.11 published] #5228
Comments
|
@guyca would be nice have topTabs working in this v3. By the way, great work you doing here! |
|
@mayconmesquita I stopped using Native Base for that same reason... Now I'm relying on react-navigation for tabs, and mixing the two isn't a good practice I think... and the performance is just a piece of junk... |
|
And how about add feature not to hide topBar like hideOnScroll option but just change opacity on scrolling down from 0 (transparent) to 100%? |
|
TopTabs - I'm terribly sorry for our lack of support for this component. We're just not getting to it. If anyone would like to take ownership of it please contact me. @Crisis2010 I doubt that will be implemented, sounds like a specific use case which you can implement without performance impact on your own. |
|
I would love to fix the issue with Keyboard flickering when pushing screen with an input that has auto-focus. #2622 is there something that comes to mind what the issue can be? I will try to fix it tonight. |
|
@pontusab Strange, I see we use |
|
@guyca Interesting! We have the same issue with 3 different apps and then the folks in the GitHub issue. Do you use waitForRender? and/or something else? In your app, is the keyboard visible directly on navigate? I will do a small repo with an example |
|
@pontusab We don't use waitForRender. |
|
@guyca The TopTabs is android-only or iOS too? I can take the ownership to help the Android support. |
|
@mayconmesquita Thanks for taking ownership. i already did some research on |
|
@syedabuthahirm thanks for the research! It will be useful to start! |
|
hopefully it fixes this issue #5167 |
|
@mayconmesquita TopTabs are implemented on both platforms. Contact me on Discord and I'd be happy to assist as much as I can 👍 |
|
@guyca Please add system default navigation transition when pushing screen on Android. Currently, It has the bottom to top transition. |
|
Feel a d*ck for hijacking this issue a bit, but any chance this will be looked at? It only happens when using a SideMenu. Literally zero reaction. A "we don't know either", or a small push to a possible solution would already be a great help. This is basically holding us from using native navigation in production. |
|
@guyca considering there's a focus on full-screen apps in the new version, is there any chance you could consider the following request which you've looked at before: Our app is mostly fullscreen but requires setting mergeoptions on every screen (componentdidappear) to ensure when an overlay displays that it doesn't override the statusbar styling. I haven't figured out another way around it. |
|
@pribeh I don't think this will be part of the fullscreen effort, but we already discussed this internally and will try to find a solution this quarter. |
|
Anyone using RN 0.60 - I'd appreciate if you could upgrade to |
|
@guyca i'am trying to use RN 0.60 but i'm getting error could you please check out this issue react-native-community/cli#467 |
I'm trying to make it work but I can't find any documentation similar to RNN V2 :( maybe you can provide the step by step. It would be a big help to us. |
|
@guyca |
|
@theweavrs That snapshot tag is incorrect. Use |
|
@guyca i managed to run with RN 0.60.0 but i have a problem with layout. My modals go to under of status bar when i'm open them. I'm using custom topbar here is my default settings. |
|
@frankenthumbs Please reproduce in the playground app |
|
Who is frankenthumbs? |
|
@sijad Thanks for that, didn't know this existed, tried rnn template which didn't work but the rnn-typescript did. To fix my manual install I worked out that if I added the |
Have you tried react native tab view for this? |
|
@sijad we already have reactNative60 for missing dimensions but still have that error.
|
|
@cmejet Try this #5228 (comment) i was having the same issue and i could came up with that fix and it worked (i know its not the optimal solution), it was reported but seems there's no fix for the moment. |
|
@raemarcsg30 Thanks for reporting, will be fixed soon. |
|
Happy to help. |
|
In building the app for android ( |
|
i have the same problem. yesterday it was working fine. after deleting node_modules and re-installing i started to have the same error. after spending so many hours i realized react-native-navigation library is missing reactNative60 folder under lib/android/app/src so i reactNative60 folder was in place. RN version 0.60.4 |
# Changes * Support RN 0.60 * Migrate to AndroidX * Improve draw behind StatusBar (Preparation for #4258) * Don't push BottomTabs when keyboard is displayed (Fixes #4005, #3424) - It won't be needed to toggle the BottomTabs when Keyboard is visible * BottomTab badge and dot indicator are not animated by default on Android (parity with iOS) # Updating from v2 v3 is currently in alpha. To update simply npm install `3.0.0-alpha.11` - `npm install --save react-native-navigation@3.0.0-alpha.11`. Breaking changes are outlined below. ## Layout system changes on **Android** * Parent layouts (BottomsTabs, Stack, SideMenu) are always laid out behind the StatusBar. * Components (`component` and `externalComponent`) are measured and offset according to the StatusBar. In this release, We're changing the layout system in order to provide better support for immersive and full screen apps. In this release we've improved support for drawing behind the StatusBar, next we'll address drawing behind the NavigationBar. Use the `drawBehind` and `translucent` options to control the StatusBar ```js statusBar: { drawBehind: true, // will draw a screen behind the StatusBar translucent: true // Usually you'll want to have drawBehind: true when this is true } ``` While this isn't a breaking API change - there are a few breaking side effects. ### How will my app be effected 1. When the keyboard is opened, BottomTabs will now be drawn behind the keyboard and won't shift upwards. This is in parity with the current behaviour in iOS. For the most part, this isn't a breaking change. Toggling BottomTabs when TextInput's focus changes won't be needed anymore. 2. While parent controllers are drawn behind the StatusBar, their background isn't. This means that when transitioning from a destinations drawn under the StatusBar to a destination drawn behind it, the application's default background color will be visible behind the StatusBar. If you application's theme is dark, you might want to change the `windowBackground` property to mitigate this: Add the following to your application's `style.xml` ```xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@color/backgroundColor</item> </style> <!--This is your application's default background color. It will be visible when the app is first opened (while the splash layout is visible) and when transitioning between a destination a screen drawn under the StatusBar to a destination drawn behind it--> <item name="backgroundColor" type="color">#f00</item> </resources> ``` ## AndroidX migration We've migrated RNN to AndroidX, please follow migration instructions in the react-native repo. ## Removed SyncUiImplementation [SyncUiImplementation](https://github.com/wix/react-native-navigation/blob/master/lib/android/app/src/reactNative57WixFork/java/com/reactnativenavigation/react/SyncUiImplementation.java) was used to overcome a bug in RN's UiImplementation. This workaround was added to RN's `UiImplementation` in RN 0.60 (thanks @SudoPlz) and can be removed from RNN. If you're using `SyncUiImplementation` your app will fail to compile after upgrading to v3. Simply remove the following code from your `MainApplication.java` ```diff - import com.facebook.react.uimanager.UIImplementationProvider; - import com.reactnativenavigation.react.SyncUiImplementation; - @OverRide - protected UIImplementationProvider getUIImplementationProvider() { - return new SyncUiImplementation.Provider(); - } ``` ## BottomTab badge and dot indicator are not animated by default on Android (parity with iOS) Showing and hiding badge and dot indicator are now not animated by default. Badge animation is now controlled with the `bottomTab.animateBadge` property and dot indicator with `bottomTab.dotIndicator.animate` property. #### The following option will show a badge with animation ```js bottomTab: { badge: 'new, animateBadge: true } ``` #### The following option will show a dot indicator with animation ```js bottomTab: { dotIndicator: { visible: true, animate: true } } ``` closes #5228
+1 FAB renders on the top of screen under topBar |
ghost
mentioned this issue
|
HI @guyca , I am also using "react-native-navigation": "^3.0.0-alpha.11" version, when I open drawer (sideMenu) with swipe gesture, my statusbar turns black, i don't know why this is happening! before swipe it have a custom color but after that statusbar is black. Please help. |
|
@EhtishamAli786 this is because you can apply custome options for your drawer, please add statusbar color in your sidemenu options too. it's working fine for me |
|
Hi @sijad, thanks for reply, can you share a working snippet with me. it will be a great help |
|
this is my sidemenu static options: Drawer.options = () => ({
statusBar: {
drawBehind: true,
backgroundColor: 'rgba(0,0,0,0.3)',
},
});and this is my map screen options: Offers.options = (): Options => ({
statusBar: {
style: 'light',
drawBehind: true,
backgroundColor: 'rgba(0,0,0,0.3)',
},
topBar: {
visible: false,
},
});I also have this in my default options: // ...
statusBar: {
style: 'dark',
backgroundColor: '#fff',
},
// ...note my RNN version is demo:
|
|
Finally its working, thanks, Really appreciate your help. |
|
Did anyone experience this crash? ? Here's my |
|
It works on android but gives me this error on ios : Remote branch 3.0.0-alpha.11 not found in upstream origin. |
Worked for me by installing the current master branch version instead of the "3.0.0-alpha.11" : |
Thank you @kgaspar i will try that |
|
@guyca Is there any updates on TopTabs? I'm using
Currently i'm having bottom tabs for the IOS version and trying to add top tabs for Android version. I added the top tabs but the top tab bar is not displayed. But can navigate to the screens by swiping the screen to left and right. |
|
I am in the process of updating to RN 0.61.4 from a pre 0.60.0 version where linking changed. I am getting the error; as is seen in issue #4861 I deleted my |
I, too am seeing this after upgrading. Have cleaned |
|
@GioLogist did you find a solution? |
|
@smooJitter Apologies for not following up. I did, indeed find a solution. If i'm not mistaken, the error came from the steps i took to upgrade from v2 to v3 of RNN. Unfortunately, I have one giant commit for the most part where I did the upgrade, so i can't retrace my steps for that exact issue. Here's what I remember doing though.
If i'm not mistaken, there was some crossover / junk left behind from a combination of an older version installed, attempt to upgrade and RN0.60.0 now having auto-link. I wish I had a more direct answer for you. Happy to help brainstorm further if you want to reach out. Aside from that, definitely be sure to leave the solution behind once you find it! Seems like this is pretty common and I failed in dropping the solution myself 😞 |
# Changes * Support RN 0.60 * Migrate to AndroidX * Improve draw behind StatusBar (Preparation for wix#4258) * Don't push BottomTabs when keyboard is displayed (Fixes wix#4005, wix#3424) - It won't be needed to toggle the BottomTabs when Keyboard is visible * BottomTab badge and dot indicator are not animated by default on Android (parity with iOS) # Updating from v2 v3 is currently in alpha. To update simply npm install `3.0.0-alpha.11` - `npm install --save react-native-navigation@3.0.0-alpha.11`. Breaking changes are outlined below. ## Layout system changes on **Android** * Parent layouts (BottomsTabs, Stack, SideMenu) are always laid out behind the StatusBar. * Components (`component` and `externalComponent`) are measured and offset according to the StatusBar. In this release, We're changing the layout system in order to provide better support for immersive and full screen apps. In this release we've improved support for drawing behind the StatusBar, next we'll address drawing behind the NavigationBar. Use the `drawBehind` and `translucent` options to control the StatusBar ```js statusBar: { drawBehind: true, // will draw a screen behind the StatusBar translucent: true // Usually you'll want to have drawBehind: true when this is true } ``` While this isn't a breaking API change - there are a few breaking side effects. ### How will my app be effected 1. When the keyboard is opened, BottomTabs will now be drawn behind the keyboard and won't shift upwards. This is in parity with the current behaviour in iOS. For the most part, this isn't a breaking change. Toggling BottomTabs when TextInput's focus changes won't be needed anymore. 2. While parent controllers are drawn behind the StatusBar, their background isn't. This means that when transitioning from a destinations drawn under the StatusBar to a destination drawn behind it, the application's default background color will be visible behind the StatusBar. If you application's theme is dark, you might want to change the `windowBackground` property to mitigate this: Add the following to your application's `style.xml` ```xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@color/backgroundColor</item> </style> <!--This is your application's default background color. It will be visible when the app is first opened (while the splash layout is visible) and when transitioning between a destination a screen drawn under the StatusBar to a destination drawn behind it--> <item name="backgroundColor" type="color">#f00</item> </resources> ``` ## AndroidX migration We've migrated RNN to AndroidX, please follow migration instructions in the react-native repo. ## Removed SyncUiImplementation [SyncUiImplementation](https://github.com/wix/react-native-navigation/blob/master/lib/android/app/src/reactNative57WixFork/java/com/reactnativenavigation/react/SyncUiImplementation.java) was used to overcome a bug in RN's UiImplementation. This workaround was added to RN's `UiImplementation` in RN 0.60 (thanks @SudoPlz) and can be removed from RNN. If you're using `SyncUiImplementation` your app will fail to compile after upgrading to v3. Simply remove the following code from your `MainApplication.java` ```diff - import com.facebook.react.uimanager.UIImplementationProvider; - import com.reactnativenavigation.react.SyncUiImplementation; - @OverRide - protected UIImplementationProvider getUIImplementationProvider() { - return new SyncUiImplementation.Provider(); - } ``` ## BottomTab badge and dot indicator are not animated by default on Android (parity with iOS) Showing and hiding badge and dot indicator are now not animated by default. Badge animation is now controlled with the `bottomTab.animateBadge` property and dot indicator with `bottomTab.dotIndicator.animate` property. #### The following option will show a badge with animation ```js bottomTab: { badge: 'new, animateBadge: true } ``` #### The following option will show a dot indicator with animation ```js bottomTab: { dotIndicator: { visible: true, animate: true } } ``` closes wix#5228
and others
3.0.0-alpha.11
Changes
- It won't be needed to toggle the BottomTabs when Keyboard is visible
Updating from v2
v3 is currently in alpha. To update simply npm install
3.0.0-alpha.11-npm install --save react-native-navigation@3.0.0-alpha.11.Breaking changes are outlined below.
Layout system changes on Android
componentandexternalComponent) are measured and offset according to the StatusBar.In this release, We're changing the layout system in order to provide better support for immersive and full screen apps. In this release we've improved support for drawing behind the StatusBar, next we'll address drawing behind the NavigationBar.
Use the
drawBehindandtranslucentoptions to control the StatusBarWhile this isn't a breaking API change - there are a few breaking side effects.
How will my app be effected
When the keyboard is opened, BottomTabs will now be drawn behind the keyboard and won't shift upwards. This is in parity with the current behaviour in iOS. For the most part, this isn't a breaking change. Toggling BottomTabs when TextInput's focus changes won't be needed anymore.
Update: Fixed in
3.0.0-alpha.1If you've specified a custom TopBar animation which animatesyortranslationYproperties, you'll need to compensate for the TopBar's topMargin. This is a temporary solution and will be addressed in one of the next alpha releases.For example:
This means that when transitioning from a destinations drawn under the StatusBar to a destination drawn behind it, the application's default background color will be visible behind the StatusBar.
If you application's theme is dark, you might want to change the
windowBackgroundproperty to mitigate this:Add the following to your application's
style.xmlAndroidX migration
We've migrated RNN to AndroidX, please follow migration instructions in the react-native repo.
Removed SyncUiImplementation
SyncUiImplementation was used to overcome a bug in RN's UiImplementation. This workaround was added to RN's
UiImplementationin RN 0.60 (thanks @SudoPlz) and can be removed from RNN.If you're using
SyncUiImplementationyour app will fail to compile after upgrading to v3. Simply remove the following code from yourMainApplication.javaBottomTab badge and dot indicator are not animated by default on Android (parity with iOS)
Showing and hiding badge and dot indicator are now not animated by default. Badge animation is now controlled with the
bottomTab.animateBadgeproperty and dot indicator withbottomTab.dotIndicator.animateproperty.The following option will show a badge with animation
The following option will show a dot indicator with animation
The text was updated successfully, but these errors were encountered: