[fix] Fix transition blink on Android

Author: IjzerenHein

CHANGELOG.md

@@ -1,6 +1,6 @@
 # [Unreleased]
 
-# [3.1.1](https://github.com/IjzerenHein/react-navigation-shared-element/compare/v2.3.0...v3.1.1) (2021-08-19)
+# [3.1.2](https://github.com/IjzerenHein/react-navigation-shared-element/compare/v2.3.0...v3.1.2) (2021-08-19)
 
 ### Features
 
@@ -12,9 +12,13 @@
 ### Breaking changes
 
 - React navigation 4 is now supported through the `createSharedElementStackNavigator/build/v4` import
-- `sharedElements` function replaces `navigation/otherNavigation` by `route/otheRoute` arguments
+- `sharedElements` function replaces `navigation/otherNavigation` by `route/otherRoute` arguments
 - See migration guide in `./docs/Migration.md` for upgrading instructions
 
+### Bug Fixes
+
+- Fixes blink artefact on Android transitions (disables `detachInactiveScreens` by default on Android)
+
 # [2.3.0](https://github.com/IjzerenHein/react-navigation-shared-element/compare/v2.2.0...v2.3.0) (2020-04-13)
 
 ### Features

README.md

@@ -21,22 +21,10 @@ The following versions or react-navigation and the stack navigator are supported
 | [2.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v2) | 3 & 4 | This version is compatible with `react-navigation-stack@2`. |
 | [1.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1) | 3 & 4 | This version is compatible with `react-navigation-stack@1`. |
 
-Not supported:
+## Things to know
 
-- [ ] [react-native-screens/createNativeStackNavigator](https://github.com/IjzerenHein/react-navigation-shared-element/issues/14)
-
-## Known issues
-
-Navigating to a screen on Android causes the target element to blink when unhiding. This problem needs to be investigated further, but can be worked around by [disabling `react-native-screens` explicitly](./example/src/App.tsx#L50-L55).
-
-```jsx
-import { Platform } from 'react-native';
-
-// As of react-native-screens@2.14.0, enableScreens causes a fade-in of the image when navigating to a screen.
-// And as of react-native-screens@3, enableScreens is enabled by default.
-// Disable screens on Android until this issue has been resolved.
-enableScreens(Platform.OS !== "android");
-```
+- `react-navigation-shared-element` uses the [JS based Stack Navigator](https://reactnavigation.org/docs/stack-navigator). The [Native Stack Navigator](https://reactnavigation.org/docs/native-stack-navigator) is not yet supported and it is not yet clear whether this can be supported in the future.
+- On [detaching inactive screens](https://reactnavigation.org/docs/stack-navigator/#detachinactivescreens) a blink may occur on Android. Because of this `detachInactiveScreens` is set to `false` by default on Android.
 
 ## Demo App
 

example/src/App.tsx

@@ -47,13 +47,6 @@ if (Platform.OS === "android") {
  StatusBar.setBackgroundColor("transparent");
 }
 
-// As of react-native-screens@2.14.0, enableScreens causes
-// a fade-in of the image when navigating to a screen.
-// And as of react-native-screens@3, enableScreens is enabled by default.
-// Therefore, explicitly disable screens on Android until this issue
-// has been resolved.
-enableScreens(Platform.OS !== "android");
-
 export default () => (
  <SafeAreaProvider>
  <Tests>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-navigation-shared-element",
- "version": "3.1.1",
+ "version": "3.1.2",
  "description": "react-native-shared-element bindings for React Navigation",
  "main": "build/index.js",
  "types": "build/index.d.ts",

src/createSharedElementStackNavigator.tsx

@@ -128,6 +128,7 @@ export default function createSharedElementStackNavigator<
  return (
  <SharedElementRendererContext.Provider value={rendererDataProxy}>
  <StackView
+ detachInactiveScreens={Platform.OS !== "android"}
  {...rest}
  state={state}
  descriptors={descriptors}

src/v4/createSharedElementStackNavigator.tsx

@@ -1,5 +1,6 @@
 import hoistNonReactStatics from "hoist-non-react-statics";
 import * as React from "react";
+import { Platform } from "react-native";
 import {
  NavigationNavigator,
  NavigationProp,
@@ -85,6 +86,7 @@ function createSharedElementStackSceneNavigator(
  }
 
  return createStackNavigator(wrappedRouteConfigs, {
+ detachInactiveScreens: Platform.OS !== "android",
  ...stackConfig,
  defaultNavigationOptions:
  typeof defaultNavigationOptions === "function"