React Native Custom Modal Component
React Native Swipe Button Component
Installation
npm i rn-custom-modal-components --save
yarn add rn-custom-modal-components
pnpm i rn-custom-modal-components
Usage
import { ReactNativeAlert } from "rn-custom-modal-components";
<ReactNativeAlert />
Screenshots
These screenshots are from demo app under examples folder in the repo
Component properties for Alert Component
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;
Component properties for Dialog Component
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;
Component properties for Dialog Input Component
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;
Code for above screenshots
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",
},
});