Basic components in React Native

Updated 25 October 2024

Save

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

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.

 

Let’s take an example of view.

 

 

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:

 

Output for Text and View:

Screenshot-2024-10-24-at-4.45.56 PM

 

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.

Output for Image view:

Screenshot-2024-10-24-at-5.00.02 PM

 

4. Text Input in React Native

Taking 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.

 

Screenshot-2024-10-25-at-1.42.28 PM

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.

 

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.

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home