I made an app in React Native where you can add a "player" and his/her "position" to a flatlist and after that, the user should be able to make a picture and it is supposed to show it in the flatlist along with the name and position. The problem is that it doesn't.
I tried to run it in different React installments, tried to resize it within the styles component, and even changed the source names. Nothing seems to work. Apparently, not even ChatGPT knows the answer to this :(.
What am I doing wrong or am I overlooking? The code is below
ps. I'm just a student so don't be harsh on me... also, the app just runs in an emulator
import React, { useState } from 'react';
import { FlatList, TouchableOpacity, StyleSheet, Text, Image, Button, View, TextInput } from 'react-native';
import { launchCamera } from 'react-native-image-picker';
const App = () => {
const [players, setPlayers] = useState([]);
const [name, setName] = useState('');
const [position, setPosition] = useState('');
const [image, setImage ] = useState(null);
const addPlayer = () => {
setPlayers([...players, { name,position, image: null }]);
setName('');
setPosition('');
setImage(null)
};
const openCamera = () => {
let options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
launchCamera(options, (res) => {
setImage(res);
console.log('response = ', res.assets[0].uri);
});
}
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value={name}
onChangeText={setName}
placeholder="Enter player name"
/>
<TextInput
style={styles.input}
value={position}
onChangeText={setPosition}
placeholder="Enter position"
/>
<TouchableOpacity onPress={addPlayer} style={styles.button}>
<Text style={{ color: '#fff' }}>Add Player</Text>
</TouchableOpacity>
<FlatList
data={players}
renderItem={({item}) => (
<View style={styles.playerContainer}>
{item.image && item.image.uri && (
<Image
source={{ uri: item.image.uri }}
style={{width:60, height:60,borderRadius:30, backgroundColor: black}}
/>
)}
<View style={{alignItems:"center",flex:1}}>
<Text style={{fontWeight:"bold"}}>{item.name}</Text>
<Text>{item.position}</Text>
</View>
<Button
title="Take Picture"
onPress={(openCamera)}
/>
</View>
)}
keyExtractor={item => item.name}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 16,
},
button: {
backgroundColor: 'blue',
padding: 12,
},
playerContainer: {
flexDirection: 'row',
marginBottom: 16,
alignItems: 'center',
},
playerImage: {
width: 60,
height: 60,
borderRadius: 25,
},
playerName: {
fontSize: 18,
},
});
export default App;
