[Android] Edge to Edge missbehavior?

[diegoarff]

I'm somewhat new to the React Native ecosystem and found the template, so I wanted to try it out. After doing a dev build and using my physical device (Android 14), the app looks like this:

There's some things that I'm wondering here:

• Is it possible to have edge to edge behavior? What I mean is having the tab bar expand to the bottom and not see a different color on the navigation bar and the same for the status bar, it should take the background color of the app.
• It seems the template uses the wrong style for the SystemBars component from react-native-edge-to-edge? From what I understand, we should use 'dark' when the underlying content is light, and viceversa, which is not the current behavior and that's why you see black letters when on dark mode. Using 'auto' as style works as intended and using the inverse result from useColorScheme also works.

Overall it seems like a great template, but this behavior takes away the modern 'native feel' for me.

Thank you for your work and hope to hear an answer soon!

[acuD1]

Ah ! I went on the same issue, and I thought I was doing something wrong. Or am I ? :)

export const FocusAwareStatusBar = ({ hidden = false }: Props) => {
  const isFocused = useIsFocused();
  const { colorScheme } = useColorScheme();

  if (Platform.OS === 'web') return null;

  // Dunno why I need to do the reverse ternary here
  return isFocused ? (
    <SystemBars
      style={colorScheme === 'dark' ? 'light' : 'dark'}
      hidden={hidden}
    />
  ) : null;
};

[diegoarff]

@acuD1 The template is using an old react-native-edge-to-edge version, made it work by updating dependencies, putting the style of SystemBars as "auto" and adding this to the plugin on app.config.ts:

[
  'react-native-edge-to-edge',
  {
    android: {
      enforceNavigationBarContrast: false,
    },
  },
]

For updating dependencies I followed the guide of the template, making sure to run doctor after all the updates as well :) https://starter.obytes.com/guides/upgrading-deps/

[OgDev-01]

@acuD1 The template is using an old react-native-edge-to-edge version, made it work by updating dependencies, putting the style of SystemBars as "auto" and adding this to the plugin on app.config.ts:

[
  'react-native-edge-to-edge',
  {
    android: {
      enforceNavigationBarContrast: false,
    },
  },
]

For updating dependencies I followed the guide of the template, making sure to run doctor after all the updates as well :) starter.obytes.com/guides/upgrading-deps

This is also the fix i did... upgraded to "react-native-edge-to-edge": "^1.4.3" and applied the android options in the config as stated above. more on this configurations on the plugins can be found in the official docs of react-native-edge-to-edge

[mantu-bit]

@acuD1 The template is using an old react-native-edge-to-edge version, made it work by updating dependencies, putting the style of SystemBars as "auto" and adding this to the plugin on app.config.ts:

[
  'react-native-edge-to-edge',
  {
    android: {
      enforceNavigationBarContrast: false,
    },
  },
]

For updating dependencies I followed the guide of the template, making sure to run doctor after all the updates as well :) https://starter.obytes.com/guides/upgrading-deps/

I am still facing the issue, I am using latest package of react native edge to edge 1.5.0, also i have added config in app.config.ts as mentioned. still i am seeing this

export const FocusAwareStatusBar = ({ hidden = false }: Props) => {
  const isFocused = useIsFocused();
  const { colorScheme } = useColorScheme();

  if (Platform.OS === 'web') return null;

  return isFocused ? <SystemBars style="auto" hidden={hidden} /> : null;
};

[OgDev-01]

@acuD1 The template is using an old react-native-edge-to-edge version, made it work by updating dependencies, putting the style of SystemBars as "auto" and adding this to the plugin on app.config.ts:

[
  'react-native-edge-to-edge',
  {
    android: {
      enforceNavigationBarContrast: false,
    },
  },
]

For updating dependencies I followed the guide of the template, making sure to run doctor after all the updates as well :) starter.obytes.com/guides/upgrading-deps

I am still facing the issue, I am using latest package of react native edge to edge 1.5.0, also i have added config in app.config.ts as mentioned. still i am seeing this

export const FocusAwareStatusBar = ({ hidden = false }: Props) => {
  const isFocused = useIsFocused();
  const { colorScheme } = useColorScheme();

  if (Platform.OS === 'web') return null;

  return isFocused ? <SystemBars style="auto" hidden={hidden} /> : null;
};

Did you run prebuild after this updates? If no, you need to run:

pnpm prebuild to ensure the native changes are applied for you to get an update

[mantu-bit]

Did you run prebuild after this updates? If no, you need to run:

pnpm prebuild to ensure the native changes are applied for you to get an update

Yes I did it but still the result is same. The statusbarcolor is not adaptive

[diegoarff]

@mantu-bit Did you also do another build after prebuilding with the new version?

[Bonitoflakes]

updating the version fixed the issue for me

[mantu-bit]

@mantu-bit Did you also do another build after prebuilding with the new version?

Yes i did clean build