Automated cherry pick of #4067 (#4071)

* Add backgroundColor

* Revert backgroundColor and set elevation instead

Co-authored-by: Miguel Alatzar <this.migbot@gmail.com>
Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/network_indicator/network_indicator.js

@@ -412,8 +412,15 @@ const styles = StyleSheet.create({
     container: {
         height: HEIGHT,
         width: '100%',
-        zIndex: 9,
         position: 'absolute',
+        ...Platform.select({
+            android: {
+                elevation: 9,
+            },
+            ios: {
+                zIndex: 9,
+            },
+        }),
     },
     wrapper: {
         alignItems: 'center',

app/screens/channel/channel.android.js

@@ -40,7 +40,6 @@ export default class ChannelAndroid extends ChannelBase {
 
         const drawerContent = (
             <>
-                <NetworkIndicator/>
                 <ChannelNavBar
                     openMainSidebar={this.openMainSidebar}
                     openSettingsSidebar={this.openSettingsSidebar}
@@ -55,6 +54,7 @@ export default class ChannelAndroid extends ChannelBase {
                         screenId={this.props.componentId}
                     />
                 </KeyboardLayout>
+                <NetworkIndicator/>
                 {LocalConfig.EnableMobileClientUpgrade && <ClientUpgradeListener/>}
             </>
         );

app/screens/channel/channel_nav_bar/channel_nav_bar.js

@@ -130,7 +130,14 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             flexDirection: 'row',
             justifyContent: 'flex-start',
             width: '100%',
-            zIndex: 10,
+            ...Platform.select({
+                android: {
+                    elevation: 10,
+                },
+                ios: {
+                    zIndex: 10,
+                },
+            }),
         },
     };
 });