Function components in react native

I am trying to change view of ListItem by pressing on it. In My screen which is normal React component i have functional List component and selectedItemState (only 1 or no items will be selected). In List there are few also functional ListItem components. The problem is lack of re-render ability for item.

I've tried memo as official React page says but with no results. Changing components to normal ones gave the same result.

Screen Component:

export default class myScreen extends Component {
    constructor () {
        super ()
        this.state = {
            data: [], // <-- there are my objects
            isDataEmpty: false,
            selectedItemId: ''
        }
    }

    // ... some code

    render () {
        return ( 
                <View style={styles.container}>
                    <List
                        itemList={this.state.data}
                        onItemPress={ /* go to next screen */}
                        onItemLongPress={id => {
                            this.setState({ selectedItemId: this.state.selectedItemId === id ? '' : id })
                        }}
                        selectedItemId={this.state.selectedItemId}
                    />
                </View>
        )
    }
}

List Component:

const List = props => {
  return (
    <FlatList
      style={style.itemList}
      data={props.itemList}
      renderItem={info => (
        <ListItem
          item={info.item}
          selectedItemId={props.selectedItemId}
          onItemPress={id => props.onItemPress(id)}
          onItemLongPress={id => props.onItemLongPress(id)}
        />
      )}
    />
  )
}

const areEqual = (previous, next) => {
  return next.selectedItemId !== '' && (previous.selectedItemId === next.selectedItemId)
}

export default React.memo(List, areEqual)

List Item Component:

const ListItem = props => {
  return (
    <TouchableWithoutFeedback
      onPress={() => props.onItemPress(props.item.id)}
      onLongPress={() => {
        props.onItemLongPress(props.item.id)

      } }>
      <View style={style.listItem}>
          <Image resizeMode='cover' source={props.item.image} style={style.image} />
          <Text>{props.selectedItemId === props.item.id ? 'XXX' : props.item.name}</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

const areEqual = (previous, next) => {
  return next.selectedItemId && (next.selectedItemId === next.item.id)
}

export default React.memo(ListItem, areEqual)

After pressing on any item i want it name to change to 'XXX'. If item will be pressed twice all items should be in normal state

As long as there are no changes on the item itself there will be no rerender of the according listitem. You could try to force a rerender of the list by changing the value of the extraData flatlist prop though.