Custom Alert Modal

CustomAlertModal.js

// Used Libraries
// 1. React Native Elements (https://react-native-elements.github.io/react-native-elements/)
// 2. React Native Modal (https://github.com/react-native-community/react-native-modal)

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { deviceHeight, deviceWidth } from '../../helpers/constants';
import { WHITE, SANS_BASE, SECONDARY_BLACK } from '../../helpers/styleConstants';
import { Button } from 'react-native-elements';
import Modal from 'react-native-modal';
import { CheckBox } from 'react-native-elements'
import { TouchableHighlight } from 'react-native-gesture-handler';

const CustomAlertModal = (props) => {
  const [open, setOpen] = useState(false);
  const [check1, setCheck1] = useState(false);
  const [check2, setCheck2] = useState(false);
  const [check3, setCheck3] = useState(false);
  return (
    <View style={[styles.container]}>
      <Text>Swipe Deck Screen</Text>
      <Button
        title="Press me"
        onPress={() => setOpen(true)}
      />
      <Modal
        animationIn='zoomIn'
        isVisible={open}>
        <View style={{
          backgroundColor: 'white',
          paddingTop: 10,
          justifyContent: 'center',
          borderRadius: 15,
          borderColor: 'rgba(0, 0, 0, 0.1)',
          shadowColor: "#000",
          shadowOffset: {
            width: 0,
            height: 4,
          },
          shadowOpacity: 0.30,
          shadowRadius: 4.65,
          elevation: 8
        }}>
          <View style={{
            padding: 15
          }}>
            <CheckBox
              onPress={() => setCheck1(!check1)}
              containerStyle={{
                borderWidth: 0,
                backgroundColor: WHITE,
              }}
              checked={check1}
              title='Option 1'
            />
            <CheckBox
              onPress={() => setCheck2(!check2)}
              containerStyle={{
                borderWidth: 0,
                backgroundColor: WHITE,
              }}
              checked={check2}
              title='Option 2'
            />
            <CheckBox
              onPress={() => setCheck3(!check3)}
              checked={check3}
              containerStyle={{
                borderWidth: 0,
                backgroundColor: WHITE,
              }}
              title='Option 3'
            />
          </View>
          <View style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: "space-between",
            borderTopWidth: 0.5,
            borderColor: SECONDARY_BLACK,
            height: 70,
          }}>
            <TouchableHighlight
              underlayColor={'#d5d5d5'}
              onPress={() => setOpen(false)}
              style={{
                borderRightWidth: 0.5,
                borderColor: SECONDARY_BLACK,
                display: "flex",
                width: ((deviceWidth - 32) / 2),
                justifyContent: 'center',
                alignItems: 'center',
                alignContent: 'center',
                height: 70,
                borderBottomLeftRadius: 15
              }}
            >
              <Text style={{
                fontFamily: SANS_BASE.FONT_BOLD,
                fontSize: 18,
                color: '#0a84ff'
              }}>Cancel</Text>
            </TouchableHighlight>
            <TouchableHighlight
              underlayColor={'#d5d5d5'}
              onPress={() => setOpen(false)}
              style={{
                display: "flex",
                width: ((deviceWidth - 32) / 2) - 8,
                justifyContent: 'center',
                alignItems: 'center',
                alignContent: 'center',
                height: 70,
                borderBottomRightRadius: 15
              }}>
              <Text style={{
                fontFamily: SANS_BASE.FONT_REGULAR,
                fontSize: 18,
                color: '#0a84ff'
              }}>OK</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: WHITE,
    display: 'flex',
    flex: 1,
    height: deviceHeight,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default CustomAlertModal;