As somebody who knows React, you might find yourself going down the rabbit hole of curiosity and learning about React Native. React Native is a framework for building mobile applications using React-like syntax. This essentially allows you to develop an application for Android, iOS, and web browsers using one codebase. Think of it like writing once and deploying everywhere. Pretty cool ain't it? You can learn more from the official documentation website.

In this article I will be showing you some components from React Native that are commonly used for defining the markup for mobile applications. Since I've mentioned the word markup, this implies that there is some kind of building block for creating user interfaces, similar to the HyperText Markup Language for web development (HTML).

1. View

The first and most common React Native component is the View component. It is used as a container or to group other elements. This is the equivalent of the div element from HTML. To import the View component and anything else from React Native, you can use the import syntax:

import { View } from 'react-native'

You can use a comma-separated list inside some curly braces to import multiple items form the same module as shown below:

import { View, Text, ImageBackground } from 'react-native'

import { View } from 'react-native'

const App = () => {
  return (
    <View></View>
  )}

The View component has an opening and closing tab which means other elements can be placed inside it. For example, you could place some text inside it as shown below:

<View>
  <Text>Hello World!👋</Text>
</View>

2. Text

The Text component is used to define an element that displays words or numbers.

  <Text>Hello World</Text>

Unlike HTML, there is no native element to define a heading or create a distinction between a normal paragraph and a heading. This distinction can only be made using styles.

Adding Styles

To add styles to your components, you need to import the StyleSheet from the React Native module as shown below:

import { StyleSheet } from 'react-native'

This can then be used to style your components by passing the style attribute. The example below shows us how:

import { View, Text } from 'react-native'

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Harare</Text>
    </View>
  );
};

export default App;

// Creating the styles
const styles = StyleSheet.create({
  container: {
    textAlign: "center",
  },
  text: {
  color: "white",
  fontSize: 41,
  fontWeight: "bold",
  backgroundColor: "rgba(255, 0, 0, 0.5)",
},
});

The style attribute is used to assign custom styles to a component. We reference the specific style as an object property using dot notation e.g. style.container. I am still quite new to React Native but as you can see, a solid understanding of HTML, CSS, and JavaScript is helpful to get started. You can actually figure out most of the property names if you have good CSS knowledge.

3. ImageBackground

The ImageBackground component is used to add images to our mobile applications interface. The ImageBackground component can be imported from the React Native module just like the others and styles can be added the same way.

import { ImageBackground } from "react-native";
import myImg from '../assets/images/your-image.png'

<ImageBackground
  source={myImg}
  resizeMode='contain' // Can also be cover
  style={styles.image}>
</ImageBackground>

4. ScrollView

This component is a wrapper component which becomes scrollable to render its overflowing children elements. It has an attribute called contentContainerStyle which works like the style attribute and the styles will be applied to the scroll view content container which wraps all of the child views. Here is an example.

<ScrollView contentContainerStyle={styles.listContainer}>
  <Text style={styles.listItem}>
    Text Item 1.
  </Text>
  <Text style={styles.listItem}>
    Text Item 2.
  </Text>
  <Text style={styles.listItem}>
    Text Item 3.
  </Text>
</ScrollView>

5. FlatList

This component is used to render the items in a scrollable list view. Some of the props that this component has are:

• renderItem: It is used to render the data into the list.
• data: It is basically an array of data.
• ItemSeparatorComponent: It is used to render in between each item.
• ListEmptyComponent: It is rendered when the list is empty.
• ListFooterComponent: It is rendered at the bottom of all items.

It also has the following methods:

• flashScrollIndicators(): It displays the scroll indicators momentarily.
• getNativeScrollRef(): It provides a reference to the underlying scroll component.
• getScrollResponder(): It provides a handle to the underlying scroll responder.
• getScrollableNode(): It provides a handle to the underlying scroll node.
• recordInteraction(): It tells the list of an interaction that has occurred.

The FlatList component is provided by React Native and imported from it:

import { FlatList } from 'react-native';

You can then define an array of data to pass to the props:

const DATA = [
  {
    id:"1",
    title:"Boston Celtics"
  },
  {
    id:"2",
    title:"Cleveland Cavaliers"
  },
  {
    id:"3",
    title:"Houston Rockets"
  },
]

You can then define the structure of a component and a rendering function:

// Component structure
const Item = ({title}) => {
  return( 
    <View style={styles.item}>
      <Text>{title}</Text>
    </View>
  );
}

const renderItem = ({item})=>( 
  <Item title={item.title}/>
);

return (
  <View style={styles.container}>
    <FlatList
       data={DATA}
       renderItem={renderItem}
       keyExtractor={item => item.id}
    />
  </View>
  );

6. TouchableOpacity

This is a wrapper for making views respond properly to touches. When pressed down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

Here is an example implementation:

<TouchableOpacity
  accessibilityLabel='Action escription' onPress={() => {
    alert("Hello world")
  }}>
  Element Contents
</TouchableOpacity>

7. Image

The Image component is used to render an image in the user interface. This is much like the HTML img element except that the source attribute is used for linking the images URL. Here is an example:

<Image
  source={require('../assets/images/house.svg')}
  style={styles.icon}
/>

Conclusion

There are a lot of components that React Native provides, the ones in this article are just some of the more popular ones. In this article, I have mentioned View, Text, Image Background, Scroll View, Flat List, Touchable Opacity, and Image. Learn more about React Native from the official documentation website. I will certainly be piling on more React Native knowledge over the coming months and I encourage you to do so also. Feel free to share feedback with me using the contact form on my website. Until then, happy coding!