react-native-customized-modal

React Native Customized Modal

npm i react-native-customized-modal --save

import CustomizedModal from 'react-native-customized-modal';

Screenshots

1. Modal with buttons
   
2. Modal with labels
   
3. Modal with input
   
4. Modal with vertical buttons
   
5. Modal with title,subtitle,small label and buttons
   
6. Modal with 3 input fields(with validation)
   
   

Component Properties

animation: PropTypes.string,

options: PropTypes.bool,

showButton1: PropTypes.bool,

showButton2: PropTypes.bool,

disableOutSideTouch: PropTypes.bool,

modalVisible: PropTypes.bool.isRequired,

input: PropTypes.bool,

labels: PropTypes.bool,

label1: PropTypes.string,

label2: PropTypes.string,

headerTitle: PropTypes.string,

onRequestClose: PropTypes.func,

fontFamily: PropTypes.string,

fontFamilyBold: PropTypes.string,

label1Color: PropTypes.string,

label2Color: PropTypes.string,

smallLabelColor: PropTypes.string,

smallLabel: PropTypes.string,

verticalButtons: PropTypes.bool,

modalBackgroundColor: PropTypes.string,

input1: PropTypes.bool,

input2: PropTypes.bool,

inputProps: PropTypes.exact({ label: PropTypes.string.isRequired, labelColor: PropTypes.string, keyboardType: PropTypes.string, placeholder: PropTypes.string, multiline: PropTypes.number, placeholderTextColor: PropTypes.string, requiredErrorMessage: PropTypes.string, pattern: PropTypes.string, patternErrorMessage: PropTypes.string, maxLength: PropTypes.number, maxLengthErrorMessage: PropTypes.string, }),

input1Props: PropTypes.exact({ label: PropTypes.string.isRequired, labelColor: PropTypes.string, keyboardType: PropTypes.string, placeholder: PropTypes.string, multiline: PropTypes.number, placeholderTextColor: PropTypes.string, requiredErrorMessage: PropTypes.string, pattern: PropTypes.string, patternErrorMessage: PropTypes.string, maxLength: PropTypes.number, maxLengthErrorMessage: PropTypes.string, }),

input2Props: PropTypes.exact({ label: PropTypes.string.isRequired, labelColor: PropTypes.string, keyboardType: PropTypes.string, placeholder: PropTypes.string, multiline: PropTypes.number, placeholderTextColor: PropTypes.string, requiredErrorMessage: PropTypes.string, pattern: PropTypes.string, patternErrorMessage: PropTypes.string, maxLength: PropTypes.number, maxLengthErrorMessage: PropTypes.string, }),

errorTextColor: PropTypes.string,

button1Props: PropTypes.exact({ title: PropTypes.string.isRequired, backgroundColor: PropTypes.string, borderColor: PropTypes.string, onPress: PropTypes.func, borderRadius: PropTypes.number, }),

button2Props: PropTypes.exact({ title: PropTypes.string.isRequired, backgroundColor: PropTypes.string, textColor: PropTypes.string, onPress: PropTypes.func, borderRadius: PropTypes.number, width: PropTypes.number, }),

headerTitleColor: PropTypes.string,

Code for above screenshots

import React, {useState} from 'react';

import {View} from 'react-native';

import {styles} from './styles';

import {Label} from 'src/component';
import {Color} from '../../../utils/Color';
import CustomizedModal from 'react-native-customized-modal';

