CODEWITHSUNDEEP
react-nativereact-native-flatlist
Jorge Cajina
Jorge Cajina

Reputation: 53

Rendering FlatList inside TabNavigator

I have followed this example and tried to put a FlatList in one of the Tabs, but I can't get it to display.

So, this is my modification on the code :

..
    const datos=[{"codoc": 1}, {"codoc": 2}, {"codoc": 3}];
    function HomeScreen() {
      return (
          <FlatList
            data={datos}
            renderItem={(item)=>{return <View style={{flex:1}}><Text>{item.codoc}</Text></View>}}
            keyExtractor={item=>item.codoc.toString()}
          />
      );
    }
.
.
.

I will thank any help..

Upvotes: 0

Views: 623

Answers (1)

docmurloc
docmurloc

Reputation: 1239

You need to do item.item.codoc in the renderItem.

More information in this post

Edit

I use this code.

const Tab = createBottomTabNavigator();
 
const HomeTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Test} />
      <Tab.Screen name="Settings" component={Test} />
    </Tab.Navigator>
  );
};

const datos=[
    { "codoc": 4 },
    { "codoc": 2 },
    { "codoc": 3 }
];

function Test() {


    return (
            <FlatList
            data={datos}
            renderItem={(item)=>{
                return (
                <View style={{flex:1}}>
                    <Text>{item.item.codoc}</Text>
                </View>)
            }}
            keyExtractor={item=>item.codoc.toString()}
          />
    );
}

Screen result

Result

Upvotes: 1

Related Questions