rn-custom-modal-components v1.0.3

React Native Custom Modal Component

React Native Swipe Button Component

Installation

npm i rn-custom-modal-components --save
# OR
yarn add rn-custom-modal-components
# OR
pnpm i rn-custom-modal-components

Usage

import { ReactNativeAlert } from "rn-custom-modal-components";

<ReactNativeAlert />

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",
  },
});