Well, here’s the situation - some good news and some bad news.
First, the good news is that the code below is functioning smoothly.
Now, the not-so-good news is that I find myself having to select the image twice before it actually shows up on the client-side.
Code Import:
import {launchImageLibrary} from 'react-native-image-picker'State Setup:
const [loading1, setLoading1] = useState(false)
const [ image, setImage ] = useState('')
const [post, setPost] = useState([
{
title: '',
image: '',
user
}
])
ImagePicker Code:
const uploadImage = async ( index: number )=>{
setLoading1(true)
const result = await launchImageLibrary({
mediaType: 'mixed',
quality: 1
}).then(res =>{
if(!res.didCancel){
let data = res.uri || res.assets?.[0]?.uri
setImage(data)
}
})
if(image){
setPost(prevPost =>{
const updatedPost = [...prevPost]
updatedPost[index] = {
...updatedPost[index],
image: image
}
return updatedPost
})
}
console.log('RESULT=====> ', image)
setLoading1(false)
}
The prevPost snippet is specifically for incorporating the image into other elements in a form post. I have a hunch there’s something I'm overlooking in the above code that’s causing me to have to go through the Touchable Opacity process twice - select the image from the phone, post it...TWICE.
It functions properly the second time around, but not the first. My goal is to simply touch the Touchable Opacity, select the image, and have it display correctly on the first go. I’m stumped as to what’s missing. Any guidance would be appreciated.
As for the return code:
{
post.map(( item, index )=>(
<View key={index}>
<TouchableOpacity onPress={()=>uploadImage(index)}>
<AntDesign name="link" size={20} color="black" />
</TouchableOpacity>
{
item.image && (
<Image style={styles.nft_image} resizeMode='contain' source={{ uri: item.image }} />
)
}
</View>
))
}