React Native custom alert

In react native, alert (Alert.alert(…….)) has no properties for font-size,height and width etc. I made a custom alert by using Dialog and pass props, which may help for different devices (android scanner, tablet, and other devices). Alert font size is not good when used on multiple devices of android according to width and height.
For this first of all install following dependencies.

npm install --save react-native-popup-dialog

ResponsiveFontSize.js

import { Dimensions, Platform, PixelRatio } from ‘react-native’;
export default function normalize (size) {
const {
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
} = Dimensions.get(‘window’);
// based on iphone 5s’s scale
const scale = SCREEN_WIDTH / 320;
const newSize = size * scale
if (Platform.OS === ‘ios’) {
return Math.round(PixelRatio.roundToNearestPixel(newSize))
} else {
return Math.round(PixelRatio.roundToNearestPixel(newSize)) — 2
}
}

Make a separate

CustomAlert .js

import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Text,TouchableOpacity,Dimensions,ScrollView } from ‘react-native’; 
import ResponsiveFontSize from ‘./ResponsiveFontSize’;
import PropTypes from ‘prop-types’;
// import Dialog from “react-native-dialog”;
import Dialog, {
 DialogTitle,
 DialogContent,
 DialogFooter,
 DialogButton,
 SlideAnimation,
 ScaleAnimation,
} from ‘react-native-popup-dialog’;
const screenHeight = Math.round(Dimensions.get(‘window’).height); 
const Screenwidth = Dimensions.get(“window”).width;
const Screenheight = Dimensions.get(“window”).height; 
class Alertfunction extends Component {
 
 constructor(props) 
 {
 super(props);
this.state = {
 dialogVisible : false, 
 okPress:false,
 } 
 }
 render() {
 this.showDialog();
 return (
<Dialog
 onTouchOutside={() => 
 {
 this.setState({ dialogVisible: true });
 }}
 width={0.9}
 visible={this.state.dialogVisible}
 width={parseInt(ResponsiveFontSize(200))}
 dialogAnimation={new ScaleAnimation()}
 onDismiss={() => {
 if(this.props.onDismissAction!= null)
 {
 this.props.onDismissAction();
 }
 
 }}
 onHardwareBackPress={() => 
 {
 console.log(‘onHardwareBackPress’);
 this.setState({ dialogVisible: true });
 return true;
 }}
 dialogTitle=
 {
 <DialogTitle
 title={this.props.Title}
 align=”center”
 textStyle={{fontSize:parseInt(ResponsiveFontSize(14))}} 
 style={this.props.headerClass}
 hasTitleBar={false}
 />
 }
 footer=
 {
 <DialogFooter>
 {
 this.props.CancelButtonAction != null ?
 <DialogButton
 text=”CANCEL”
 bordered
 textStyle={{color:”black”,fontSize:parseInt(ResponsiveFontSize(14))}}
 onPress={()=>this.props.CancelButtonAction()}/>
 :
 <Text></Text>
 }
 {
 this.props.OkButtonAction != null ?
 <DialogButton
 text=”OK”
 bordered
 textStyle={{color:”black”,fontSize:parseInt(ResponsiveFontSize(14))}}
 onPress={()=>this.props.OkButtonAction()}
 key=”button-2"
 />
 :
 <Text></Text>
 }
 
 </DialogFooter>
 }
 >
 
 <DialogContent style={styles.ModalContainer}>
 <View > 
 
 <ScrollView >
 <Text style={this.props.bodyClass}>{this.props.Body} </Text> 
 </ScrollView> 
 </View>
 </DialogContent>
 
 
 
 </Dialog>
);
 }
 }
export default Alertfunction;
Alertfunction.propTypes =
{
 Title: PropTypes.string,
 Body:PropTypes.string,
 Visible: PropTypes.bool,
 Type:PropTypes.string,
 OkButtonAction:PropTypes.func,
 CancelButtonAction:PropTypes.func,
 onDismissAction:PropTypes.func,
 headerClass:PropTypes.object,
 bodyClass:PropTypes.object,
 btnClass:PropTypes.object,
 
}
 
Alertfunction.defaultProps =
{
 Title: “ “,
 Type:” “,
 Body:” “, 
 Visible: false,
 headerClass:null,
 bodyClass:null,
 btnClass:null,
 onDismissAction:null,
}
 
