This release is focuses on shared element transition and on improving the installation process of the library.
Since RNN supports multiple react-native versions, the library has multiple flavors, each targeting a different RN version. We now chose the appropriate flavor based on the react-native version installed in node_modules.
-missingDimensionStrategy "RNN.reactNativeVersion", "reactNativeXX" // Where XX is the minor number of the react-native version you're using
We’re starting to migrate RNN to Kotlin. All new code is written in Kotlin and existing code will be gradually converted to Kotlin. This requires you to declare the Kotlin version you’re using in your project.
buildscript {
ext {
+ kotlinVersion = "1.3.61" // Or any other kotlin version following 1.3.x
+ RNNKotlinVersion = kotlinVersion
+ RNNKotlinStdlib = "kotlin-stdlib-jdk8"
}
dependencies {
+ classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
}
}
In an effort to simplify RNN’s integrations process as much as possible, we’re minimizing the changes required to both MainApplication and MainActivity.
+import com.facebook.react.PackageList;
public class MainApplication extends NavigationApplication {
- @Override
- protected ReactNativeHost createReactNativeHost() {
- return new NavigationReactNativeHost(this) {
+ private final ReactNativeHost mReactNativeHost =
new NavigationReactNativeHost(this) {
@Override
protected String getJSMainModuleName() {
return "index";
}
+ @Override
+ public boolean getUseDeveloperSupport() {
+ return BuildConfig.DEBUG;
+ }
+ @Override
+ public List<ReactPackage> getPackages() {
+ ArrayList<ReactPackage> packages = new PackageList(this).getPackages();
+ return packages;
+ }
+ }
- }
+ @Override
+ public ReactNativeHost getReactNativeHost() {
+ return mReactNativeHost;
+ }
- @Override
- public boolean isDebug() {
- return BuildConfig.DEBUG;
- }
- @Nullable
- @Override
- public List<ReactPackage> createAdditionalReactPackages() {
- List<ReactPackage> packages = new ArrayList<>();
- return packages;
- }
}
Since RNN now supports auto linking, declaring the dependency manually is no longer needed.
-include ':react-native-navigation'
-project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../../lib/android/app/')
app/build.gradle
Add these lines to the bottom of your app/build.gradle
file.
+apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
+applyNativeModulesAppBuildGradle(project)
settings.gradle
include ':app'
+include ':react-native-navigation'
+project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../../lib/android/app/')
As RNN is now autolinked, remove its pod from your podspec file. This will ensure the correct version is linked when running pod install
- pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'
show and dismiss animation api have been fixed and are now in parity with Android api. If you’ve defined a custom modal animation, you can now consolidate the animation declarations.
New Android + iOS API | Unsupported iOS API |
```js options: { animations: { showModal: { alpha: { from: 0, to: 1, duration: 250, } } } } ``` | ```js options: { animations: { showModal: { content: { alpha: { from: 0, to: 1, duration: 250 } } } } } ``` |
❗️topBar and bottomTabs drawBehind option will be removed in the next major version.
The drawBehind option has been an anti pattern on iOS from the start and was introduced only for parity with Android api. On iOS, when a ScrollView or a SafeAreaView are used as screen root; the system handles insets automatically. As adoption of notch devices increases, developers use these views regularly, rendering the drawBehind option useless.
During the migration phase, leave Android options unchanged and set
drawBehind: true
to both TopBar and BottomTabs in default options.
If you’re animating translationY
or translationX
pass these values in dp instead of pixels.
This is especially relevant to values returned by await Navigation.constants()
api as these values are returned in dp. Now, if you’d like to use them in animations, you can do so without converting to pixels.
Fix NPE when showing Overlay #bfde34a by guyca
Fix overlays touch interception on new iPads #433f48b by yogevbd
Support react-native-youtube #ffbd288 by guyca
Fix wrong SafeAreaView margins when using bottomTabs.drawBehind: true #527fd49 by yogevbd
Move selectTabOnPress prop to correct interface #d6ead65 by phanghos
Fix external components layout measurement #1961181 by yogevbd
RN 0.62 support on Android #4bfa7c5 by safaiyeh
Fix dotIndicator not respecting initial visibility option #d9bd03f by itsam
Set default fontsize value for title and subtitle #0741799 by maryjenel
Respect default options when updating bottomTab options #513138e by yogevbd
Improve accessibility support #07c558c, #f635b5e by yogevbd and guyca
Add modalAttemptedToDismiss event #87af42a by manicantic
Add bottomTabLongPressed event on iOS #c425f83 by N3TC4T
Emit modalDismissed event before ViewController is destroyed #cf591d9 by guyca
Support hiding back button with mergeOptions #3f17dc4 by guyca
Send componentType field in componentDidAppear and componentDidDisappear events #3878b68 by guyca and yogevbd
Add typing for children on TopTabs #1f611c6 by aalises
Apply translucent StatusBAr flag only if needed #6782362 by guyca
Fix topBar.title.component measurement on iOS 10 #82e4807 by yogevbd
Remove yellow boxes from title and button components #b82d87f by yogevbd
Force translucent on iOS 12 when background is transparent #2ad41f3 by yogevbd
Fix TopBar background color on iOS12 #f202c7e by yogevbd
Fix incorrect bottom inset when hiding BottomTabs in default options #d0c21e4 by guyca
Fix topBar transparent background on iOS 12 #cd3d347 by yogevbd
Replace lodash chain with flow to reduce bundle size #bf354d7 by jinshin1013
Fix incorrect constants.topBarHeight
value when pageSheet modal is displayed #9ef61a9 by yogevbd
modal.swipeToDismiss
option [#659a42c](https://github.com/wix/react-native-navigation/commit/[experimental] Support updating component props with Navigation.mergeOptions #291f161 by justtal
Support bottomTab.selectedIcon #45e8389 by guyca
Merge options with ParentViewControllers #0dd3315 by guyca
Prefer new imageWithTintColor API when tinting an UIImage #5d751f6 by danilobuerger
Fixed disappearing StatusBar when displaying native ViewControllers #58c76e1 by yogevbd
Fixed title layout issues on iOS 13 #898e187, #a3f176d, #094b9a7 by yogevbd
Fixed leaking pageSheet modals on iOS 13 #2b4d897 by yogevbd
Fix defaultOptions not being applied if called after setRoot #338b096 by guyca
Support passing null color to StatusBar backgroundColor and bottom tab icon color #3519837 by guyca
statusBar.translucent
boolean propertyUiImplementation
in RN 0.60 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
- 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.
The following option will show a badge with animation
bottomTab: {
badge: 'new,
animateBadge: true
}
The following option will show a dot indicator with animation
bottomTab: {
dotIndicator: {
visible: true,
animate: true
}
}
Stack, BottomTabs and SideMenu are drawn behind StatusBar.
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 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>
Introduce Navigation.updateProps
command #0eb0570 by guyca
Fix compilation error on Xcode 10.x #99ddcd8 and #83f03cd by yogevbd
Don’t merge null bottomTab.selectedIconColor and bottomTab.iconColor #c48ed74 by guyca
Support updating component props with Navigation.mergeOptions #291f161 by justtal
Support bottomTab.selectedIcon #45e8389 by guyca
Safer check around component listener trigger #51d1b66 by dozoisch
Fix setStackRoot crash when called with the same id #3c08b1c by guyca
Fix crashes related to race conditions around ViewController.destroy #f2e46ea by guyca
Include PassProps in layout parameter of CommandListener #d3d01c2 by yogevbd
Fix TopBar background React component flicker when pushing screens #99032e0 by FRizzonelli
Add missing topMargin type to OptionsTopBar #9d7d7f4 by ceyhuno
Stop keeping hard reference to ViewControllers, remove RNNStore #275304c by yogevbd
Apply bottomTabs options after children added #2bddff3 by yogevbd
layout.componentBackgroundColor
option - This option is used to set background color only for component layouts. #cb48065 by guycaSkipped versions due to CI maintenance