CODEWITHSUNDEEP
react-nativereact-native-flatlist
sree_iphonedev
sree_iphonedev

Reputation: 3534

FlatList not rendering row

I am trying to learn FlatList component of react-native. Observing a tutorial, I have implemented a sample applications which list components inside a scrollview. I am trying to replace scrollview with FlatList, but items are not renderings on the screen. I have included the main source code here.

App.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  ScrollView,
  FlatList
} from 'react-native'
import ColorButton from './components/ColorButton'

class App extends Component {

  constructor() { 
    super()
    this.state = {
      backgroundColor: 'blue'
    }

    this.changeColor = this.changeColor.bind(this)
  }

  changeColor(backgroundColor) {
    this.setState({backgroundColor})
  }

  render() {
    const { backgroundColor } = this.state
    return(
      <FlatList 
        data = {'red', 'green', 'salmon'} 
        renderItem = {(color) => {
          <ColorButton backgroundColor={color} onSelect={this.changeColor}></ColorButton>
        } } />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20
  }
})

export default App

ColorButton.js

import React from 'react'
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight
} from 'react-native'

const ColorButton = ({ backgroundColor, onSelect=f=>f }) => (
    <TouchableHighlight 
        style = {styles.button} 
        onPress={() => onSelect(backgroundColor)} 
        underlayColor="orange">

        <View style = {styles.row}>
            <View style = {[styles.sample, {backgroundColor}]} />
            <Text style = {styles.text}>backgroundColor</Text>
        </View>
    </TouchableHighlight>
)

const styles = StyleSheet.create({
    button: {
      margin: 10,
      padding: 10,
      borderWidth: 2,
      borderRadius: 10,
      alignSelf: 'stretch',
      backgroundColor: 'rgba(255,255,255,0.8)'
    },
    row: {
      flexDirection: 'row',
      alignItems: 'center'
    },
    sample: {
      height: 20,
      width: 20,
      borderRadius: 10,
      margin: 5,
      backgroundColor: 'white'
    },
    text: {
      fontSize: 30,
      margin: 5
    }
  })

  export default ColorButton

Upvotes: 1

Views: 508

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12235

Change your code for flatlist to the one below : 

   <FlatList 
    data = {['red', 'green', 'salmon']} 
    renderItem = {({item}) => {
      <ColorButton backgroundColor={item} onSelect={this.changeColor}> 
    </ColorButton>
    } } />

Hope it helps. feel free for doubts

Upvotes: 4

Related Questions