Friday, November 23, 2018

REACT NATIVE AND HOW TO CREATE ALERTS

REACT NATIVE AND HOW TO CREATE ALERTS
In this chapter, we will understand how to create custom Alert component.

Image result for REACT NATIVE AND HOW TO CREATE ALERTS


Step 1: App.js

import React from 'react'
import AlertExample from './alert_example.js'

const App = () => {
   return (
      <AlertExample />
   )
}
export default App

Step 2: alert_example.js

We will create a button for triggering the showAlert function.
import React from 'react'
import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native'

const AlertExample = () => {
   const showAlert = () =>{
      Alert.alert(
         'You need to...'
      )
   }
   return (
      <TouchableOpacity onPress = {showAlert} style = {styles.button}>
         <Text>Alert</Text>
      </TouchableOpacity>
   )
}
export default AlertExample

const styles = StyleSheet.create ({
   button: {
      backgroundColor: '#4ba37b',
      width: 100,
      borderRadius: 50,
      alignItems: 'center',
      marginTop: 100
   }
})

Output

React Native Alert
When you click the button, you will see the following −
React Native Alert Button

Continue reading