#textalignvertical | Explore Tumblr posts and blogs

makqcga · 6 years ago

Photo

How to Write HTML, HTML5 Tags, HTML5 Attributes - Absolute For Beginners [Lecture-2] What we will Learn in this video? 1- How to create HTML file? 2- How to write HTML? 3- Understanding HTML elements. 4- HTML attributes. WATCH VIDEO https://youtu.be/UG83oFmSlvM SUBSCRIBE MY CHANNEL & PRESS BELL ICON TO NEVER MISS ANY VIDEO https://www.youtube.com/user/makqcga/ --- *Its FREE for all specially those who can't afford expensive institutions*, So be serious to build your career. YOU CAN HELP! Hurry up! SUBSCRIBE MY CHANNEL press bell icon to get regular updates. Continue watch my videos till end and drop like and share Don't for get to give feedback in comment section. Thanks & Regards! Mr. MAKQ - Code Injector Sponsored by Nix Pixelz #html #makq #mrmakq #codeinjector #websitedesign #learnwebsite #structure #injector #carer #editors #htmlEditor #html5Structure #htmltags #learnHTML #CSSTextAlign #TextAlignCenter #TextAlignHorizontal #TextAlignVertical #usingCSSTextAlign #HTMLCSSTutorial #BeginnerHTMLCss #NixPixelz #code #codes #learn #programming #webdesign #design #css #seo #javascript #html5Tags #htmlAttributes #htmlElements #htmlEditor (at Abu Dhabi, United Arab Emirates) https://www.instagram.com/p/BypyuanAc--/?igshid=1e3wcegmdplgf

0 notes

skptricks · 6 years ago

Text

React Native Create Custom Alert Dialog Box

This tutorial explains how to create custom alert dialog box in react native application using Model component. React Native provide us pre build Alert dialog box to show alert messages on application screen but it has some limitation like user can't display images in dialog box. For that we need to create custom dialog box and in this example we are going to create similar dialog box using model component in react native application.

React Native Create Custom Alert Dialog Box

Lets see the below steps that helps to create custom alert dialog box in react native application with simple example. Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial. Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial. Step 3: Through react , react-native, react-native-torch packages import all required components.

import React, { Component } from 'react'; import { Text, StyleSheet, View, Modal, TouchableOpacity, Button, Alert } from 'react-native';

Step 4: create constructor block inside App component, which define state variable named as Alert_Visibility, which is used to Show and Hide the Modal(Alert Dialog).

constructor(props) { super(props); this.state = { Alert_Visibility: false }; }

Step 5: Create a function named as cancelAlertBox, This function is used to Show and Hide the Alert Dialog Box.

cancelAlertBox(visible) { this.setState({ Alert_Visibility: visible }); }

Step 6: Create a function named as okButton, which would call on OK button onPress event.

okButton = () => { Alert.alert("OK Button Clicked."); }

Step 7: create App component and place the below code inside the App component. Create a Modal component inside Root View, This would be Custom Alert Dialog Box. visible : This prop is used to show and hide the Modal using State. transparent : Makes the Modal background transparent.

True : The modal background is Transparent.

False : Modal background is not Transparent.

animationType : User can decide whether he wants to show modal with some special effects, below is its properties.

Slide : Modal slides from bottom to top with animation.

fade : Modal shows with fade in out effect.

none : Without any screen effect.

onRequestClose : It will override the back button in Android and hide Alert Dialog Box on back button press.

render() { return ( <View style={styles.container} > <Modal visible={this.state.Alert_Visibility} transparent={false} animationType={"fade"} onRequestClose={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} > <View style=> <View style={styles.MainAlertView}> <Text style={styles.AlertTitle}>Custom Alert Dialog Box Title.</Text> <View style= /> <Text style={styles.AlertMessage}> Are You Sure ?? </Text> <View style= /> <View style=> <TouchableOpacity style={styles.buttonStyle} onPress={this.okButton} activeOpacity={0.7} > <Text style={styles.TextStyle}> OK </Text> </TouchableOpacity> <View style= /> <TouchableOpacity style={styles.buttonStyle} onPress={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} activeOpacity={0.7} > <Text style={styles.TextStyle}> CANCEL </Text> </TouchableOpacity> </View> </View> </View> </Modal> <Button onPress={() => { this.cancelAlertBox(true) }} color="#f73378" title="Custom Alert Dialog Box" /> </View> ); }

Step 8: Apply the below style sheet design.

const styles = StyleSheet.create( { container: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 20 }, MainAlertView: { alignItems: 'center', justifyContent: 'center', backgroundColor: "#1769aa", height: 200, width: '90%', borderColor: '#fff', }, AlertTitle: { fontSize: 25, color: "#fff", textAlign: 'center', padding: 10, height: '28%' }, AlertMessage: { fontSize: 22, color: "#fff", textAlign: 'center', textAlignVertical: 'center', padding: 10, height: '40%' }, buttonStyle: { width: '50%', height: '100%', justifyContent: 'center', alignItems: 'center' }, TextStyle: { color: '#fff', textAlign: 'center', fontSize: 22, marginTop: -5 } });

Complete Source Code for App.js

Lets see the complete source code that helps to create custom alert dialog box in react native application with simple example.

import React, { Component } from 'react'; import { Text, StyleSheet, View, Modal, TouchableOpacity, Button, Alert } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { Alert_Visibility: false }; } cancelAlertBox(visible) { this.setState({ Alert_Visibility: visible }); } okButton = () => { Alert.alert("OK Button Clicked."); } render() { return ( <View style={styles.container} > <Modal visible={this.state.Alert_Visibility} transparent={false} animationType={"fade"} onRequestClose={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} > <View style=> <View style={styles.MainAlertView}> <Text style={styles.AlertTitle}>Custom Alert Dialog Box Title.</Text> <View style= /> <Text style={styles.AlertMessage}> Are You Sure ?? </Text> <View style= /> <View style=> <TouchableOpacity style={styles.buttonStyle} onPress={this.okButton} activeOpacity={0.7} > <Text style={styles.TextStyle}> OK </Text> </TouchableOpacity> <View style= /> <TouchableOpacity style={styles.buttonStyle} onPress={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} activeOpacity={0.7} > <Text style={styles.TextStyle}> CANCEL </Text> </TouchableOpacity> </View> </View> </View> </Modal> <Button onPress={() => { this.cancelAlertBox(true) }} color="#f73378" title="Custom Alert Dialog Box" /> </View> ); } } const styles = StyleSheet.create( { container: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 20 }, MainAlertView: { alignItems: 'center', justifyContent: 'center', backgroundColor: "#1769aa", height: 200, width: '90%', borderColor: '#fff', }, AlertTitle: { fontSize: 25, color: "#fff", textAlign: 'center', padding: 10, height: '28%' }, AlertMessage: { fontSize: 22, color: "#fff", textAlign: 'center', textAlignVertical: 'center', padding: 10, height: '40%' }, buttonStyle: { width: '50%', height: '100%', justifyContent: 'center', alignItems: 'center' }, TextStyle: { color: '#fff', textAlign: 'center', fontSize: 22, marginTop: -5 } });

Screenshot :

This is all about React Native Create Custom Alert Dialog Box. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

via Blogger https://ift.tt/2YPw0O1

#android #Mobile Application Development #React Native

0 notes