React Native Dialog Modal Component and Usage

_screenshot.png

App.tsx

import React, { useState } from "react";
import { ViewStyle, Button } from "react-native";
import Modal from "../components/Modal";

export const App: React.FC = () => {
  const [isShowing, setShowing] = useState(false);
  const [text, onChangeText] = useState("");

  return (
    <>
    <Button onPress={() => setShowing(true)} title="Open Dialog"></Button>

      {isShowing &&
        <Modal title="Send Feedback" message="Please send your feedback:"
          okText={'Send'}
          cancelText={'Cancel'}
          handleOk={() => { console.log(text); setShowing(false); }}
          handleCancel={() => { console.log(text); setShowing(false); }}
          unMountMe={() => setShowing(false)} >
          <View style={styles.editTextContainer}>
            <TextInput onChangeText={text => onChangeText(text)}
              autoFocus
              style={styles.editText} />
          </View>
        </Modal>
      }
    </>
  );
};

const styles = StyleSheet.create({
  editTextContainer: {
    paddingHorizontal: 24,
    marginBottom: 20,
  },
  editText: {
    padding: 0,
    borderBottomWidth: 2,
    borderBottomColor: colors.primary,
    fontSize: 18
  },
})


export default App;

Modal.tsx

import React from "react";
import { View, StyleSheet, Text, TouchableOpacity, GestureResponderEvent, ViewStyle, TextStyle, TextInput } from "react-native";
import colors from "../res/styles/colors";


export type Props = {
  title?: string;
  message?: string;
  okText?: string;
  cancelText?: string;
  showEdit?: boolean;
  handleOk?: (event: GestureResponderEvent) => void;
  handleCancel?: (event: GestureResponderEvent) => void;
  unMountMe: (event: GestureResponderEvent) => void;
}

type Style = {
  backdropContainer: ViewStyle;
  dialogContainer: ViewStyle;
  textContainer: TextStyle;
  title: TextStyle;
  message: ViewStyle;
  buttonContainer: ViewStyle;
  okButtonContainer: ViewStyle;
  cancelButtonContainer: ViewStyle;
  showing: ViewStyle;
  notShowing: ViewStyle;
  cancelText: TextStyle;
  okText: TextStyle;
}

export const Modal: React.FC<Props> = (props) => {
  return (
    <View style={styles.backdropContainer} >
      <TouchableOpacity onPress={props.unMountMe} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }} />
      <View style={styles.dialogContainer}>
        <View style={styles.textContainer}>
          <Text style={styles.title}>{props.title}</Text>
          <Text style={styles.message}>{props.message}</Text>
        </View>
        {props.children}
        <View style={styles.buttonContainer}>
          {props.handleCancel &&
            <TouchableOpacity onPress={props.handleCancel} style={styles.cancelButtonContainer}>
              <Text style={styles.cancelText}>{props.cancelText == null ? 'CANCEL' : props.cancelText}</Text>
            </TouchableOpacity>
          }
          {props.handleOk &&
            <TouchableOpacity onPress={props.handleOk} style={styles.okButtonContainer}>
              <Text style={styles.okText}>{props.okText == null ? 'OK' : props.okText}</Text>
            </TouchableOpacity>
          }
        </View>
      </View>
    </View>

  );
};

const styles = StyleSheet.create<Style>({
  backdropContainer: {
    position: "absolute",
    height: "100%",
    width: "100%",
    backgroundColor: "#00000066",
    justifyContent: "center",
    alignItems: "center"
  },
  dialogContainer: {
    width: 300,
    backgroundColor: "#fff",
    borderRadius: 4
  },
  
  textContainer: {
    padding: 24,
  },
  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',
    alignItems: 'center',
    height: 36,
    paddingHorizontal: 8,
    minWidth: 64
  },
  cancelButtonContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 36,
    paddingHorizontal: 8,
    marginStart: 8,
    minWidth: 64
  },
  showing: {
    display: 'flex'
  },
  notShowing: {
    display: 'none'
  },
  cancelText: {
    textTransform: 'uppercase',
    fontWeight: 'bold',
    color: colors.primary
  },
  okText: {
    textTransform: 'uppercase',
    fontWeight: 'bold',
    color: colors.primary
  }
});

export default Modal;