question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

List Item is not rendering properly when I am trying to render them dynamically

See original GitHub issue

Dynamic List doesn’t look pleasant.

Here is my code:

    <Content>
          <Card> 
            <List
              dataArray={this.props.employees}
              renderRow={item => (
                // <ListItem icon>
                <ListItem onPress={() => this.editEmp(item)}>
                  <CardItem>
                    <Body>
                      <Text>
                        {"    "}
                        {item.name}
                      </Text>
                    </Body>
                  </CardItem>
                </ListItem>
              )}
            />
          </Card>
        </Content> 

Also, item looks something like this: image I am using Nokia 5 with android Nougat. When rendered, It shows this: image I think I can see a pattern of rendering lists items in an incorrect way, grouping of an item, then two items together most of the times, which looks unpleasant to eyes.

Please help regarding this issue.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
akhil-gacommented, Jan 11, 2018

@AnubhavUjjawal we are deprecating List. Use FlatList instead. This will be documented.

1reaction
yogabbagabbcommented, Oct 27, 2018

https://nativebase.io/docs/v0.3.0/components#list does not yet mention that List will be (or is) deprecated. fyi.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native Dynamically created components not rendering ...
I'm trying to create a list by dynamically adding the list items to an array in the state and then using the map...
Read more >
Rendering A List With React - Vegibit
To render a list dynamically in React, we start by adding a property to the state object. We can populate that property with...
Read more >
Lightning component not rendering dynamically created ...
I built a prototype, and I am trying to get it to render the created lightning components correctly. Here is the code for...
Read more >
Render React Cards and Images Dynamically - In Plain English
Rendering Images/cards/elements based on an API response is something common in React. Adding React components in a row responsively is ...
Read more >
React key attribute: best practices for performant lists
We'll have an Item component, that renders the country's info: ... All those bugs and performance implications only happen in “dynamic” ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found