npm i rn-custom-modal-components --save
# OR
yarn add rn-custom-modal-components
# OR
pnpm i rn-custom-modal-components
import { ReactNativeAlert } from "rn-custom-modal-components";
<ReactNativeAlert />
isTitle?: boolean; visible: boolean; onVisible: any; onConfirm: () => void; title?: string; titleColor?: string; titlePosition?: "center" | "auto" | "left" | "right" | "justify"; message: string | ReactNode; messageColor?: string; actionText?: string; backgroundColor?: string; buttonColor?: string; buttonTextColor?: string;
isTitle?: boolean; visible: boolean; onVisible: any; onConfirm: () => void; title?: string; titleColor?: string; titlePosition?: "center" | "auto" | "left" | "right" | "justify"; titleFontSize?: number; message: string | ReactNode; messageColor?: string; messageFontSize?: number; actionCancelText?: string; actionConfirmText?: string; backgroundColor?: string; buttonCancelColor?: string; buttonTextCancelColor?: string; buttonConfirmColor?: string; buttonTextConfirmColor?: string;
isTitle?: boolean; isMessage?: boolean; visible: boolean; onVisible: any; onConfirm: () => void; title?: string; titleColor?: string; titleFontSize?: number; titlePosition?: "center" | "auto" | "left" | "right" | "justify"; message?: string | ReactNode; messageColor?: string; messageFontSize?: number; messagePosition?: "center" | "auto" | "left" | "right" | "justify"; actionCancelText?: string; actionConfirmText?: string; backgroundColor?: string; buttonCancelColor?: string; buttonTextCancelColor?: string; buttonConfirmColor?: string; buttonTextConfirmColor?: string; children: ReactNode;
import { StatusBar } from "expo-status-bar";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
import { ReactNativeAlert } from "rn-custom-modal-components";
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 { ReactNativeDialog } from "rn-custom-modal-components";
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 Input
</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 { ReactNativeDialogInput } from "rn-custom-modal-components";
export default function App() {
const [visible, setVisible] = useState(false);
const onConfirm = () => {
setVisible(false);
};
const CustomInput = () => {
return (
<View style={{ padding: 15, marginBottom: 10 }}>
<Text style={{ margin: 12, marginBottom: -18, color: "#000000" }}>
Comment
</Text>
<TextInput
placeholder="add your comment here..."
textAlignVertical="top"
multiline
style={{
height: 100,
margin: 12,
borderBottomWidth: 3,
borderBottomColor: "#000000",
color: "#FFFFFF",
fontSize: 22,
fontWeight: "700",
}}
/>
</View>
);
};
return (
<View style={styles.container}>
<ReactNativeDialogInput
visible={visible}
onVisible={setVisible}
isMessage
messagePosition="center"
messageFontSize={22}
message={
<>
<Text>React Native Dialog !</Text>
</>
}
onConfirm={onConfirm}
children={<CustomInput />}
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",
},
});