I am developing react-native app and trying to make a custom alert method (like Alert. alert() as given in Official site of react-native). React-native alert has no styling property for Font Size and back-ground Color, alert is very small when i'm using on android tab but it's work fine while on using in android scanner and mobile.
enter code here
import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native';
// import PropTypes from 'prop-types';
// import Dialog from "react-native-dialog";
import Alertfunction from './src/CustomAlert'
export default class App extends Component{
render() {
return (
<Alertfunction Title={"Alert"} FontSize = {30} FontColor= '#FF9800' Visible={true}/>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
alignItems: 'center',
justifyContent: 'center',
}
});
customAlert.js
import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import Dialog from "react-native-dialog";
class Alertfunction extends Component {
state = {
dialogVisible: this.props.Visible
};
showDialog = () => {
this.setState({ dialogVisible: this.props.Visible });
};
handleCancel = () => {
this.setState({ dialogVisible: false });
// this.props.Visible=false;
};
handleDelete = () => {
this.setState({ dialogVisible: false });
//this.props.Visible=false;
};
render() {
return (
<View>
<TouchableOpacity onPress={this.showDialog}>
<Text >{this.props.Title}</Text>
</TouchableOpacity>
<Dialog.Container visible={this.state.dialogVisible}>
<Dialog.Title style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>{this.props.Title}</Dialog.Title>
<Dialog.Description style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>
Do you want to delete this account? You cannot undo this action.
</Dialog.Description>
<Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="Cancel" onPress={this.handleCancel} />
<Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="ok" onPress={this.handleDelete} />
</Dialog.Container>
</View>
);
}
}
export default Alertfunction;
Alertfunction.propTypes =
{
Title: PropTypes.string,
FontSize: PropTypes.number,
FontColor: PropTypes.string,
Visible: PropTypes.bool,
}
Alertfunction.defaultProps =
{
Title: "Default Name",
FontColor: "#00E676",
FontSize: 15,
Visible:false
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
alignItems: 'center',
justifyContent: 'center',
}
});