Skip to content

Instantly share code, notes, and snippets.

@ozcanzaferayan
Last active March 6, 2020 07:30
Show Gist options
  • Save ozcanzaferayan/4c7b4d5374f66d53124b1d20ceba3c5d to your computer and use it in GitHub Desktop.
Save ozcanzaferayan/4c7b4d5374f66d53124b1d20ceba3c5d to your computer and use it in GitHub Desktop.
Simple Dialog for React Native and React Native Web
import React, { useState } from "react";
import { View, StyleSheet, Button, Text, TouchableOpacity } from "react-native";
export const App = () => {
const [isShowing, setShowing] = useState(false);
const toggleDialog = () => {
setShowing(!isShowing);
}
return (
/* Main Container */
<View style={styles.mainContainer}>
<Button onPress={toggleDialog} title="Open Dialog"></Button>
{/* Backdrop Container */}
{
isShowing &&
<View style={styles.backdropContainer}>
{/* Dialog Container */}
<View style={styles.dialogContainer}>
{/* Text Container */}
<View style={styles.textContainer}>
<Text style={styles.title}>Alert</Text>
<Text style={styles.message}>Are you sure?</Text>
</View>
{/* Button Container */}
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={toggleDialog} style={styles.okButtonContainer}>
<Text>OK</Text>
</TouchableOpacity>
<TouchableOpacity onPress={toggleDialog} style={styles.cancelButtonContainer}>
<Text>CANCEL</Text>
</TouchableOpacity>
</View>
</View>
</View>
}
</View>
);
};
const styles = StyleSheet.create({
mainContainer: {
height: '100%',
width: '100%',
},
backdropContainer: {
position: "absolute",
height: "100%",
width: "100%",
backgroundColor: "#00000066",
justifyContent: "center",
alignItems: "center",
},
dialogContainer: {
width: 300,
backgroundColor: "#fff",
borderRadius: 4
},
textContainer: {
padding: 24,
paddingBottom: 20
},
title: {
fontSize: 20,
marginBottom: 10,
fontWeight: "500"
},
message: {
fontSize: 16,
color: "#666",
fontWeight: "300"
},
buttonContainer: {
flexDirection: "row",
justifyContent: "flex-end",
padding: 8
},
okButtonContainer: {
justifyContent: "center",
height: 36,
paddingHorizontal: 8
},
cancelButtonContainer: {
justifyContent: "center",
height: 36,
paddingHorizontal: 8,
marginStart: 8
},
showing: {
display: 'flex'
},
notShowing: {
display: 'none'
},
});
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment