Problem with react-navigation and width of the alert

[marceloHashzen]

Hi, is there any tip to use this alert with the returned navigator from react-navigation, so it appears on all screens? Or is it possible to manually set the width of the alert (if I try to insert the alert inside a view in the returned component, the width is just the width of the text inside the alert)?

Some screenshots:

In this situation I'm putting the alert inside de Login screen, so I would have to put inside every other screen, but the width is delimited by the text width:

In this situation, I'm putting the alert with the navigation that is returned, but in android all the screen got blank and on iOS everything is squished in the top:

[gnestor]

Hi @marceloHashzen! If you put StatusBarAlert inside of a top-level View with flex: 1, it should render with full width. Additionally, putting your login content inside of a container View with flex: 1 should resolve what you're seeing in the last screenshot.

I just added an example app directory to this repo. Check that out for reference. Let me know if you continue to have issues.

[marceloHashzen]

Hello @gnestor, thank you very much for the help. I've used the second situation (StatusBar outside the navigation screen), with the container View with flex: 1, it's working wonderfully.
Just another doubt, is there any other better way than setting the statusbarHeight={25}, so the message will not hidden by the android top header?

[gnestor]

I haven't used this component with Android, but the purpose of statusbarHeight is to offset the alert's top position by the statusbarHeight value.

[gnestor]

@marceloHashzen Check out the ReactNativeStatusBarAlertExample directory for an example implementation with react-navigation 👍 To summarize:

<View style={styles.container}>
	<StatusBar />
	<StatusBarAlert
		visible={this.state.alert}
		message="Alert!"
		backgroundColor="#3CC29E"
		color="white"
		style={styles.alert}
		onPress={this.toggleAlert}
	>
		{this.state.customAlert}
	</StatusBarAlert>
	<MyStackNavigation />
</View>

[marceloHashzen]

Awesome @gnestor! Will try by the end of the week, but the alert is already working here on iOS and Android!
Thank you very much for your help!