Using with react-native-navigation

[moneymc]

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));

[lucasferreira]

Hi @moneymc,

Could you follow the solution exposed in this other issues?

#13
#21
#18

TL;DR: You have to put the "above" de navigators, like this demo here: https://snack.expo.io/Hy7Y01Yc7

[tyleralves]

All of your links reference react-navigation which is pretty different from react-native-navigation despite the names.

[lucasferreira]

Oh I'm sorry @tyleralves,

I didn't get it at first, but now I see that you using other lib instead.

I've never used this lib before (react-native-navigation) but as I can see this libs works in native layer of RN (Obj-C or Java), in a area where my JavaScript FlashMessage lib can't interfere, so at first I guess there the only way to used is to put the component inside any of your views and work locally (instead of globally).

[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"
		});
	});

[berk2s]

for newer versions of react-native-flash-message use componentBackgroundColor instead of backgroundColor