I have a React Native project I've written using Expo -- when I develop and publish on Expo, the Status Bar up top (the time, wifi etc) is fine, I've never had to be concerned about it -- it's always been there, so I've never had to read-in a separate StatusBar component or anything like that.
But when I 'build' the app to get the IPA file and then deploy on TestFairy, the App's statusbar is completely invisible (not sure if the font is white or it's an overlay or what).
Any ideas? Thanks!
As mentioned in the Expo docs
Expo makes the status bar translucent by default on Android which is consistent with iOS, and more in line with material design.
Therefore using the react-native's StatusBar you can configure it as follows
<ParentWrapper style={{flex: 1}}>
<View style={{ height, backgroundColor }}>
<StatusBar { ...props } />
</View>
// ... Your navigation or the child components
</ParentWrapper>
and the height is Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
Related
I have used React with MUI and starting to explore React Native. I have read the documentation but can not seem to find this basic example.
How do I create a list of buttons(button group) with icons to the right?
I would like to do something similar to MUI like <Button endIcon={<ArrowRight />} />
but achieve the Native iOS look and feel.
Like the Settings app on iOS:
| General —-——————————————- —> |
| Control Center —————————- —> |
| Display & Brightness ———— —> |
Is there a way to do this without coding the entire thing from scratch?
There is probably a third party package for this somwhere, but my advice would be to use SectionList from react-native and RectButton from react-native-gesture-handler to get the native ios/android feel.
You can use FlatList with custom buttons and apply styles to it.
https://reactnative.dev/docs/flatlist
Example of button content:
<View style={{flexDirection: 'row'}}>
<View style={{flex: 0.3}}>Icon here</View>
<View style={{flex: 0.5}}><Text>Text here</Text></View>
<View style={{flex: 0.2, alignItems: 'flex-end'}}>Icon here</View>
</View>
I've got a react native app -> I've currently noticed that the text on my screen overlaps on iphone 10+ devices. How would I create a safearea for the new devices?
I've tried to add a tag to wrap my stack.navigator for the home screen but had no luck so far.
Is this something I would target on my react native or in xcode?
enter image description here
use
import { SafeAreaView } from 'react-native';
to handle safe area I have shown in below code how to handle safe area for iPhone 10 plus device
in below code I have divided the safe area in two-part one is for top safe area and another is the bottom safe area and you place your all component in bottom safe area
render() {
return (
<View style={{flex: 1} >
<SafeAreaView style={{flex: 0}} />
<SafeAreaView style={{flex: 1}}>
//here you can place your component
</SafeAreaView>
</View>
)
}
I'm using the native base for the screen layout in react native. The Header component in the native base is adding an extra height apart from the actual height that I have specified.
My current native base version is 2.13.12.
I'm facing the issue in the iPhone only and for the iPhone x and above models.
Someone please helps me with fixing the issue.
Screenshot of the issue
Use forceInset={{ top: 'never' }} at the main root file to remove the extra padding. for example:
<SafeAreaView style={{flex: 1}} forceInset={{ top: 'never' }}>
<App />
</SafeAreaView>
Is there a goto way to handle the status bar on iOS? For my app, I just want everything to be below the status bar.. but it looks like the only way to do that is to go to every single component and add padding? I would guess theres a way to do it in xcode but I have no clue!
Thanks!
There is already a component in react-native for the StatusBar
You just need to add it as
<YourParentWrapper style={{flex: 1}}>
<View style={{ height, backgroundColor }}>
<StatusBar { ...props } />
</View>
// ... Your navigation or the child components
</YourParentWrapper>
where the height is
Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
This will handle your components below the default status bar for all the devices
I'm building a podcasting app with react native and I would like to implement the mini player you see at bottom of screen in most podcasting/music apps. See image below. I want to make the mini player stick no matter which screen you navigate to. Any idea how to implement this in react native? I'm using react navigation as the main navigator right now https://reactnavigation.org/.
The best way to do this is use the magic of flexbox.
Think about your app as combination of two major screens.
1) The part with header, navigation menus and the playlist (inside etc.)
2) The player
Try this layout
<View style={styles.container}>
<View style={styles.firstBox}>
1)
</View>
<View style={styles.secondBox}>
2)
</View>
</View>
Now all you have to do is assign proper styles
const styles = {
container: {
flex: 1,
},
firstBox: {
flex: 8
},
secondBox: {
flex: 2
}
}
This is enough for the basic structure. You can design accordingly.