CODEWITHSUNDEEP
javascriptreact-native-flatlist
Adeel Iftikhar
Adeel Iftikhar

Reputation: 792

FlatList is not rendereing properly

I am implementing FlatList and it is not giving the desired rendring output.

Here is my Code:

App.js

import React from 'react';
import Main from './components/MainComponent';

export default class App extends React.Component {
  render() {
    return (
      <Main />
    );
  }
}

MainComponent.js

import React, { Component } from 'react';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES
    };
  }

  render() {

    return (
        <Menu dishes={this.state.dishes} />
    );
  }
}

export default Main;

MenuComponent.js

import React from 'react';
import { View, FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';

function Menu(props) {

    const renderMenuItem = ({item, index}) => {

        return (
                <ListItem
                    key={index}
                    title={item.name}
                    subtitle={item.description}
                    hideChevron={true}
                    leftAvatar={{ source: require('./images/uthappizza.png')}}
                  />
        );
    };

    return (
            <FlatList 
                data={props.dishes}
                renderItem={renderMenuItem}
                keyExtractor={item => item.id.toString()}
                />
    );
}

export default Menu;

Bug:

I am getting the following output which is not desired.

result image

Desired Output:

I want output like image below. How can I achieve it?

Desired output image

Upvotes: 1

Views: 79

Answers (2)

nima moradi
nima moradi

Reputation: 2628

you should render your list accordingly
just define your view

const renderMenuItem = ({item, index}) => {

    return (
            <View style={{...}}>
<Text style={styles.title}>
              {item.name}
<Text>
<Text style={styles.description}>
              {item.description}
<Text>
<Image source: require('./images/uthappizza.png')/>
                </View>
    );
};

Upvotes: 1

RegularGuy
RegularGuy

Reputation: 3676

are you sure that the problem is with flatlist ? , you are seeing a list , and that means that it's working. So... the problem is with ListItem component, according to this and this , the ListItem doesn´t have hideChevron property [in the latest version], try updating the module ;), deleting hideChevron [wich hides the image], or putting chevron ={true} , because you want to show the image like the desired output

Upvotes: 1

Related Questions