[fix] Fix transition blink on Android

IjzerenHein · Aug 19, 2021 · 130cfbc · 130cfbc
1 parent 7b72fa4
commit 130cfbc
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 25 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/README.md b/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 [email protected], 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
 

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -47,13 +47,6 @@ if (Platform.OS === "android") {
   StatusBar.setBackgroundColor("transparent");
 }
 
-// As of [email protected], 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>

diff --git a/package.json b/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",

diff --git a/src/createSharedElementStackNavigator.tsx b/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}

diff --git a/src/v4/createSharedElementStackNavigator.tsx b/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"