Instant React Native ListViews

Use Ignite to Generate ListViews on Demand

Gant Laborde
Red Shift
Published in
4 min readJun 30, 2016

SPECIAL UPDATE: Do you want to use FlatList or SectionList instead? Ignite support for these VirtualizedLists are available, too! Though this blog reviews the logic behind the classic ListView, the basics are available in Ignite for generating any kind of list.

Now, back to the original blog post:

Why ListViews?

ListViews are a fundamental part of apps. I’ve been asked, and yes, you could just bypass ListViews by using a ScrollView, but then you forgo the optimizations ListViews afford. Whenever you can use a ListView, do yourself a favor, and use it!

Keep in mind, each component you load pulls from a limited set of resources, whether it be network, animation frames, or processing — the ListView helps you optimize and lazy load components.

ListViews in this post:

First: We’ll generate a ListView (⚡ BOOM EASY⚡)
Second: We’ll review how to modify the generated React Native ListView.

Let’s Get Crackin’! Queue the Cheesy Graphic!

This is the easy part. Using the Ignite generator you get to choose between a Row or Grid view.

$ ignite generate listview ScreenNameHere

Two files are generated, one for the actual ListView and one for the styles.

For those of you who’ve had to natively handle a Grid or CollectionView, you’ll appreciate that the only difference when you choose `Row List` vs `Grid List` is contained in the stylesheet!

Now your ListView has arrived! But what did the generator make? Let’s ask the obvious question:

Your generated views are a template with steps conveniently marked out. ListView template comes with 4 well-documented steps inside.

Step 1: The Data for the ListView

Load this however you want. We just need something to display. The objects are obvious placeholders.

Step 2: Define difference

This is just a function that tells ListView how to understand differences.

Step 3: Digest your own data

When you get passed your object, what will you do with it? By default the template code just throws it in a Text. You should create a custom component here. Do you think the generator should create a component for you by default? We’d love to hear your feedback! Tweet me!

Step 4: Optional — Update when props update

If you’re using Redux, you’ll need to update your datasource when new props come in.

Easy enough! I’ll keep this blog post updated if anything big changes, so bookmark it! Oh and please spread the word with a tweet and star on Github if you like where we’re going.

About Gant

Gant Laborde is Technical Lead at Infinite Red (⚙ web and mobile app dev ⚙), published author, public speaker, and mad-scientist in training. Read the writings of Gant and his co-workers in our Red Shift publication. If you’re looking to discuss nerdy tech, he’s all ears. View half-witty half-groan technical tweets with @GantLaborde on twitter.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Red Shift

The official Infinite Red publication for React Native design & development. We’re a fully distributed team building world-class apps for over 20 years for clients all around the world.

Written by Gant Laborde

Software Consultant, Adjunct Professor, Published Author, Award Winning Speaker, Mentor, Organizer and Immature Nerd :D — Lately full of React Native Tech

No responses yet

What are your thoughts?