Basic components in React Native

Pankaj Tyagi

19 November 2024

React Native allows us to create mobile apps using JavaScript, which is compatible with both Android and iOS platforms.

This framework not only saves development time by enabling us to code once for both platforms, but it also enhances the overall efficiency of the development process.

Moreover, React Native utilizes native components instead of web components, which leads to improved performance and a more seamless user experience.

In this context, it’s important to note that components serve as the basic building blocks of any application.

In this post, we’ll explore fundamental React Native components. Understanding these will provide you with a solid foundation for effectively building your mobile applications.

So, let’s delve into the key components we are going to study.
1. View
2. Text
3. Image
4. TextInput
5. ScrollView

Before we dive into these fundamental components, make sure you have React Native set up on your machine. If you haven’t done so yet, follow the official setup guide here to get started.

1. View in React Native

In React Native, View is a container and most fundamental component. The view is just like a <div> element in HTML.
It can have nested views inside it and can also have 0 to many children of any type.

Usage of View :
1. View can be used to divide the page and set different styles.
2. It supports touch events and also has many other useful properties.
3. View can be used where you need to wrap content in a container.
What we can’t do in view :
We can’t wrap any text or any other data directly in view.
for ex:

<View>this is view</View> // we can't write text here.

1	<View>this is view</View> // we can't write text here.

Let’s take an example of view.

import React from "react";
import { View, Text } from "react-native";

const exampleOfView = () => {
  return (
    <View//==>this view is main/Parent container
      style={{//you can change style accordingly
        flexDirection: "column",//you can change this to "row"
        height: 150,
        padding: 15
      }}
    >
      <View style={{ backgroundColor: "green", flex: 0.4 }} />
      <View style={{ backgroundColor: "yellow", flex: 0.6 }} />
      <Text>Example of view</Text>
    </View>
  );
};

export default exampleOfView;

import React from "react";

import { View, Text } from "react-native";

const exampleOfView = () => {

return (

<View//==>this view is main/Parent container

style={{//you can change style accordingly

flexDirection: "column",//you can change this to "row"

height: 150,

padding: 15

}}

<Text>Example of view</Text>

</View>

);

};

export default exampleOfView;

2. Text in React Native

The Text component is used to display text on the page, wrapping the content appropriately. This component <Text> is similar to the <p /> tag in HTML.

Additionally, we can apply various styles to the text using the style prop, allowing for customization and enhanced visual appeal.

Here’s an example of the Text component:

import React from "react";
import { View, Text } from "react-native";

export default class App extends React.Component {
render() {
return (
<View>
<Text>This is the example of the Text </Text>
</View>
);
}
}

import React from "react";

import { View, Text } from "react-native";

export default class App extends React.Component {

render() {

return (

<View>

<Text>This is the example of the Text </Text>

</View>

);

}

Output for Text and View:

Text and View Component-

The Text component is allows you to display text on the page whereas View is essentially a container that can hold other components, such as Text, Image, Button, or other Views.

3. Image view in React Native

In React Native, we can display images from various sources, including local disks, network images, static resources, and temporary local files.

This flexibility allows us to effectively showcase images within our app.

The Image component in React Native is similar to the <img /> tag in HTML, making it easy to implement. Furthermore, we can use the BackgroundImage component to set background images on any page.

This component allows us to place any child elements, such as text or additional images, inside it, thereby enhancing the visual design and functionality of our application.

Overall, these image components provide robust options for integrating visuals, contributing significantly to the user experience.

import React from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1, // Allow the container to take full height
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
    paddingTop: 40,
  },
  staticSource: {
    width: 240,
    height: 220,
  },
  networkSource: {
    margin: 20,
    width: 66,
    height: 58,
  },
  text: {
    marginTop: 10,
    fontSize: 16,
    textAlign: 'center',
  },
});

const ImageExample = () => {
  return (
    <View style={styles.container}>
      {/* Static source or image from folder example */}
      <View style={{ alignItems: 'center' }}>
        <Image
          style={styles.staticSource}
          source={require('./assets/react.png')} // Update the path here
        />
        <Text style={styles.text}>Example of Image View</Text>
      </View>

      {/* Image from network or URI example */}
      <View style={{ alignItems: 'center' }}>
        <Image
          style={styles.networkSource}
          source={{
            uri: 'https://example.images/react.png',
          }}
        />

      </View>
    </View>
  );
};

