From 856f7f40361edfb044141866049dfae4fdf74e90 Mon Sep 17 00:00:00 2001
From: Krzysztof Magiera <krzys@swmansion.com>
Date: Tue, 18 Dec 2018 16:38:25 +0100
Subject: [PATCH] fix: change opacity for hidden tabs only when not using
 rn-screens (#80)

When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android).

This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`).

### Motivation

Fix blinking effect on Android when switching tabs [#5382](https://github.com/react-navigation/react-navigation/issues/5382)

### Test plan

1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE
2) Try this on a low end Android device for consistent repro
3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
---
 packages/tabs/src/navigators/createBottomTabNavigator.js | 5 +----
 packages/tabs/src/views/ResourceSavingScene.js           | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/tabs/src/navigators/createBottomTabNavigator.js b/packages/tabs/src/navigators/createBottomTabNavigator.js
index bc0efdfd..09748f83 100644
--- a/packages/tabs/src/navigators/createBottomTabNavigator.js
+++ b/packages/tabs/src/navigators/createBottomTabNavigator.js
@@ -112,10 +112,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
             return (
               <ResourceSavingScene
                 key={route.key}
-                style={[
-                  StyleSheet.absoluteFill,
-                  { opacity: isFocused ? 1 : 0 },
-                ]}
+                style={StyleSheet.absoluteFill}
                 isVisible={isFocused}
               >
                 {renderScene({ route })}
diff --git a/packages/tabs/src/views/ResourceSavingScene.js b/packages/tabs/src/views/ResourceSavingScene.js
index f5d70767..95c01dc5 100644
--- a/packages/tabs/src/views/ResourceSavingScene.js
+++ b/packages/tabs/src/views/ResourceSavingScene.js
@@ -24,7 +24,7 @@ export default class ResourceSavingScene extends React.Component<Props> {
 
     return (
       <View
-        style={[styles.container, style]}
+        style={[styles.container, style, { opacity: isVisible ? 1 : 0 }]}
         collapsable={false}
         removeClippedSubviews={
           // On iOS, set removeClippedSubviews to true only when not focused