CODEWITHSUNDEEP
react-nativeflash-message
Laura Martin
Laura Martin

Reputation: 11

How do you get React Native Flash message to show

Hi I'm new to react native and am currently trying to add a flash message to the top of my mobile application upon the press of a button. I've read the https://www.npmjs.com/package/react-native-flash-message tutorial and watched a couple youtube videos on how to integrate it, but I can't seem to figure out how to integrate it into my code beyond guessing and checking which has taken up a lot of time. Part of my code from two pages is shown below, the app still functions and brings me to the home screen but does not show the flash message when I press the button. If you know how to do this or have any suggestions it would be greatly appreciated.

From App.js:

export default function App(){
  return  (
     <View>
      <FlashMessage position="top" />
     </View>
   );
};

From CreatEventScreen.js:

following code is within: function CreateEventScreen(props) {

{/* Create Event Button */}
<View style={styles.loginButton}>
  <TouchableOpacity
    style={styles.buttonTouchableOpacity}
    onPress={() => {
      showMessage({
        message: "Success",
        description: "The Event has been created",
        type: "success",
      });
      Actions.HomeScreen()
    }}>
    <Text style={styles.btnTextWhite}>Create Event</Text>
  </TouchableOpacity>
</View>

Upvotes: 1

Views: 5858

Answers (1)

Mehmet Alemdar
Mehmet Alemdar

Reputation: 11

  1. You have to import the CreatEventScreen.js file into the App.js file.
  2. You have to import the flash message package into app.js file.
  3. After adding your components in App.js, you should add the latest flash message.

so your app.js file should look like this:

import CreateEventScreen from './CreatEventScreen.js' //Type the directory where your file is located.
import  FlashMessage from "react-native-flash-message"

export default function App() {
  return (
    <>
      <CreateEventScreen />
      <FlashMessage position={"top"} />
    </>
  )
}
  1. You need to import showMessage in createEventScreen.js file.

so your createEventScreen.js file should look like this:

import { showMessage } from "react-native-flash-message"

{/* Create Event Button */}
<View style={styles.loginButton}>
  <TouchableOpacity
    style={styles.buttonTouchableOpacity}
    onPress={() => {
      showMessage({
      message: "Success",
      description: "The Event has been created",
      type: "success",
    });
    Actions.HomeScreen()
    }}>
    <Text style={styles.btnTextWhite}>Create Event</Text>
  </TouchableOpacity>
</View>

Upvotes: 1

Related Questions