Using with react-native-navigation

When i use it with RNN it’s looks like this:

How i implement:

const ProviderWrap = Comp => props => (
  <View>
    <Comp {...props} />
    <FlashMessage position="top" hideStatusBar={true} />
  </View>
);
Navigation.registerComponent("Login", () => ProviderWrap(Login));

[MatthewPattell]

@tyleralves hi, just add:

Navigation.showOverlay({
		component: {
			name:      'app.topBarFlashMessages',
			passProps: {},
			options:   {
				overlay: {
					interceptTouchOutside: false,
				},
				layout:  {
					backgroundColor: 'transparent',
					orientation:     ['portrait'],
				},
			},
		},
	})

and register component:

Navigation.registerComponent('app.topBarFlashMessages', () => TopFlashMessages)

Component:

const styles = StyleSheet.create({
	container: {
		height: 50,
		width:  wp('100%'),
	},
})

const TopFlashMessages= () => {
	return (
		<View style={styles.container}>
			<FlashMessage position="top" />
		</View>
	)
}

[quiringk]

FYI it wasn’t working for me on the first time you called showMessage because I wasn’t waiting for showOverlay to finish. When the showOverlay promise completes then call showMessage. Like so…

Navigation.showOverlay({
		component: {
			name: "toastMessage",
			passProps: {
				forceUpdate: forceUpdate
			},
			options: {
				overlay: {
					interceptTouchOutside: false
				},
				layout: {
					backgroundColor: "transparent",
					orientation: ["portrait"]
				}
			}
		}
	}).then(() => {
		showMessage({
			message: title,
			description: message,
			type: "info"
		});
	});