jfilter / react-native-onboarding-swiper

🛳 Delightful onboarding for your React-Native app
https://www.npmjs.com/package/react-native-onboarding-swiper
Other
971 stars 179 forks source link

Grey background strip on round iPhone displays #116

Closed t-kaufmann closed 1 year ago

t-kaufmann commented 2 years ago

On iPhones with a round display, the bottom of the Onboarding Swiper stays grey. Neither changing the default color of the app-theme nor setting bottomBarColor={"white"} do change that.

image

jfilter commented 2 years ago

What happens when you set bottomBarHighlight to false?

ASchwad commented 2 years ago

This component uses a SafeAreaView for rendering its contents.

You can encapsulate your Onboarding component with another View to set the color in the bottom stripe which is kept as a distance from the SafeAreaView.

Example:

// Flex to let the container grow over full screen.
<View style={{flex: 1, backgroundColor: 'white'}}>
      <Onboarding
        // color of bottom tab controls container
        bottomBarColor='white'
        // for other colors you should set bottomBarHighlight this to false
        // otherwise the color will be applied with [0.1 opacity](https://github.com/jfilter/react-native-onboarding-swiper/blob/d732783681fae546deb5c97b73cde918cbb45644/src/index.js#L314)
        bottomBarHighlight={false}
       ...
       />
</View>
bhubr commented 1 year ago

@jfilter I hadn't read the whole thread, so I fumbled with the bottom bar-related props, and setting bottomBarHighlight to false indeed did the trick!