Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

How to use custom react-native alert?

Published by: Muhammad Saqlain | October 22, 2020
SCROLL AND BE AMAZED!
Home > React Native > How to use custom react-native alert?

React native provides a variety of core components that we can use readily while creating screens for application. Developers can easily create custom components on top of the core components.

 The Alert component opens an alert dialog with the sent message and title. An Alert component is used if you want to make sure the user reads the message. It takes away the focus of the screen to alert box and forces the user to read the message.

Alert.alert(
 'Dummy Title For Alert',
 'Dummy Message For Alert',
 [
   {
     text: 'Cancel',
     onPress: () => console.log('Cancel Button Pressed'),
     style: 'cancel',
   },
   {text: 'OK', onPress: () => console.log('OK Button Pressed')},
 ],
 {cancelable: false},
);

By default the OK button is displayed, however, the component provides a list of buttons with respective onPress callbacks. In Android, you can use only three buttons with the concept of positive, negative, and neutral options. In IOS you can use more than three buttons with the style which is one of default, destructive or cancel.

React Native Alert does not support custom styling and animations. If your requirements for the same, we recommend using the React Native Modal.

React native Modal can be used as an alert also and it has more functionalities, animations, and styling options as compared to the react-native alert component. In our previous blog, we covered React native Modal, you may find it useful.

     <Modal
         transparent={true}
         visible={this.state.visible}
         animationIn="slideInLeft"
         animationOut="slideOutRight">
         <View
           style={{
             backgroundColor: 'rgba(0,0,0,0.2)',
             alignItems: 'center',
             justifyContent: 'center',
             flex: 1,
           }}>
           <View
             style={{
               width: '90%',
               backgroundColor: 'white',
               padding: 22,
               justifyContent: 'center',
               alignItems: 'center',
               borderRadius: 4,
               borderColor: 'rgba(0, 0, 0, 0.1)',
             }}>
             <Text>Hi, This is dummy alert!</Text>
             <Button
               onPress={() => { this.setState({ visible: false }) }}
               title="Close"
             />
           </View>
         </View>
       </Modal>

You can customize the number of buttons, style header, and body & also add animations as per your need. Modal offers several events which are called when a modal shows or hides.

If your requirement is of simple intimating messages for users you can readily use react native alert. If you need to show an animated alert with custom buttons I recommend using react native modal.

Have I missed something? Please feel free to post in the comments.


About msaqlain

A hardworking and dedicated individual, determined on the road to success, ever ready to take on challenges and accomplish what I set out to achieve.

Newsletter

Search

Archives

  • December 2023
  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Exploring Flutter Navigation: From Basics to Advanced Routes
  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous How To Find Angel Investors For Startup Apps That Make Money
Next Leaflet: An Alternative to React Google Maps with Search Functionality
Schedule an Appointment with our Mobile App Development Expert
Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

Folio3 Tower, Plot 26, Block B, SMCH Society, Main Shahrah-e-Faisal, Karachi.

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore.

Tel: +92-21-3432 3721-4 

© 2025, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f Linkedin-in Instagram

Get a free app audit

[contact-form-7 id="3548" title="Float Banner Form"]