Browse Source

Making ImageInput with blue btn and image array above

master
GabrielTrettel 4 years ago
parent
commit
ce01e8cf32
  1. 61
      src/app/components/ImageInput.js
  2. 4
      src/app/components/ImageInputList.js

61
src/app/components/ImageInput.js

@ -68,31 +68,44 @@ const launchImageLibrary = async (onChangeImage, callBack) => {
} }
}; };
function addNewImageBtn() {
return (
<View style={styles.addBtn}>
<MaterialCommunityIcons color={colors.white} name="camera" size={20} />
<Text style={{ color: colors.white, marginLeft: 10, fontSize: 14 }}>
CÂMERA
</Text>
</View>
);
}
function ImageInput({ imageUri, onChangeImage }) { function ImageInput({ imageUri, onChangeImage }) {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
return ( return (
<View> <View>
<TouchableWithoutFeedback
onPress={() => {
!imageUri
? setModalVisible(true)
: removeImgage(imageUri, onChangeImage);
}}
>
<View style={styles.container}>
{!imageUri && (
<MaterialCommunityIcons
color={colors.medium}
name="camera-plus"
size={40}
/>
)}
{imageUri && (
{imageUri && (
<TouchableWithoutFeedback
onPress={() => {
removeImgage(imageUri, onChangeImage);
}}
>
<View style={styles.container}>
<Image source={{ uri: imageUri }} style={styles.image} /> <Image source={{ uri: imageUri }} style={styles.image} />
)}
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
)}
{!imageUri && (
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
>
{addNewImageBtn()}
</TouchableOpacity>
)}
<View> <View>
<Modal <Modal
style={styles.centeredView} style={styles.centeredView}
@ -214,6 +227,16 @@ const styles = StyleSheet.create({
fontWeight: "bold", fontWeight: "bold",
height: 35, height: 35,
}, },
addBtn: {
marginVertical: 10,
borderRadius: 6,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: colors.primary,
height: 42,
width: "100%",
},
}); });
export default ImageInput; export default ImageInput;

4
src/app/components/ImageInputList.js

@ -1,5 +1,5 @@
import React, { useRef } from "react"; import React, { useRef } from "react";
import { View, StyleSheet, ScrollView } from "react-native";
import { View, StyleSheet, ScrollView, Button } from "react-native";
import ImageInput from "./ImageInput"; import ImageInput from "./ImageInput";
function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) { function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
@ -21,9 +21,9 @@ function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
/> />
</View> </View>
))} ))}
<ImageInput onChangeImage={(uri) => onAddImage(uri)} />
</View> </View>
</ScrollView> </ScrollView>
<ImageInput onChangeImage={(uri) => onAddImage(uri)} />
</View> </View>
); );
} }

Loading…
Cancel
Save