React-Native Flash-Message with Mobx and React-navigation

Question

I'm trying to use react-native-flash-message to provide little toasts in my app, and I am supposed to add the flash message to my root view. I cannot figure out where that is in my app. I used examples to get up and running with mobx/react-navigation/react-native, and so my app.js actually just exports an index.js that looks like this:

import React from 'react';
import { createRootNavigator } from './router';
import { isSignedIn } from './auth';
import { Font, SplashScreen } from 'expo';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheckSquare, faCoffee, faHome } from '@fortawesome/free-solid-svg-icons';
import { configure } from 'mobx';
import { Provider } from 'mobx-react';
import _ from 'lodash';

import { RootStore } from './stores/RootStore';
import { getDecoratedStores } from './stores/util/store-decorator';
import { AsyncStorage } from 'react-native';
import FlashMessage from "react-native-flash-message";

configure({ enforceActions: 'observed' });
const rootStore = new RootStore();
const stores = getDecoratedStores(rootStore);

//Library of Icons
library.add(faCheckSquare, faCoffee, faHome);

export default class App extends React.Component<
  {},
  { checkedSignIn: boolean; signedIn: boolean; loaded: boolean }
> {
  constructor(props: any) {
    super(props);

    this.state = {
      signedIn: false,
      checkedSignIn: false,
      loaded: false,
    };
  }

  componentWillMount() {
    this._loadFontsAsync();

  }

  _loadFontsAsync = async () => {
    await Font.loadAsync({ robotoBold: require('../app/uiComponents/fonts/Roboto-Bold.ttf') });
    await Font.loadAsync({
      robotoRegular: require('../app/uiComponents/fonts/Roboto-Regular.ttf'),
    });

    this.setState({ loaded: true });
  };

  componentDidMount() {
    isSignedIn()
      .then(res => {
        SplashScreen.hide();
        this.setState({ signedIn: res as boolean, checkedSignIn: true });
      })
      .catch(err => {console.log(err); alert('Error')});
  }

  render() {
    const { checkedSignIn, signedIn } = this.state;

    // If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
    if (!checkedSignIn) {
      return null;
    }

    AsyncStorage.getItem('auth-demo-key').then((data) => console.log("Async Storage: " + data));

    const Layout = createRootNavigator(signedIn);
    return (
      <Provider {...stores}>
        <Layout />
      </Provider>
    );
  }
}

Can anyone help me figure out how to add my flash message in this return statement? I tried wrapping the provider in a view, but that failed and crashed my app, same with adding it within the provider (a view), also tried just adding flash message here in the provider, but that failed, too. Can anyone help?

Have you followed the official documentation? put the `` in return between provider open and close tag and call `showMessage` function somewhere else to see if it works? — Amir-Mousavi, Feb 01 '19 at 10:48

React-Native Flash-Message with Mobx and React-navigation

0 Answers0