Advanced: OfflineNotice NOT rendering on Android

React Native
1

OfflineNotice NOT rendering on Android even if you take out the conditional.

DEVELOPER NOTES:
Showing Offline Notice -
NOT rendering, even when you comment out conditional
See OfficelineNotice.js …

:
function OfflineNotice(props) {
   //const netInfo = useNetInfo();
   //console.log("netInfo: ", netInfo);

  //if (netInfo.type !== "unknown" && netInfo.isInternetReachable === false)
  return (
  <View style={styles.container}>
    <AppText style={styles.text}>No Internet Connection</AppText>
  </View>
);

//return null;
 :
container: {
  alignItems: "center",
  backgroundColor: colors.primary,
  height: 50,
  justifyContent: "center",
  position: "absolute",
  top: Constants.statusBarHeight,
  width: "100%",
  zIndex: 1,
},

CULPRIT: The zIndex:1 property is NOT working, I.e.: The offline notice is NOT rendering on top.
(It’s still hidden underneath) on Android.

Is OfflineNotice working for anyone using iOS?

2

FIX: add container prop;
elevation: (Platform.OS === ‘android’) ? 1 : 0,

container: {
   alignItems: "center",
   backgroundColor: colors.primary,
   elevation: (Platform.OS === 'android') ? 1 : 0,
   height: 50,
   justifyContent: "center",
   position: "absolute",
   top: Constants.statusBarHeight,
   width: "100%",
   zIndex: 1,
 },
4 Likes
3

Is the Platform.OS conditional necessary? Would just using elevation: 1 work? I can’t test if it brakes something on iOS