CODEWITHSUNDEEP
react-nativereact-native-flatlist
Okechukwu Eze
Okechukwu Eze

Reputation: 149

React-Native Flatlist not rendering when record is single

My React-Native Flatlist have refused render data when my json data is just one. My flatlist renders properly when the data on my Json is more than one.

I have tried all the ricks i can think of but yet, its not working. This is happening to all the Flatlist in all my program and its sickining already.

I have tried getting the array side using Object.keys(jsonResponse.Product).length; before choosing to either render to a Flatlist or return a single data View which refused to also work for me as the Object.key returns the same size when the data item is one and same when its two. (really strange)

I have also tried effecting the styling of the Flatlist my using
height:((Dimensions.get('screen').height)) and width:((Dimensions.get('screen').width)) in the Flatlist contentContainerStyle props, yet it does not render when data is single

Also tried using Array.from() to make sure that the data the flatlist will render is well converted to an object/array

I have also tried using this.state.PC_list_data.map() which still does not render when the data item is just one (single) like the flatlist

JSON OUTPUT WHEN DATA IS MORE THAN ONE enter image description here

JSON SINGLE OUTPUT enter image description here

render(){

        return(<FlatList
                                    contentContainerStyle={{
                                        borderWidth: 0,
                                        width:((Dimensions.get('screen').width)),
                                        //height:((Dimensions.get('screen').height))+50,
                                        borderColor:'#00d',
                                       // marginTop:30
                                    }}

                                    data={ Array.from(this.state.PC_list_data) || []}
                                    keyExtractor={(item) =>item.Product_id}
                                    renderItem={({item,index})=>
                                    {

                                        return (<CategoryProduct_List
                                                {...item}
                                                List_index={index}
                                                HrefNav={this.navigateToSubProduct.bind(this, {...item})}
                                            />
                                        )}

                                    }


                                />)

      }

///CODE ON THE CategoryProduct_List Component

const CategoryProduct_List = props =>
{ 
           //alert('aaa')

    return (<View style={[{
        flex: 1,
        display:'flex',

        flexDirection: "row",
        backgroundColor: 'rgb(243,243,243)',
        marginHorizontal:10,
        justifyContent:'space-between',
        alignItem:'center',
        borderLeftWidth:10,
        borderLeftColor:'#80146D',
        marginBottom:10,
        marginLeft:5+'%',
        marginTop:5,
        padding:10,
        width: 90+'%',
        height:100+'%'

    }]}>


        <View style={{
            alignItem:"left",
        }}>
            <TouchableOpacity
                activeOpacity={0.7} onPress={()=> props.HrefNav()}>
                <Text>{props.Product_name.toUpperCase()}</Text>
            </TouchableOpacity>
        </View>

        <View style={{ alignItems: "flex-end",}}>

            <TouchableOpacity
                activeOpacity={0.7}>
                <IconSet  color='#80146D' onPress={()=> props.HrefNav()}   size={25} name="arrow-forward"/>
            </TouchableOpacity>
        </View>



    </View>);

}

export default CategoryProduct_List;

What i want to know is how i can make the Flatlist render my single records and what i am not doing right here

Upvotes: 1

Views: 1640

Answers (2)

ANKIT DETROJA
ANKIT DETROJA

Reputation: 2065

i also face this problem

Solution :

some time flatlist cant't be show single record you have to add extra data in flatlist

<FlatList
   extraData={this.state} />

its work fine

Upvotes: 0

RegularGuy
RegularGuy

Reputation: 3676

It may not be flatlist, since it works with one item ... it may be the data

Some API's return an array of json for multiple data Ex: [{1...},{2...},{3...}] and that is well received by the faltlist component. But when requesting only one item , the apis return an individual json Ex: {1...} , and faltlist only accepts an array of json, not an individual json...

For that you can use a validator function that will check if the data is array, or an individual json , and call it before using it as the flatlist data. it would help if you placed the response from both an item group, or an individual item

function format(data){
var result = []
if(!Array.isArray(data)){//if is not an array
   result.push(data) // push it as the first item of an array
}else{
 result=data
}

return result
}

can you post a sample of this.state.PC_list_data when you have 1 item and when you have multiple items please?

Upvotes: 3

Related Questions