const styles = StyleSheet.create({
 
 MainContainer :{
 
 flex:1,
 paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
 alignItems: ‘center’,
 justifyContent: ‘center’,
 
 },
 ModalContainer:
 {
 },
landScapModalContainer:
 {
 height:parseInt(ResponsiveFontSize(50)),
 },
 
});

The following piece of code can be added in view anywhere and can be handle by state props and directly add true or false to its visible props.

App.js

import Alertfunction from ‘./CustomAlert’;
import React, {Component,PropTypes } from 'react';
import
{
View,
StyleSheet,
YellowBox,
TouchableOpacity,
ToastAndroid,
Text,
Platform ,
StatusBar,
Dimensions,
BackHandler,
FlatList,
ScrollView,
TextInput,
UIManager,
findNodeHandle
} from 'react-native';
const Screenwidth = Dimensions.get("window").width;
const Screenheight = Dimensions.get("window").height;
class App extends Component {
constructor(props)
{
super(props);
this.state=
{
AlertBox:[
{
alertVisiblity : false,
Title:"Default Name",
Body:"Default Body",
//////////////////////////// AlertBox hard coded properties, only overide when we needed
btnCancelEvent:null,
btnOnDismissEvent:null,
btnOkEvent:this.OkClick,
headerClass:Screenwidth > Screenheight ?styles.landscapAlertheaderClass:styles.AlertheaderClass,
bodyClass:Screenwidth > Screenheight ?styles.LandscapAlertbodyClass:styles.AlertbodyClass,
btnClass:styles.AlertbtnClass,
}
],
}
}
render() {
return (
<View>
<Alertfunction
Title={this.state.AlertBox.Title}
Body={this.state.AlertBox.Body}
Visible = {this.state.AlertBox.alertVisiblity}
OkButtonAction = {this.state.AlertBox.btnOkEvent}
CancelButtonAction = {this.state.AlertBox.btnCancelEvent}
headerClass={this.state.AlertBox.headerClass}
bodyClass={this.state.AlertBox.bodyClass}
btnClass={this.state.AlertBox.btnClass}
onDismissAction={this.state.AlertBox.btnOnDismissEvent}
/>
</View>
)}
export default App;
const styles= StyleSheet.create(
{
container:
{
flex:1,
},
TextContainer:
{
alignItems:"flex-start",
paddingTop:10,
color:"rgb(0,142,234)",
paddingLeft:10,
},
container1:
{
margin: 8,
marginTop: 24,
},
SuccessAlertheaderClass:
{
paddingTop:10,
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(12)),
backgroundColor:"#90ee90",
},
SuccesslandscapAlertheaderClass:
{
paddingTop:10,
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(22)),
backgroundColor:"#90ee90",
},
AlertheaderClass:
{
paddingTop:10,
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(12)),
backgroundColor:"red",
},
landscapAlertheaderClass:
{
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(22)),
backgroundColor:"red",
},
AlertbodyClass:
{
fontSize:parseInt(ResponsiveFontSize(14)),
paddingTop:parseInt(ResponsiveFontSize(18))
},
LandscapAlertbodyClass:
{
fontSize:parseInt(ResponsiveFontSize(10)),
paddingTop:parseInt(ResponsiveFontSize(18))
},
AlertbtnClass:
{
fontSize:parseInt(ResponsiveFontSize(14)),
},
FPA_AlertheaderClass:
{
paddingTop:10,
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(12)),
backgroundColor:"#90ee90",
},
FPA_landscapAlertheaderClass:
{
paddingTop:10,
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(22)),
backgroundColor:"#90ee90",
},
WarnAlertheaderClass:
{
paddingTop:10,
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(12)),
backgroundColor:"#FFCC00",
},
WarnlandscapAlertheaderClass:
{
paddingTop:10,
fontSize:parseInt(ResponsiveFontSize(18)),
height:parseInt(ResponsiveFontSize(22)),
backgroundColor:"#FFCC00",
},
}
);

Here, custom styling class can be passed to the alert. Also, it can pass the function and parameters that are required according to the program. Here are some screenshots.

Logout alert

Error case

Success Case

Conclusion

By using this custom alert, we can pass any properties like function, bool type props, styling classes , font size of content etc.