Basic Components of React Native

React native provides us with a lot of components ranging from simplest to the most advanced ones. Ultimately it's our choice to use components based out of our use case. But, irrespective of the the use case we will be using these components in most of the real world applications. Let's dive in.

These are the most basic components of React native.

• View
• Text
• Text Input
• Style Sheet
• Image
• Flat List

View

A View is a container of components in React native. We can think of it as a sibling of div in web world. We can add layout to a View using flexbox, add styling to it using style properties and provide touch functionality as well. Also a View can be nested and can have zero or more children. Follow this link to view all available properties of View : link

Text

As the name suggests this component is used to render text. Very similar to View, a Text component can be nested, added styles and can also provide touch functionality. Follow this link to view all available properties of Text : link

Text Input

A basic component to take input from user. It inherits properties from View as well as add new properties which are useful in handling the text user has provided for example auto-correction, auto-capitalization, placeholder etc. Also we have useful events that can be raised by this component and the most used one is onChangeText. To view all props for this component follow this link: link

Style Sheet

A StyleSheet is similar to CSS StyleSheets and it provides abstraction over the types of styles we can use in React native components. We can have styles inline to component as a json object. But, a good practice is to externalize it using a StyleSheet object so that it increases readability and can be reused. This is simple component, but it is widely used.

Image

Applications without Images are impossible. This is a simple yet, very powerful component to display images on UI. We can display different types of images, including network images, static resources and images from local storage like images in gallery. We have bunch of properties to look out for like onLoadStart, onLoadEnd which we can use to display activity indicator. You can have a look at all available options here: link

Flat List

In a world of scrolling we definitely need some component to display a list of components which are of same type like a list of cards to display Instagram images. As the use cases are more we have abundant features provided as part of FlatList. It takes in few mandatory fields and displays content accordingly.

• data ( array of objects to be displayed )
• renderItem ( how each item should be renderd on screen )
• keyExtractor ( for React to uniquely identify each element )

Other useful props can be found in this link: link

Hope you like this article. Keep learning . . . . .