Search code examples
react-nativeshoutem

How i can update 1 row of list view @Shoutem/ui react native

I try to used ListView of @shoutem/ui ListView data i get via API, response is an array object! Inside 1 object have 1 key value like status with params (follow/unfollow)! If params is follow i render row with full star, or not i define with empty star But now i want to click one row! I want to change empty star to full star or opposite and at same time saving id of row to one array list! So anyone can give me a solution? Thanks so much for your help! And have a nice day Here is my picture: enter image description here

Solution

  • You have to handle that inside component you render as a row. Let's say you render your row like this:

    renderRow(object) {
  const iconName = object.status === 'follow' ? 'add-to-favorites-full' : 'add-to-favorites';
  return (
    <Row>
      <Image
        styleName="small rounded-corners"
        source={{ uri: object.imageUrl }}
      />
      <View styleName="vertical stretch space-between">
        <Subtitle>object.name</Subtitle>
        <Caption>object.status</Caption>
      </View>
      <Button styleName="right-icon" onPress={() => this.updateObjectStatus(object)}><Icon name={iconName} /></Button>
    </Row>
  );
}

    then, if your object needs to be updated on the server you will need to post that on your API inside your updateObjectStatus function and refresh data from server. If you are updating object status locally in app state with redux action. Both cases will cause change of your data and therefore new render of your ListView. which will now render row you have clicked with full star.

    This screen may be of help to you: https://github.com/shoutem/extensions/blob/master/shoutem-books/app/screens/BooksListScreen.js

    it handles that inside this two components: