React-native-navigation: 5.0.0-alpha.14

[guyca]

Highlights

• Easier installation
• autolink and reac-native link support
• Shared Element Transition - reimplemented from scratch and new API
• [iOS] showModal animation api parity
• [Android] Animation values are now declared in dp
• [iOS] deprecate topBar.drawBehind
• [Android] RNN is migrating to Kotlin

Updating from v4

Remove missingDimensionStrategy from app/build.gradle

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

Declare Kotlin version in build.gradle

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
    }
    dependencies {
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"    
    }
}

Update MainApplication.java

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<>();
-        packages.add(new RNViewOverflowPackage());
-        return packages;
-    }
}

Update settings.gradle

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/')

Autolink support has arrived!

Unlike most other libraries, react-native-navigation requires you to make a few changes to native files which can be intimidating to users without native experience. We'd like to make to library more accessible and easy to integrate. To address these pains we took the following actions:

1. We've added support for autolinking, which takes care of adding the library as a dependency to your projects.
2. Added a link script which should automate all installation steps - react-native link react-native-navigation. In the future, we'll add an unlink script as well.

Remove RNN pod from podspec

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'

Element Transition

Element transition is a highly requested feature which has now been reimplemented from scratch. The API has also been greatly simplified.

⚠️ For now, the transition is available on iOS for push and pop while on Android it's available only for push commands. We will soon add parity and expand the supported commands to show/dismiss modal and changing BottomTabs.

Example

An example for both transitions can be found in the playground app.
Source screen
Destination screen

API

There are two types of transitions which are available:

1. Shared Element Transition - transition an element from source screen to a destination screen.
2. Element Transition - Animate an element while navigating to a new destination.

In order for RNN to be able to detect the corresponding native views of the elements, each element must include a unique nativeID prop.
Next, you'll need to declare the transitions in the push command animation options.

