react-native props updated and render called, but UI doesn't updated

Viewed 157

I have a react-native component that uses native-base.

I also integrated react-redux and have connected properly, thus my state automatically updated by the reducer.

My problem is, my props.data gets updated properly and render gets called, but my ListItem is not updated at all.. I am not very familiar with this react-native components, did I miss anything?

import React, { Component } from "react";

import {
  ListItem,
  List
} from "native-base";

import {
  Provider,
  connect
} from 'react-redux';

class MyPage extends Component {
  render() {
    const { data } = this.props;
    console.log('data: ' + JSON.stringify(data)); // this gets called 
     2x, 1st time is empty, 2nd time is filled
    // 2nd times it gets called, looked something like this: "data: 
     [{"name": "one"},{"name": "two"}]"
    return (
        <irrelevant components omitted>
        <List
         dataArray={data}
         renderRow={row =>
          <ListItem
            button
            onPress={() => {console.log("todo: navigation")}}>
            <Text>{row.name}</Text>
          </ListItem>
        }
      />
       <irrelevant components omitted>
    );
  }
}

But, the UI still renders empty even after the second call... any idea?

Thanks in advance!

0 Answers
Related