const CustomizedModalDemo = props => {
  const [verticalButtonsModalVisible, setVerticalButtonsModalVisible] =
    useState(false);
  const [inputModalVisible, setInputModalVisible] = useState(false);
  const [horzButtonsModalVisible, setHorzButtonsModalVisible] = useState(false);
  const [smallLabelModalVisible, setSmallLabelModalVisible] = useState(false);
  const [labelsModalVisible, setLabelsModalVisible] = useState(false);
  const [optionsModalVisible, setOptionsModalVisible] = useState(false);
  const [input1ModalVisible, setInput1ModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Label
        style={styles.labelStyle}
        color={Color.BLACK}
        onPress={() =>
          setVerticalButtonsModalVisible(!verticalButtonsModalVisible)
        }>
        {'View Vertical Button Modal'}
      </Label>
      <CustomizedModal
        modalVisible={verticalButtonsModalVisible}
        labels
        options={false}
        label1={'Title'}
        label2={'Subtitle'}
        label1Color={Color.PRIMARY1}
        label2Color={Color.SHOT_COLOR}
        button1Props={{
          title: 'Cancel',
          onPress: () => {
            setVerticalButtonsModalVisible(!verticalButtonsModalVisible);
          },
          borderColor: Color.TEXT_PLACEHOLDER,
          backgroundColor: Color.WHITE,
        }}
        button2Props={{
          title: 'Okay',
          onPress: () => {
            setVerticalButtonsModalVisible(!verticalButtonsModalVisible);
          },
          backgroundColor: Color.PRIMARY1,
          textColor: Color.WHITE,
        }}
        onRequestClose={() =>
          setVerticalButtonsModalVisible(!verticalButtonsModalVisible)
        }
        verticalButtons
      />
      <Label
        style={styles.labelStyle}
        color={Color.BLACK}
        onPress={() => setInputModalVisible(!inputModalVisible)}>
        {'View Input Modal'}
      </Label>
      <CustomizedModal
        modalVisible={inputModalVisible}
        input
        inputProps={{
          label: 'Name',
          requiredErrorMessage: 'Enter your validation message',
        }}
        button1Props={{
          title: 'Cancel',
          onPress: () => {
            setInputModalVisible(!inputModalVisible);
          },
          borderColor: Color.TEXT_PLACEHOLDER,
          backgroundColor: Color.WHITE,
        }}
        button2Props={{
          title: 'Okay',
          onPress: ({input}) => {  
            // here you'll get values          
            console.log('input ', input);
            setInputModalVisible(!inputModalVisible);
          },
          backgroundColor: Color.PRIMARY1,
          textColor: Color.WHITE,
        }}
        onRequestClose={() => setInputModalVisible(!inputModalVisible)}
      />
      <Label
        style={styles.labelStyle}
        color={Color.BLACK}
        onPress={() => setHorzButtonsModalVisible(!horzButtonsModalVisible)}>
        {'View Horizontal Buttons Modal'}
      </Label>
      <CustomizedModal
        modalVisible={horzButtonsModalVisible}
        options={false}
        labels
        label1={'Title'}
        label2={'Subtitle'}
        button1Props={{
          title: 'No',
          onPress: () => {
            setHorzButtonsModalVisible(!horzButtonsModalVisible);
          },
          borderColor: Color.TEXT_PLACEHOLDER,
          backgroundColor: Color.WHITE,
        }}
        button2Props={{
          title: 'Yes',
          onPress: () => {
            setHorzButtonsModalVisible(!horzButtonsModalVisible);
          },
          backgroundColor: Color.PRIMARY1,
          textColor: Color.WHITE,
        }}
        onRequestClose={() =>
          setHorzButtonsModalVisible(!horzButtonsModalVisible)
        }
      />

      <Label
        style={styles.labelStyle}
        color={Color.BLACK}
        onPress={() => setSmallLabelModalVisible(!smallLabelModalVisible)}>
        {'View Small Label Modal'}
      </Label>
      <CustomizedModal
        modalVisible={smallLabelModalVisible}
        options={false}
        labels
        label1={'Title'}
        label2={'Subtitle'}
        button1Props={{
          title: 'No',
          onPress: () => {
            setSmallLabelModalVisible(!smallLabelModalVisible);
          },
          borderColor: Color.TEXT_PLACEHOLDER,
          backgroundColor: Color.WHITE,
        }}
        button2Props={{
          title: 'Yes',
          onPress: () => {
            setSmallLabelModalVisible(!smallLabelModalVisible);
          },
          backgroundColor: Color.PRIMARY1,
          textColor: Color.WHITE,
        }}
        onRequestClose={() =>
          setSmallLabelModalVisible(!smallLabelModalVisible)
        }
        smallLabel={'Give information'}
        disableOutSideTouch
      />

      <Label
        style={styles.labelStyle}
        color={Color.BLACK}
        onPress={() => setLabelsModalVisible(!labelsModalVisible)}>
        {'View Labels Modal'}
      </Label>
      <CustomizedModal
        modalVisible={labelsModalVisible}
        options={false}
        labels
        label1={'Enter your Title'}
        label2={'Enter your Subtitle'}
        onRequestClose={() => setLabelsModalVisible(!labelsModalVisible)}
        showButton1={false}
        showButton2={false}
      />

      <Label
        style={styles.labelStyle}
        color={Color.BLACK}
        onPress={() => setOptionsModalVisible(!optionsModalVisible)}>
        {'View Options Modal'}
      </Label>
      <CustomizedModal
        modalVisible={optionsModalVisible}
        options
        headerTitle={'Header Title'}
        headerTitleColor={Color.PRIMARY1}
        label1={'Enter your Subtitle'}
        onRequestClose={() => setOptionsModalVisible(!optionsModalVisible)}
        showButton1={false}
        showButton2={false}
      />

      <Label
        style={styles.labelStyle}
        color={Color.BLACK}
        onPress={() => setInput1ModalVisible(!input1ModalVisible)}>
        {'View Input 1 Modal'}
      </Label>
      <CustomizedModal
        modalVisible={input1ModalVisible}
        options={false}
        onRequestClose={() => setInput1ModalVisible(!input1ModalVisible)}
        input
        inputProps={{
          label: 'Name',
          placeholder: 'Enter name',
          labelColor: Color.PRIMARY1,
          requiredErrorMessage: 'Please enter name',
        }}
        input1
        input1Props={{
          placeholder: 'Enter email',
          label: 'Email',
          labelColor: Color.PRIMARY1,
          requiredErrorMessage: 'Please enter email',
        }}
        input2
        input2Props={{
          placeholder: 'Enter description',
          label: 'Description',
          labelColor: Color.PRIMARY1,
          requiredErrorMessage: 'Please enter description',
        }}
        button1Props={{
          title: 'Cancel',
          onPress: () => {
            setInput1ModalVisible(!input1ModalVisible);
          },
          borderColor: Color.TEXT_PLACEHOLDER,
          backgroundColor: Color.WHITE,
        }}
        button2Props={{
          title: 'Submit',
          onPress: val => {
            // here you'll get values
            console.log('VAL ', val);
            setInput1ModalVisible(!input1ModalVisible);
          },
          backgroundColor: Color.PRIMARY1,
          textColor: Color.WHITE,
        }}
      />
    </View>
  );
};

export default CustomizedModalDemo;