React-native: FlatList isn't rendering data.

Created on 13 May 2017 · 7Comments · Source: facebook/react-native

Description

Expected to render data and it did not render data

Reproduction Steps and Sample Code

     var items = this.state.results;
     ...

                <FlatList initialListSize={10} scrollRenderAheadDistance={50} keyExtractor={item => item.id} pageSize={5} data={items} renderItem={(data) =>
                    <TouchableOpacity style={{ overflow: 'hidden', marginBottom: 2, borderBottomWidth: 1, borderBottomColor: "black" }}>
                        <ListItem style={{}} avatar button onPress={() => self.props.setCurrentUser(data)} style={{ overflow: 'hidden' }}>
                            <Left style={{ overflow: 'hidden' }}>
                                {(data.path) ? ((data.path && data.path.includes("amazonaws")) ? (<Thumbnail source={{ uri: data.path }} />) : (<Thumbnail source={{ uri: "http://www.typsurat.com/uploads/member/" + data.path }} />)) : (<Thumbnail source={require('@assets/placeholderAppuser.jpg')} />)}
                            </Left>
                            <Body style={{ "paddingBottom": 16, overflow: 'hidden', "paddingTop": 16 }}>
                                {(data.fname && data.lastName.surname) ? (<Text style={{ fontWeight: 'bold', color: "black" }}>{data.fname} {data.mname} {data.lastName.surname}</Text>) : null}
                                {(data.membershipNo) ? (<Text note>Membership No.: {data.membershipNo}</Text>) : null}
                                {/*{(data.originVillage.name) ? (<Text note>Village: {data.originVillage.name}</Text>) : null}*/}
                                {(data.rMobile1) ? (<Text note>Contact: +91{data.rMobile1}</Text>) : null}
                            </Body>
                            <Right style={{ overflow: 'hidden' }}>
                                <Icon name='phone' onPress={() => { Communications.phonecall("+91" + data.rMobile1, true); }} style={{ color: '#db342e', fontSize: 26, width: 30 }} />
                                <Text> </Text>
                                <Icon name='commenting' onPress={() => { Communications.text("+91" + data.rMobile1); }} style={{ color: '#db342e', fontSize: 26, width: 30 }} />
                            </Right>
                        </ListItem>
                    </TouchableOpacity>} />

Additional Information

React Native version: 0.44.0
Platform: Android
Development Operating System: Windows
Dev tools: Android 6.0.1 Marshmallow

Locked

Source

Nygma297

Most helpful comment

@Nygma297 hint:
renderItem={ ({item, index}) =>{} }

st0ffern on 15 May 2017

👍3 🎉2

All 7 comments

console log your data and show us what it looks like..
should be a array of objects..

st0ffern on 13 May 2017

console.log(i'I've got '+ items.length + 'items')

dobrienlzd on 13 May 2017

items:  (1965) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object…]

[0 … 99]
0:Object
achievements:""
adharCard:""
bAddress:"TARUN FASHION- G-25,SHANKAR MKT.,MOTI BEGAMWADI"
bArea:136
bCity:3
bMobile1:"9824743210"
bMobile2:""
bName:""
bPhone1:"2324480"
bPhone2:""
bPincode:"395002"
b_area:136
b_city:3
bdate:"1979-03-18T00:00:00.000Z"
bgroup:"O+"
busArea:Object
busCity:Object
corresAddress:"BUSINESS"
dateAdded:"2012-05-22T00:00:00.000Z"
education:""
email:""
fFname:"DALAMCHAND"
fLname:277
fMname:""
f_lname:277
fatherLastName:Object
fname:"TARUN"
formReceived:"YES"
gender:"MALE"
hobbies:""
id:3
isWorkingComitee:"NO"
jobDesc:""
lastName:Object
lname:277
mDate:"2009-12-02T00:00:00.000Z"
membershipNo:"3"
mname:"D."
mstatus:"MARRIED"
originDist:Object
originVillage:Object
origin_dist:6
origin_village:29
otherFirmsContact:""
pPath:""
paramashakName:""
password:"18031979"
path:"3.jpg"
rAddress1:"6-A, RAJDEEP APARTMENT"
rAddress2:"RCC CANAL ROAD, NR.G. D. GOENKA SCHOOL"
rArea:179
rCity:3
rMobile1:"9824743210"
rMobile2:""
rPhone1:""
rPhone2:""
rPincode:"395007"
r_area:179
r_city:3
receiptNo:""
refMemNo:""
refName:""
resArea:Object
resCity:Object
sortorder:0
status:1
website:""
workingPost:""

Nygma297 on 15 May 2017

This issue looks like a question that would be best asked on StackOverflow.

StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on StackOverflow.

sahrens on 15 May 2017

👍1

@Nygma297 hint:
renderItem={ ({item, index}) =>{} }

st0ffern on 15 May 2017

👍3 🎉2

@stoffern
I solved the issue but then I face the type error.

is not assignable to type 'Readonly<FlatListProperties<any>>'.
    Types of property 'renderItem' are incompatible.
      Type '({ item, index }: ListRenderItemInfo<any>) => false | Element' is not assignable to type 'ListRenderItem<any>'.
        Type 'false | Element' is not assignable to type 'ReactElement<any>'.
          Type 'false' is not assignable to type 'ReactElement<any>'.