Navigation.push(this.props.componentId, {
  component: {
    name: Screens.CocktailDetailsScreen,
    passProps: { ...item },
    options: {
      animations: {
        push: {
          sharedElementTransitions: [ // An array of elements to transition from the source screen to the destination screen
            {
              fromId: `image${item.id}`,
              toId: `image${item.id}Dest`
            },
            {
              fromId: `title${item.id}`,
              toId: `title${item.id}Dest`
            },
            {
              fromId: `backdrop${item.id}`,
              toId: 'backdrop'
            }
          ],
          elementTransitions: [ // Elements to animate either in the source screen or the destination screen
            {
              id: 'description',
              alpha: {
                from: 0
              },
              translationY: {
                from: 18
              }
            }
          ]
        }
      }
    }
  }
}

Modal animation parity

show and dismiss animation api has been fixed and is 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 } } } } } ```

Animation values are now declared in dp

When declaring translate animations, values were regarded in pixels and it was up to the developer to convert from dp to pixels. Now, values are defined in points/dp and converted to pixels in native.

[joewired]

FAILURE: Build failed with an exception.

/node_modules/react-native-navigation/lib/android/app/build.gradle' line: 107

For input string: "0-rc"

Looks like the code assumes the version numbers will be integers. In my case I am using react-native-0.62.0-rc.1

[guyca]

Thanks @joewired , we didn't take prerelease tags into account 😅

[guyca]

@joewired Alright, fixed for RN62, will fix for 0.59 and below today

[hadnet]

I’m using RNN 4.8 and RN 0.61 and I tried to set a translucent bottomTabs using translucent: true props but it doesn’t work, no blur effect.

[drewhamlett]

You all rock! We're loving this library. Thanks for updates.

[pontusab]

Looks like showOverlay crashes on Android.

[guyca]

@pontusab Can you open an issue with crash log?

[pontusab]

@guyca here you go: https://github.com/wix/react-native-navigation/issues/5915

[guyca]

Fixed in alpha.11

[muhammadwafa]

First I want to say thank you so much for your effors,
It is one week that I cant setup the version 4.8 because of auto linking.

Also there one problem is in customization of MainActivity java classs

for example react-native-firebase says for android x support update your MainActivity.java file like this:

import android.support.multidex.MultiDexApplication;
//i mport androidx.multidex.MultiDexApplication; for AndroidX!

  // ..
  public class MainApplication extends MultiDexApplication implements ReactApplication {
      // ..
  }

And you say something else and also another packages also has something like this.

So please make a solution for this at least for popular module like react-native-firebase

[guyca]

Hey @muhammadwafa 👋 If your app is targeting sdk 21 or higher (which it should), then you don't need to extend MultiDexApplication. See the docs for more info.

[muhammadwafa]

@guyca Thank you very much to your reply and please tell me something about this, How can I solve it.
the following methods within MainActivity.java class is added as I installed react-native-gesture-handler and react-native-orientation-locker

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "hello";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }

  @Override
  public void onConfigurationChanged(Configuration newConfig) {
      super.onConfigurationChanged(newConfig);
      Intent intent = new Intent("onConfigurationChanged");
      intent.putExtra("newConfig", newConfig);
      this.sendBroadcast(intent);
  }

}

But in your doc we change ReactActivity to NavigationActivity and also we remove the methods was inside MainActivity extends ReactActivity. So here What Can I do, please help in, I stucked one week only here and with auto linkingtoo.

[guyca]

@muhammadwafa Please open a separate issue 👍

[mohammadanaraki]

hi
in my opinion this package needs to have customizable bottom tabs with react components please consider that in your next updates
@guyca

[AbanoubNassem]

alongside this issue : https://github.com/wix/react-native-navigation/issues/5904#issuecomment-582605956

i```
mport com.facebook.react.bridge.NativeDeltaClient;
^
symbol: class NativeDeltaClient
location: package com.facebook.react.bridge
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/JsDevReloadHandlerFacade.java:10: error: cannot find symbol
public void onSuccess(@Nullable NativeDeltaClient nativeDeltaClient) {
^
symbol: class NativeDeltaClient
location: class JsDevReloadHandlerFacade
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/ReloadHandlerFacade.java:3: error: cannot find symbol
import com.facebook.react.bridge.NativeDeltaClient;
^
symbol: class NativeDeltaClient
location: package com.facebook.react.bridge
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/ReloadHandlerFacade.java:10: error: cannot find symbol
public void onSuccess(@Nullable NativeDeltaClient nativeDeltaClient) {
^
symbol: class NativeDeltaClient
location: class ReloadHandlerFacade
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/DevBundleDownloadListenerAdapter.java:3: error: cannot find symbol
import com.facebook.react.bridge.NativeDeltaClient;
^
symbol: class NativeDeltaClient
location: package com.facebook.react.bridge
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/DevBundleDownloadListenerAdapter.java:10: error: cannot find symbol
public void onSuccess(@Nullable NativeDeltaClient nativeDeltaClient) {
^
symbol: class NativeDeltaClient
location: class DevBundleDownloadListenerAdapter
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/JsDevReloadHandlerFacade.java:9: error: method does not override or implement a method from a supertype
@Override
^
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/ReloadHandlerFacade.java:24: error: onSuccess() in ReloadHandlerFacade cannot implement onSuccess() in DevBundleDownloadListener
protected abstract void onSuccess();
^
attempting to assign weaker access privileges; was public
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/ReloadHandlerFacade.java:9: error: method does not override or implement a method from a supertype
@Override
^
/Volumes/Data/mobile/foodtimeapp/node_modules/react-native-navigation/lib/android/app/src/reactNative60/java/com/reactnativenavigation/react/DevBundleDownloadListenerAdapter.java:9: error: method does not override or implement a method from a supertype
@Override
^
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
10 errors

FAILURE: Build failed with an exception.
```

using react native 0.62.0-rc.1

[oxyii]

Tech bug

node_modules/react-native-navigation/lib/android/app/src/reactNative62/java/reactnativenavigation/react/NavigationReactNativeHost.java:11: error: ';' expected
import com.reactnativenavigation.react.DevBundleDownloadListenerAdapter

RN: 0.62.0-rc.2
RNN: 5.0.0-alpha.14

[wbw20]

Hello @guyca, thank you for your great work on this.

I am trying out the new elementTransitions API and I am experiencing an issue on iOS when I set a custom duration for an alpha transition.

If the duration is low (like 200ms), then the destination screen which I am pushing onto the stack is tinted dark. When I make the transition longer (about 400ms or more), everything is fine.

Here is my transition:

const SEARCH_ANIMATION_DURATION = 200
...
Navigation.push(this.props.componentId, {
  component: {
    name: 'SearchDialog',
    options: {
      animations: {
        push: {
          elementTransitions: [{
            id: 'search-bar-origin',
            alpha: {
              from: 1,
              to: 0,
              duration: SEARCH_ANIMATION_DURATION,
            },
            translationY: {
              from: 0,
              to: -18,
              duration: SEARCH_ANIMATION_DURATION,
            },
          }, {
            id: 'search-bar-destination',
            alpha: {
              from: 0,
              to: 1,
              duration: SEARCH_ANIMATION_DURATION,
            },
            translationY: {
              from: 18,
              to: 0,
              duration: SEARCH_ANIMATION_DURATION,
            },
          }]
        },
      }
    }
  },
})

And here is a recording of the transition. It may be difficult to tell but all of the colors are off ever so slightly on the pushed screen (background should be white):

https://youtu.be/oPor8ilisiE

I am seeing this using

react-native: 0.61.5
react-native-navigation: ^5.0.0-alpha.14
iOS 13.3

Hopefully I am not misusing the API, please let me know if you would like more information.

[guyca]

@wbw20 Thanks for reporting! You're actually not using a shared element transition, try the following:

animations: {
  push: {
    sharedElementTransitions: [
      {
        fromId: `search-bar-origin`,
        toId: `search-bar-destination`
      }
    ]
  }
}

The reason for the black flicker is because regular element transition doesn't wait for the destination screen to be rendered, sharedElementTransitions does wait for the destination screen to be rendered before initiating the transition.

If you have any more questions about Element Transition, please open a separate issue, thanks 👍

[cspicuzza]

With the updated Animation API, can the modal content slide up while the screen background color fades in?

[guyca]

@cspicuzza Sure, use something like this

[cspicuzza]

@guyca thank you, I'll give that a try.

[harveyconnor]

My modal's are not rendering on the screen correctly with:

{
  modalTransitionStyle: OptionsModalTransitionStyle.crossDissolve,
  modalPresentationStyle: OptionsModalPresentationStyle.overCurrentContext,
}

This is with animations:

{
  showModal: {
    alpha: {
      from: 0,
      to: 1,
      duration: 250,
    },
  },
}

the contents of the render is invisible but the modal is drawn so you cannot press anywhere on the screen to dismiss it.

[harveyconnor]

If I comment out the animations it works and displays the modal however my background is white, it should be transparent.

[guyca]

@harveyconnor Please open a separate issue with a reproduction, Thanks.

[GrinchakAndrew]

dismissModal: {
alpha: {
from: 1,
to: 0,
duration: 1000,
},
},
This code crashed on iOS for "^6.0.0" over a pushed screen. Had to use only show animation for Modal. Android works like a charm.
@guyca

[Natkarock]

Highlights

• Easier installation
• autolink and reac-native link support
• Shared Element Transition - reimplemented from scratch and new API
• [iOS] showModal animation api parity
• [Android] Animation values are now declared in dp
• [iOS] deprecate topBar.drawBehind
• [Android] RNN is migrating to Kotlin

Updating from v4

Remove missingDimensionStrategy from app/build.gradle

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

Declare Kotlin version in build.gradle

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
    }
    dependencies {
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"    
    }
}

Update MainApplication.java

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<>();
-        packages.add(new RNViewOverflowPackage());
-        return packages;
-    }
}

Update settings.gradle

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/')

Autolink support has arrived!

Unlike most other libraries, react-native-navigation requires you to make a few changes to native files which can be intimidating to users without native experience. We'd like to make to library more accessible and easy to integrate. To address these pains we took the following actions:

1. We've added support for autolinking, which takes care of adding the library as a dependency to your projects.
2. Added a link script which should automate all installation steps - react-native link react-native-navigation. In the future, we'll add an unlink script as well.

Remove RNN pod from podspec

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'

Element Transition

Element transition is a highly requested feature which has now been reimplemented from scratch. The API has also been greatly simplified.

⚠️ For now, the transition is available on iOS for push and pop while on Android it's available only for push commands. We will soon add parity and expand the supported commands to show/dismiss modal and changing BottomTabs.

Example

An example for both transitions can be found in the playground app.
Source screen
Destination screen

API

There are two types of transitions which are available:

1. Shared Element Transition - transition an element from source screen to a destination screen.
2. Element Transition - Animate an element while navigating to a new destination.

In order for RNN to be able to detect the corresponding native views of the elements, each element must include a unique nativeID prop.
Next, you'll need to declare the transitions in the push command animation options.

Navigation.push(this.props.componentId, {
  component: {
    name: Screens.CocktailDetailsScreen,
    passProps: { ...item },
    options: {
      animations: {
        push: {
          sharedElementTransitions: [ // An array of elements to transition from the source screen to the destination screen
            {
              fromId: `image${item.id}`,
              toId: `image${item.id}Dest`
            },
            {
              fromId: `title${item.id}`,
              toId: `title${item.id}Dest`
            },
            {
              fromId: `backdrop${item.id}`,
              toId: 'backdrop'
            }
          ],
          elementTransitions: [ // Elements to animate either in the source screen or the destination screen
            {
              id: 'description',
              alpha: {
                from: 0
              },
              translationY: {
                from: 18
              }
            }
          ]
        }
      }
    }
  }
}

Modal animation parity

show and dismiss animation api has been fixed and is 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

options: {
  animations: {
    showModal: {
      alpha: {
        from: 0,
        to: 1,
        duration: 250,
      }
    }
  }
}

options: {
  animations: {
    showModal: {
      content: {
        alpha: {
          from: 0,
          to: 1,
          duration: 250
        }
      }
    }
  }
}

Animation values are now declared in dp

When declaring translate animations, values were regarded in pixels and it was up to the developer to convert from dp to pixels. Now, values are defined in points/dp and converted to pixels in native.

why i don't see this tutorial in documentation?
UPD: sorry, i saw another link. You have old link in readme file.