shoutem / ui

Customizable set of components for React Native applications
Other
4.9k stars 454 forks source link

fix: statusBar style fixing #806

Open abdulbasithqb opened 9 months ago

abdulbasithqb commented 9 months ago

Enhance chooseBarStyle function in React Native component library to dynamically set the navigation bar style to 'light-content' when the background color is light, ensuring improved visibility and maintaining design consistency across diverse backgrounds."

fixes: #478

tomislav-arambasic commented 9 months ago

@abdulbasithqb Thanks for creating a PR for this.

@sstimac @Definitely-Not-Vlad This looks like a right change to me. It doesn't change anything for iOS, but does on Androids. default style for iOS is dark and light for Android, meaning that, currently, we never switch to dark StatusBar style on Androids.

I don't see why we shouldn't merge this in, unless there was a specific reason behind implementing default style that I'm not aware of? I believe all Androids have solid Status Bar background, so the style would be just a matter of personal preference, no UI breaking changes no matter of style chosen.

Edit: For this to work on Android, we'll have to remove else statement on line 35. It should be like this:

if (Platform.OS === 'android') {
  StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.2)');
}

const barStyle = chooseBarStyle(color);
StatusBar.setBarStyle(barStyle);

I'd merge this change now, but also try to figure out a better way to style out Status Bar, while also exposing the StatusBar backgroundColor and style via props of NavigationBar component. Or remove status bar logic completely and let implementations take care of it...

tomislav-arambasic commented 8 months ago

@abdulbasithqb We can merge your changes. However, I need you to confirm that changes in this PR are fixing it for you.

I don't see how you get Status Bar changed on Android because of if-else condition. On Androids, it never enters else condition on line 35 - never sets resolved bar style.

If above is true, please adjust your PR and verify everything works as expected.