Learn more about React Native components like Buttons , Flatlist and ScrollView

In this post I will discuss some more React Native components like Buttons, Flatlists, ScrollViews etc.,

This is a part of my series on React Native. Make sure you check out the others.

We will be discussing about

Buttons.
Images.
Flatlists.
ScrollViews.
TouchabeOpacity.

Before using any of them we have to import the components.


import React from 'react'
import {Button, Image, Flatlist, ScrollView, TouchabeOpacity,  TouchableWithoutFeedBack}

1. Buttons

Buttons can be used in our react native app by importing them and using them in our code just like in HTML or in React's jsx.

We can use onPress={} prop to give it a functionality when the button is clicked.

In short you can use all the functionality of React's button to a React Native button.

The only difference is, we have to add a title ="Give me a name" prop to add a text to it.


<Button title="Click Me!!"onPress={button}/>

2. Image

As same as the button above, Images in react native use the same principles of HTML and React's jsx images with minor differences.

The differences are,

Source in images is not src but source.
And to use an uri/url and to export a local image, we have to use something like


   <Image
          source={{
          uri: 'https://coding-magnified.tech',
        }}
      />
 <Image
        style={styles.image}
        source={require('/coding-magnified-logo.png')}
      />

You can also use style prop to style both buttons and images in react native.

3. Flatlists

Flatlists are the map functions of react native but without the function.

It is used when we want to output a array (list) of data to the frontend.

For using Flatlists we need to use SafeAreaView and not View because we are rendering a list of elements and so to keep them within the area/boundary of the mobile device we have to use this component and wrap it around flatlist.

Below is the code example,

import {SafeAreaView,FlatList,Text} from 'react-native'

const MY_NAME = [
  {
    id: '1',
    name: 'Gautham',
  },
  {
    id: '2',
    name: 'Vijayan', 
];
return(
<SafeAreaView>
<Flatlist data={MY_NAME}
             keyExtractor={item => item.id}
             renderItem={(item)=>{
             <Text>{item.name}</Text>
}} />
</SafeAreaView>

You can see that it is exactly similar to react's(ES6) map function.

Here renderItem is nothing but the function which will render the items out to the frontend and keyExtractor extracts the key out of the array data so we need not use that in renderItem again.

There are a lot more props which can be add to the flatlist, but as this tutorial is for beginners, you can read this wonderful medium article about flatlist which discusses about the other props of flatlist.

4. ScrollView

Its the exact copy of flatlist but with a single big difference.

Flatlist lazy loads the items and ScrollView loads all of the data when the UI first renders.

This may cause performance issues and must be used wisely.


<SafeAreaView>
<ScrollView>
The data which needs to be rendered.
</ScrollView>
</SafeAreaView>

5. TouchableOpacity

It can be analogous to the hover motion of mouse in desktop/mac.

When a button/any component in React-Native is touched, we can lower its opacity with this component by wrapping it around the btoon/any other component.

This may seem trivial, but this is an exceptional UX tool for any mobile app as it subtly provides a difference to the user when an touching a button/component.


 <TouchableOpacity>
 <Text> I will have lower opacity when touched</Text>
</TouchableOpacity>

And that's all the major React-Native tags I use in my projects.

If I want any other Components which will be needed in my projects, I will head on to the React-Native docs and spend time to learn and apply it to my projects.

In my next post I will discuss about creating navigators for your app which form the backbone of traversing from one page to another in any mobile app.

There a few types of navigators I will discuss.