git commands for native app
git add modules/ecard-modules/
git status
git branch submitipd-feature
git branch
git checkout submitipd-feature
git status
git add .
git status
git commit -m "submitipd-feature"
git push --set-upstream origin submitipd-feature
https://www.youtube.com/watch?v=uX5E_QFJubU&t=2s
line no 7 android.xml
https://github.com/expo/expo/tree/main/packages/expo-image-picker
https://github.com/expo/expo/tree/main/packages/expo-image-picker
import React, { useState } from "react";
import { View, Button, Image, StyleSheet, Text, FlatList, TouchableOpacity } from "react-native";
import * as ImagePicker from 'expo-image-picker';
export default function App() {
const [images, setImages] = useState<string[]>([]); // Array to store image URIs
// Request gallery permission and pick images
const pickImage = async () => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!permissionResult.granted) {
alert('Permission to access gallery is required!');
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsMultipleSelection: true, // Allows multiple selection of images
});
if (!result.canceled) {
setImages((prevImages) => [...prevImages, ...result.assets.map((asset) => asset.uri)]);
}
};
// Request camera permission and take a picture
const takePicture = async () => {
const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
if (!permissionResult.granted) {
alert('Permission to access the camera is required!');
return;
}
const result = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
});
if (!result.canceled) {
setImages((prevImages) => [...prevImages, result.assets[0].uri]);
}
};
// Remove an image from the list
const deleteImage = (uri: string) => {
setImages((prevImages) => prevImages.filter((image) => image !== uri));
};
return (
<View style={styles.container}>
<Button title="Pick Images from Gallery" onPress={pickImage} />
<Button title="Take a Picture" onPress={takePicture} />
<Text style={styles.header}>Selected Images:</Text>
{images.length === 0 ? (
<Text>No images selected yet</Text>
) : (
<FlatList
data={images}
keyExtractor={(item, index) => index.toString()}
numColumns={3}
renderItem={({ item }) => (
<View style={styles.imageContainer}>
<Image source={{ uri: item }} style={styles.image} />
<TouchableOpacity style={styles.deleteIcon} onPress={() => deleteImage(item)}>
<Text style={styles.deleteText}>X</Text>
</TouchableOpacity>
</View>
)}
/>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: "#fff",
},
header: {
fontSize: 18,
fontWeight: 'bold',
marginVertical: 10,
},
imageContainer: {
position: 'relative',
margin: 5,
},
image: {
width: 100,
height: 100,
borderRadius: 10,
},
deleteIcon: {
position: 'absolute',
top: -5,
right: -5,
backgroundColor: 'red',
borderRadius: 12,
width: 24,
height: 24,
justifyContent: 'center',
alignItems: 'center',
},
deleteText: {
color: '#fff',
fontWeight: 'bold',
},
});
Comments
Post a Comment