export default ImageExample;

import React from 'react';

import { View, Image, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({

container: {

flex: 1, // Allow the container to take full height

justifyContent: 'center', // Center content vertically

alignItems: 'center', // Center content horizontally

paddingTop: 40,

staticSource: {

width: 240,

height: 220,

networkSource: {

margin: 20,

width: 66,

height: 58,

text: {

marginTop: 10,

fontSize: 16,

textAlign: 'center',

});

const ImageExample = () => {

return (

{/* Static source or image from folder example */}

<Image

style={styles.staticSource}

source={require('./assets/react.png')} // Update the path here

<Text style={styles.text}>Example of Image View</Text>

</View>

{/* Image from network or URI example */}

<Image

style={styles.networkSource}

source={{

uri: 'https://example.images/react.png',

}}

</View>

);

};

export default ImageExample;

Output for Image view:

Image view Component-

In React Native, an Image component is used to display images in your app. An Image View typically refers to displaying an image within a View component (or another container).

4. Text Input in React Native

Text input from users is the most important part of any application. In React native we can achieve this by using the Text input component.

This is similar to the <input> tag in HTML.

We can use onChangeText to detect the change in input. There are also other events, such as onSubmitEditing and onFocus that can also be used.

import React, { useState } from 'react';
import { StyleSheet, Text, TextInput, View, Button, Alert } from 'react-native';

const InputTextExample = () => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    if (text.trim() === '') {
      Alert.alert('Validation', 'Please enter some text!');
    } else {
      Alert.alert('Submitted', `You entered: ${text}`);
      setText(''); // Clear input after submission
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Input you text here!!"
        placeholderTextColor="white"
        onChangeText={setText}
        value={text}
        returnKeyType="done" // Shows "Done" on keyboard
        onSubmitEditing={handleSubmit} // Submit on pressing "Done"
        blurOnSubmit // Dismiss keyboard after submission
      />
      <Button title="Submit" onPress={handleSubmit} />
      <Text style={styles.output}>
        {text}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
    backgroundColor: '#f9f9f9',
  },
  input: {
    height: 50,
    backgroundColor: 'gray',
    fontSize: 18,
    paddingHorizontal: 10,
    marginBottom: 16,
    borderRadius: 5, // Rounded corners
    borderWidth: 1,
    borderColor: '#ccc', // Light border color
  },
  output: {
    padding: 16,
    fontSize: 20,
    color: 'red',
  },
});

export default InputTextExample;

import React, { useState } from 'react';

import { StyleSheet, Text, TextInput, View, Button, Alert } from 'react-native';

const InputTextExample = () => {

const [text, setText] = useState('');

const handleSubmit = () => {

if (text.trim() === '') {

Alert.alert('Validation', 'Please enter some text!');

} else {

Alert.alert('Submitted', `You entered: ${text}`);

setText(''); // Clear input after submission

}

};

return (

<TextInput

style={styles.input}

placeholder="Input you text here!!"

placeholderTextColor="white"

onChangeText={setText}

value={text}

returnKeyType="done" // Shows "Done" on keyboard

onSubmitEditing={handleSubmit} // Submit on pressing "Done"

blurOnSubmit // Dismiss keyboard after submission

{text}

</Text>

</View>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

padding: 16,

backgroundColor: '#f9f9f9',

input: {

height: 50,

backgroundColor: 'gray',

fontSize: 18,

paddingHorizontal: 10,

marginBottom: 16,

borderRadius: 5, // Rounded corners

borderWidth: 1,

borderColor: '#ccc', // Light border color

output: {

padding: 16,

fontSize: 20,

color: 'red',

});

export default InputTextExample;

Output for Text-Input view:

Text Input Component-

In React Native, the TextInput component is used to capture user input as text.

It is a versatile component that can be used for various types of inputs, such as forms, search bars, login screens, and more

5. Scroll View in React Native

As we are all aware, the ScrollView component provides the functionality to scroll through multiple child components and views.

Essentially, the ScrollView establishes scrolling boundaries for the nested children and views on our page.

In React Native, it acts as a container that wraps our nested views, allowing for better organization and usability. Additionally, we can set the scrolling direction to either horizontal or vertical.

By default, the ScrollView scrolls vertically; however, we can easily change this to horizontal by using the horizontal: true prop.

Overall, the ScrollView is a powerful component that enhances the user experience by allowing smooth navigation through content.

import React from 'react';
import { Image, ScrollView, Text } from 'react-native';



export default App = () => (
  <ScrollView>
   // add your view or content here.
   
  </ScrollView>
);

import React from 'react';

import { Image, ScrollView, Text } from 'react-native';

export default App = () => (

// add your view or content here.

</ScrollView>

);

One Code for all basic components-

import React, { useState } from 'react';
import { View, Text, Image, TextInput, ScrollView, StyleSheet } from 'react-native';

const App = () => {
  const [inputText, setInputText] = useState('');

  return (
    <ScrollView style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.title}>React Native Components</Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.subtitle}>Text Component</Text>
        <Text style={styles.textContent}>This is a simple example of displaying text in React Native.</Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.subtitle}>Image Component</Text>
        <Image
          style={styles.image}
          source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} // Example image URL
        />
      </View>

      <View style={styles.section}>
        <Text style={styles.subtitle}>TextInput Component</Text>
        <TextInput
          style={styles.textInput}
          value={inputText}
          onChangeText={(text) => setInputText(text)}
          placeholder="Type something here"
        />
        <Text style={styles.textContent}>You typed: {inputText}</Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  section: {
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 18,
    marginBottom: 10,
    color: '#333',
  },
  textContent: {
    fontSize: 16,
    color: '#666',
  },
  image: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
    alignSelf: 'center',
  },
  textInput: {
    borderWidth: 1,
    padding: 10,
    borderRadius: 5,
    borderColor: '#ccc',
    marginBottom: 10,
  },
});

