React Native: ListView re-displays only selected item, not everything

I have a ListView

Modal inside that displays data. When the user clicks on an item in this list, I want a checkbox to appear next to that item to represent that item. The error I am facing is that the UI does not reflect this actual selection. So when the user clicks on the element, nothing has changed, however, when the modal is reopened, the UI displays a check mark next to the previously selected element.

The fix I found for this is to re-render the force using key

in ListView

. This is fine, but if I have images in the list, they all flash because everything is being redrawn. Without setting key

, it looks like my method is renderItems

not being called after change (user choice). Leaving that key on and adding keys to each render item doesn't seem to help either. How can I get the UI I expect without forcing re-rendering? Maybe I need to switch to FlatList

in order to control the individual rendering of the list item?

Methods:

        constructor(props) {
         super(props);
         const ds = new ListView.DataSource({
           rowHasChanged: (r1, r2) => r1 !== r2,
         });
         this.state = {
           selected: this.parseSelected(props.data),
           selectedCached: null,
           dataSource: ds.cloneWithRows(props.data),
         };
        }

        componentWillReceiveProps = nextProps => {
        if (nextProps.visible) {
          const saved = this.state.selected;
          this.setState({
            selectedCached: saved,
          });
        }
      }; 

      getKey = selected => {
    switch (this.props.type) {
      case 'SHIPPING':
        return selected.code;
      case 'REASON':
        return selected;
      case 'MULTICARDS':
        return selected.account_token;
      default:
        return null;
    }
  };

  parseSelected = selected => {
    switch (this.props.type) {
      case 'SHIPPING':
      case 'REASON':
        return selected[0];
      case 'MULTICARDS':
        return selected[this.props.selectedProduct];
      default:
        return null;
    }
  };

  tempSaveSelection = selected => {
    this.setState({ selected });
  };

renderItems = item => {
    let selected;
    let body;
    let style;
    switch (this.props.type) {
      case 'SHIPPING':
        selected = this.state.selected.code === item.code;
        body = <ShipItem token={item} />;
        break;
      case 'REASON':
        selected = this.state.selected === item;
        body = <FormattedMessage id={`reason_${item}`} />;
        style = textSection;
        break;
      case 'MULTICARDS':
        selected = this.state.selected.account_token === item.account_token;
        body = <CardItem product={item} />;
        style = textSection;
        break;
      default:
        selected = false;
        body = null;
        style = null;
    }

      

Return:

const { selected, dataSource } = this.state;
const selectedKey = this.getKey(selected);

   <ListView
      key={selectedKey}
      dataSource={dataSource}
      renderRow={this.renderItems}
    />

      

+3
listview react-native react-native-android react-native-ios


source to share


No one has answered this question yet

Check out similar questions:

586
What is the difference between React Native and React?
568
What is the difference between using a constructor and getInitialState in React / React Native?
360
Hide keyboard in responsive mode
161
Changing the original version incorrectly
17
How to make a horizontal ListView or FlatList in responsive mode
4
Select row in ListView to get details
3
Don't use the active listview item.
0
React Native ListView - not all visible items are displayed
0
Unable to navigate to another page in a responsive native
0
get data in react native from mlab



All Articles
Loading...
X
Show
Funny
Dev
Pics