@bayudev/react-native-modal-dialog
v0.0.3
Published
<a href="https://nodei.co/npm/@bayudev/react-native-modal-dialog/"><img src="https://nodei.co/npm/@bayudev/react-native-modal-dialog.png?downloads=true&downloadRank=true&stars=true"></a>
Downloads
3
Maintainers
Readme
React Native Modal Dialog
React Native Modal Dialog
Installation
npm i @bayudev/react-native-modal-dialog --save
# OR
yarn add @bayudev/react-native-modal-dialog
Usage
import { ReactNativeAlert } from "@bayudev/react-native-modal-dialog";
<ReactNativeAlert />;
import { StatusBar } from "expo-status-bar";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
import { ReactNativeAlert } from "@bayudev/react-native-modal-dialog";
export default function App() {
const [visible, setVisible] = useState(false);
const onConfirm = () => {
setVisible(false);
};
return (
<View style={styles.container}>
<ReactNativeAlert
visible={visible}
onVisible={setVisible}
message={
<>
<Text>React Native Alert !</Text>
</>
}
onConfirm={onConfirm}
/>
<Pressable
onPress={() => setVisible(true)}
style={{
width: "80%",
height: 50,
padding: 8,
borderRadius: 10,
backgroundColor: "blue",
}}
>
<Text
style={{
color: "white",
textAlign: "center",
fontSize: 22,
}}
>
Open Modal
</Text>
</Pressable>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
import { StatusBar } from "expo-status-bar";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
// Import here
import { ReactNativeDialog } from "@bayudev/react-native-modal-dialog";
export default function App() {
const [visible, setVisible] = useState(false);
const onConfirm = () => {
setVisible(false);
};
return (
<View style={styles.container}>
<ReactNativeDialog
visible={visible}
onVisible={setVisible}
message={
<>
<Text>React Native Dialog !</Text>
</>
}
onConfirm={onConfirm}
/>
<Pressable
onPress={() => setVisible(true)}
style={{
width: "80%",
height: 50,
padding: 8,
borderRadius: 10,
backgroundColor: "blue",
}}
>
<Text
style={{
color: "white",
textAlign: "center",
fontSize: 22,
}}
>
Open Dialog
</Text>
</Pressable>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
import { StatusBar } from "expo-status-bar";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
import { useState } from "react";
// Import here
import { ReactNativeDialogInput } from "@bayudev/react-native-modal-dialog";
export default function App() {
const [visible, setVisible] = useState(false);
const [comment, setComment] = useState("");
const onConfirm = () => {
setVisible(false);
};
/**
* Create Input for children
*/
const CustomInput = () => {
return (
<View style={{ padding: 15 }}>
<Text style={{ margin: 12, marginBottom: -18, color: "#000000" }}>
Comment
</Text>
<TextInput
onChangeText={setComment}
placeholder="add your comment here"
inputMode="text"
value={comment}
multiline
textAlignVertical="top"
style={{
height: 100,
margin: 12,
borderBottomWidth: 3,
borderBottomColor: "#000000",
color: "#FFFFFF",
fontSize: 22,
fontWeight: "700",
}}
/>
</View>
);
};
return (
<View style={styles.container}>
<ReactNativeDialogInput
children={<CustomInput />}
isTitle
title="React Native Dialog !"
titleFontSize={22}
titleColor="#000000"
titlePosition="center"
visible={visible}
onVisible={setVisible}
message={
<>
<Text>React Native Dialog !</Text>
</>
}
onConfirm={onConfirm}
backgroundColor="#FFF8E3"
/>
<Pressable
onPress={() => setVisible(true)}
style={{
width: "80%",
height: 50,
padding: 8,
borderRadius: 10,
backgroundColor: "blue",
}}
>
<Text
style={{
color: "white",
textAlign: "center",
fontSize: 22,
}}
>
Open Dialog Input
</Text>
</Pressable>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});