export default App;

import React, { useState } from 'react';

import { View, Text, Image, TextInput, ScrollView, StyleSheet } from 'react-native';

const App = () => {

const [inputText, setInputText] = useState('');

return (

<Text style={styles.title}>React Native Components</Text>

</View>

<Text style={styles.subtitle}>Text Component</Text>

<Text style={styles.textContent}>This is a simple example of displaying text in React Native.</Text>

</View>

<Text style={styles.subtitle}>Image Component</Text>

<Image

style={styles.image}

source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} // Example image URL

</View>

<Text style={styles.subtitle}>TextInput Component</Text>

<TextInput

style={styles.textInput}

value={inputText}

onChangeText={(text) => setInputText(text)}

placeholder="Type something here"

<Text style={styles.textContent}>You typed: {inputText}</Text>

</View>

</ScrollView>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

padding: 20,

section: {

marginBottom: 20,

title: {

fontSize: 24,

fontWeight: 'bold',

textAlign: 'center',

subtitle: {

fontSize: 18,

marginBottom: 10,

color: '#333',

textContent: {

fontSize: 16,

color: '#666',

image: {

width: 100,

height: 100,

resizeMode: 'contain',

alignSelf: 'center',

textInput: {

borderWidth: 1,

padding: 10,

borderRadius: 5,

borderColor: '#ccc',

marginBottom: 10,

});

export default App;

Output for all basic components:

All basic components output-

This React Native app demonstrates the use of basic components: Text, Image, and TextInput.

It displays a title, a description, an image from a URL, and allows users to input text. The app showcases layout with ScrollView.

References

https://reactnative.dev/docs/components-and-apis

Conclusion

In this blog, we explored several basic components in React Native, including View, Text, Image, TextInput, and ScrollView.

Each of these components plays a crucial role in building a user-friendly mobile application.

By understanding how to utilize these components effectively, we can create engaging and responsive user interfaces that enhance the overall user experience.

The code snippets provided throughout the blog illustrate how to implement these components in real-world scenarios, showcasing their versatility and functionality.

You can also check other blogs from here.

Thank you for reading! ❤️

I hope this blog has helped you gain a solid understanding of these essential React Native components and inspired you to leverage their capabilities in your own projects.