I have a TouchableOpacity set up as shown below:

<View style={{flexDirection: 'row'}}>
   <TouchableOpacity onPress={() => selectImage()} style={{backgroundColor: COLORS.lightGray3, width: SIZES.width, height: 200, borderTopRightRadius: 15, borderTopLeftRadius: 15,}}>

       <TouchableOpacity onPress={() => setModal(!modal)} style={{backgroundColor: 'white', width: 20, height: 20, borderRadius: 15, alignSelf:'flex-end', right: 10, top: 10}}>
           <Icon name='x' size={20} style={{color: 'red'}}/>
       </TouchableOpacity>

       {array.picture == null ? 
       <View style={{alignItems: 'center', flexDirection: 'column', top: 50}}>
          <Text>No Image Selected. </Text>
       </View>
       :
       <Image resizeMode='cover' source={{uri: array.picture}} /> 
       }

   </TouchableOpacity>
</View>

In this TouchableOpacity is a conditional to load an image uri from an array once the image has been selected via selectImage(); even if array.picture IS NOT equal to null, it will either display the same "No Image Selected" text, or a gray background.

ARRAY:

[{"name": "test", "picture": "file:///Users/user/Library/Developer/CoreSimulator/Devices/C10A4A25-D633-44E8-AE53-AD8DD9601A82/data/Containers/Data/Application/C68582F5-CA35-4DD6-9D15-36A254411CD9/tmp/3E9EBBE3-AC1A-4C61-927E-DD168BD037A5.jpg", "price": 12}]

PICTURE OF DISPLAY:

ALSO, this is all displayed within a modal.

Anyone sure as to why this is occurring? Thanks!