PickerImg.js 3.84 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9
import React, {useState} from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native';
Giang Tran committed
10 11 12
import R from '../../assets/R';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign';
Giang Tran committed
13 14 15
import Modal from 'react-native-modal';
import Block from '../Block';
import ImagePicker from 'react-native-image-crop-picker';
Giang Tran committed
16
import AppText from '../AppText';
Giang Tran committed
17 18 19 20 21 22 23 24
const options = {
  title: 'Select Avatar',
  customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};
Giang Tran committed
25 26

const PickerImg = (props) => {
Giang Tran committed
27
  const {title, height, width, onClickImage, image} = props;
Giang Tran committed
28 29 30 31 32
  const [isModalVisible, setModalVisible] = useState(false);

  const onchoosGalery = () => {
    ImagePicker.openPicker({
      mediaType: 'photo',
Giang Tran committed
33
    }).then((image) => {
Giang Tran committed
34
      setModalVisible(false);
Giang Tran committed
35
      onClickImage(image.path);
Giang Tran committed
36 37 38 39 40 41 42 43
    });
  };

  const onCapture = () => {
    ImagePicker.openCamera({
      mediaType: 'photo',
    }).then((image) => {
      setModalVisible(false);
Giang Tran committed
44
      onClickImage(image.path);
Giang Tran committed
45 46 47
    });
  };

Giang Tran committed
48
  return (
Giang Tran committed
49 50 51
    <TouchableOpacity
      onPress={() => setModalVisible(true)}
      style={{marginTop: 10, width: WIDTHXD(480)}}>
Giang Tran committed
52
      <Text style={styles.txt}>{title}</Text>
Giang Tran committed
53 54 55 56 57 58 59
      {image ? (
        <Image style={styles.container} source={{uri: image}} />
      ) : (
        <View style={styles.container}>
          <Icon name={'plus'} size={40} color={'#DBDBDB'} />
        </View>
      )}
Giang Tran committed
60 61 62 63 64 65 66 67 68 69 70

      <Modal
        isVisible={isModalVisible}
        style={{margin: 0, justifyContent: 'flex-end'}}
        onSwipeComplete={() => setModalVisible(false)}
        swipeDirection={['up', 'left', 'right', 'down']}>
        <TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
          <View style={{flex: 1}}></View>
        </TouchableWithoutFeedback>

        <View style={styles.containerSelect}>
Giang Tran committed
71 72
          <AppText
            i18nKey={'Select_source_image'}
Giang Tran committed
73 74 75 76 77
            style={{
              textAlign: 'center',
              fontSize: getFontXD(42),
              fontWeight: 'bold',
              color: '#1473E6',
Giang Tran committed
78 79
            }}
          />
Giang Tran committed
80 81 82 83 84 85

          <View style={styles.line} />
          <Block row space={'around'} center>
            <TouchableOpacity style={styles.selectionImg} onPress={onCapture}>
              <Image style={styles.imgIcon} source={R.images.iconCamera} />

Giang Tran committed
86
              <AppText i18nKey={'Take_photo'} style={styles.txtTitleBtn} />
Giang Tran committed
87 88 89 90 91 92
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.selectionImg}
              onPress={onchoosGalery}>
              <Image style={styles.imgIcon} source={R.images.iconImg} />

Giang Tran committed
93
              <AppText i18nKey={'Photo_library'} style={styles.txtTitleBtn} />
Giang Tran committed
94 95 96 97 98
            </TouchableOpacity>
          </Block>
        </View>
      </Modal>
    </TouchableOpacity>
Giang Tran committed
99 100 101 102 103 104
  );
};

const styles = StyleSheet.create({
  container: {
    width: WIDTHXD(350),
Giang Tran committed
105
    height: HEIGHTXD(280),
Giang Tran committed
106 107 108 109 110 111 112 113 114 115 116 117
    backgroundColor: R.colors.white,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#DBDBDB',
    borderStyle: 'dashed',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
    marginBottom: 5,
118
    paddingLeft: 10,
Giang Tran committed
119
  },
Giang Tran committed
120 121 122 123 124 125
  selectionImg: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  containerSelect: {
Giang Tran committed
126
    height: HEIGHTXD(520),
Giang Tran committed
127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
    backgroundColor: 'white',
    paddingTop: 10,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  line: {
    height: 1,
    backgroundColor: '#929292',
    width: '100%',
    marginTop: 5,
  },
  imgIcon: {
    width: 40,
    height: 40,
  },
  txtTitleBtn: {
    textAlign: 'center',
    fontSize: getFontXD(42),
    color: '#1473E6',
  },
Giang Tran committed
147 148
});

Giang Tran committed
149
export default PickerImg;