Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

React Native Alert with Image

Creating an alert with an image in React Native involves a few steps. Here’s a guide with examples on how to achieve this:

Setting Up Your React Native Environment

  1. Install React Native CLI: This can be done using npm with the command npm install -g react-native-cli.
  2. Create a New React Native Project: Use react-native init ProjectName to start a new project.
  3. Navigate to Your Project Directory: Change to your project directory with cd ProjectName.

Creating a Basic Alert

1.Import the Alert API:

Start by importing Alert from React Native.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { Alert, Button, View, StyleSheet } from 'react-native';
import { Alert, Button, View, StyleSheet } from 'react-native';
import { Alert, Button, View, StyleSheet } from 'react-native';
2.Define the Alert Function:

Create a function to display the alert

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const showAlert = () => {
Alert.alert("Alert Title", "This is an alert message");
};
const showAlert = () => { Alert.alert("Alert Title", "This is an alert message"); };
const showAlert = () => {
  Alert.alert("Alert Title", "This is an alert message");
};
3.Add a Button to Trigger the Alert:

Place a button in your component’s render method.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<Button title="Show Alert" onPress={showAlert} />
<Button title="Show Alert" onPress={showAlert} />
<Button title="Show Alert" onPress={showAlert} />

Creating a Custom Alert with an Image

1.Import Necessary Components:

Import Modal, View, Text, Pressable, StyleSheet, and Image from React Native.

2.Set Up State for Modal Visibility:

Use useState to manage the visibility of your custom modal.

3.Create a Modal with an Image:

Design your modal to include an image and style it as needed. Here’s a simplified version:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<Modal visible={modalVisible} transparent={true}>
<View style={styles.modalView}>
<Image source={{uri: 'image_url_here'}} style={styles.image} />
<Text style={styles.text}>This is a custom alert with an image</Text>
<Pressable onPress={() => setModalVisible(false)}>
<Text>Close</Text>
</Pressable>
</View>
</Modal>
<Modal visible={modalVisible} transparent={true}> <View style={styles.modalView}> <Image source={{uri: 'image_url_here'}} style={styles.image} /> <Text style={styles.text}>This is a custom alert with an image</Text> <Pressable onPress={() => setModalVisible(false)}> <Text>Close</Text> </Pressable> </View> </Modal>
<Modal visible={modalVisible} transparent={true}>
  <View style={styles.modalView}>
    <Image source={{uri: 'image_url_here'}} style={styles.image} />
    <Text style={styles.text}>This is a custom alert with an image</Text>
    <Pressable onPress={() => setModalVisible(false)}>
      <Text>Close</Text>
    </Pressable>
  </View>
</Modal>
4.Add Styles:

Define styles for your modal, image, and other components.

5.Trigger the Custom Alert:

Use a button or another event to change the modalVisible state, thus showing or hiding the custom alert.

Example of Custom Alert with react-native-awesome-alerts

1.Install the Package:

Run npm i react-native-awesome-alerts to install.

2.Import and Use AwesomeAlert:

In your component, import AwesomeAlert and use it to create a customized alert.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import AwesomeAlert from 'react-native-awesome-alerts';
<AwesomeAlert
show={showAlert}
title="Alert Title"
message="This is an awesome alert message"
closeOnTouchOutside={true}
closeOnHardwareBackPress={false}
showCancelButton={true}
showConfirmButton={true}
cancelText="No, cancel"
confirmText="Yes, delete it"
confirmButtonColor="#DD6B55"
onCancelPressed={() => {
this.hideAlert();
}}
onConfirmPressed={() => {
this.hideAlert();
}}
/>
import AwesomeAlert from 'react-native-awesome-alerts'; <AwesomeAlert show={showAlert} title="Alert Title" message="This is an awesome alert message" closeOnTouchOutside={true} closeOnHardwareBackPress={false} showCancelButton={true} showConfirmButton={true} cancelText="No, cancel" confirmText="Yes, delete it" confirmButtonColor="#DD6B55" onCancelPressed={() => { this.hideAlert(); }} onConfirmPressed={() => { this.hideAlert(); }} />
import AwesomeAlert from 'react-native-awesome-alerts';

<AwesomeAlert
  show={showAlert}
  title="Alert Title"
  message="This is an awesome alert message"
  closeOnTouchOutside={true}
  closeOnHardwareBackPress={false}
  showCancelButton={true}
  showConfirmButton={true}
  cancelText="No, cancel"
  confirmText="Yes, delete it"
  confirmButtonColor="#DD6B55"
  onCancelPressed={() => {
    this.hideAlert();
  }}
  onConfirmPressed={() => {
    this.hideAlert();
  }}
/>
3.Style and Customize:

You can customize the alert’s appearance, including button colors and text.

Conclusion

By following these steps, you can create both simple and customized alerts in your React Native application. The react-native-awesome-alerts package offers additional flexibility for more complex alerts.

Additional Resources

Leave a Comment