How can I print image component inside a flatlist? REACT-NATIVE

Question

I have this object:

 const new_note = {
                    note_number: last_note, //create a new_note object, note_number will be the key for each note
                    content: this.state.content, 
                    color: this.state.default_color, 
                    text_color: this.state.color, 
                    uri: this.uri,
                    real_content: clear_real_content,
                    images_uri: this.images_uri,
                }; 

where this.uri is an image component:

this.uri = <Image source = {{uri: clear_content}} style = {{width: 50, height: 50}}></Image>;

and to print it in a flatlist:

                    <FlatList 
                        data = {this.props.array_notes} 
                        renderItem = {({item}) => (
                        <TouchableOpacity 
                            onLongPress = {() => this.show_hide_popup_menu(item)}
                            onPress = {() => this.select_edit(item)}
                            activeOpacity = {0.9}>
                            <View style = {this.styles.notes_container(dark, notes_backgroundColor, item)}>
                                {item.uri}
                            </View> 
                        </TouchableOpacity>)}
                        contentContainerStyle = {{flexGrow:1}}>
                    </FlatList>

but I get this error:

Answer 1

You can set only uri instead of Image element inside new_note object.

const new_note = {
    note_number: last_note,
    content: this.state.content, 
    color: this.state.default_color, 
    text_color: this.state.color, 
    // uri: this.uri, <-- change this line as below
    uri: clear_content,
    real_content: clear_real_content,
    images_uri: this.images_uri,
};

      <FlatList 
          data = {this.props.array_notes} 
          renderItem = {({item}) => (
          <TouchableOpacity 
              onLongPress = {() => this.show_hide_popup_menu(item)}
              onPress = {() => this.select_edit(item)}
              activeOpacity = {0.9}>
              <View style = {this.styles.notes_container(dark, notes_backgroundColor, item)}>
                  <Image source={{ uri: item.uri }} style={{ width: 50, height: 50 }}/>
              </View> 
          </TouchableOpacity>)}
          contentContainerStyle = {{flexGrow:1}}>
      </FlatList>