CODEWITHSUNDEEP
reactjsreact-native
obiwankenoobi
obiwankenoobi

Reputation: 1582

FlatList is not get rendered

I am trying to convert regular mapped Array inside scrollview into a FlatList component without much luck. Using map worked great but now converting the same data into FlatList doesnt render anything.

FLATLIST:

<View style={styles.container}>
  <FlatList 
     keyExtractor={(item) => item.url}
     data={this.props.links}
     renderItem={
       ({item}) => {
         <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${link.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={item.id}
               likes={item.totalLikes}
               username={this.props.username}/>
         </TouchableOpacity>
      }
    }
   />
</View>

MAPPED ARRAY:

<View style={styles.container}>
  this.props.links((link) => {

    return(

         <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${link.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={link.id}
               likes={link.totalLikes}
               username={this.props.username}/>
         </TouchableOpacity>

    )

})

so the example using the map methid working great but then trying to convert it to flatlist is failing without any logs or error, just blank page

Upvotes: 0

Views: 317

Answers (2)

Mustansir Zia
Mustansir Zia

Reputation: 1004

I believe the issue may be quite simple. Your <Flatlist> which is inside <View style={styles.container}> doesn't have height and width of its own so the items that are rendered inside it are also without height and width and thus won't appear on the screen. (If you used flex to set height inside the LinkContainer component). Give your Flatlist a height and a width and then try again.

Also, as per Revansiddh's answer your renderItem prop should look like this.

Notice the removal of {} in the fat arrow function. If you wrap JSX inside {} as in your question the fat arrow function won't return anything or would return undefined and thus nothing will get rendered on the screen. So you need a return statement or the removal of {} altogether.

({ item }) => (
         <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${item.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={item.id}
               likes={item.totalLikes}
               username={this.props.username}
            />
         </TouchableOpacity>
)

Upvotes: 1

Revansiddh
Revansiddh

Reputation: 3062

As per information you provided it seems like you missing spreading arguments in renderItem function. We used {} so need to return JSX tag

<View style={styles.container}>
  <FlatList 
     keyExtractor={(link) => link.url}
     data={this.props.links}
     renderItem={
      ({item}) => {  // Here you receive array element as item. 
        return <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${item.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={item.id}
               likes={item.totalLikes}
               username={this.props.username}/>
         </TouchableOpacity>
      }
    }
   />
</View>

Have look at docs what you receive in renderItem

Upvotes: 1

Related Questions