React Native Components 101

Hello folks!

Welcome back to another blog!

If you’ve built React web apps before, React Native will feel familiar… and weird at the same time.

You still write JSX. You still build components. You still manage state and props.

But guess what?

<div></div>
<p></p>
<button></button>

don’t exist here.

Because React Native does NOT render HTML.

Instead, it renders actual native iOS and Android UI components.

So naturally, the question becomes:

If there’s no <div> or <button>, then what do we use?

That’s exactly what this “Components 101” guide is about.

By the end of this blog, you’ll understand the core React Native components that power most mobile UIs.

Web vs Native Rendering

In React for web:

• JSX gets converted into HTML

• Browser renders the UI

Example:

<div>Hello</div>

becomes an actual browser DOM element.

But in React Native:

<View>
  <Text>Hello</Text>
</View>

does NOT become HTML.

Instead:

• iOS renders native UIView

• Android renders native ViewGroup

** Same JSX syntax. Different rendering target.

This connects directly with something we discussed in the earlier React blogs:

JSX is just syntactic sugar.

What really matters is:

• where it renders

• and how it renders under the hood.

The 6 Core Components You’ll Use Everywhere

Honestly, if you learn these 6 components properly, you can build a huge percentage of mobile UIs.

Component	Web Equivalent	Purpose
<View>	<div>	Layout container
<Text>	<p>, <span>	Render text
<Image>	<img>	Display images
<TextInput>	<input>	User text input
<ScrollView>	Scrollable <div>	Scrollable content
<Pressable>	<button>	Handle taps/presses

1. <View> — The Container Component

<View> is one of the most fundamental components in React Native.

It is mainly used for:

• layout

• grouping UI

• spacing

• alignment

Think of it like a flexible container.

<View>
  <Text>Hello</Text>
</View>

Most React Native screens are built using multiple nested <View> components.

2. <Text> — Rendering Text

In React Native, text must always be wrapped inside:

<Text>

Unlike the web, plain text cannot exist directly inside <View>.

Correct:

<View>
  <Text>Hello</Text>
</View>

Wrong:

<View>
  Hello
</View>

This is one of the most common beginner mistakes 😄

3. <Image> — Displaying Images

The <Image> component is used to render:

• local images

• remote images

• icons

Example:

<Image
  source={{
    uri: "https://example.com/photo.png"
  }}
  style={{ width: 100, height: 100 }}
/>

Unlike the web, width and height are usually required for images.

4. <TextInput> — Taking User Input

This component is similar to an HTML input field.

<TextInput
  placeholder="Enter your name"
/>

You’ll commonly use it for:

• forms

• login screens

• search bars

• chat applications

5. <ScrollView> — Scrollable Content

Mobile screens are small.

So, when content becomes larger than the screen height, we use:

<ScrollView>

This allows users to scroll vertically through content.

6. <Pressable> — Handling Touch

Since mobile devices don’t really have “clicks,” React Native uses touch interactions.

<Pressable> is commonly used to handle:

• taps

• presses

• touch feedback

Example:

<Pressable onPress={() => alert("Tapped!")}>
  <Text>Tap Me</Text>
</Pressable>

Let’s Build a Small UI

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Hello React Native!
      </Text>

      <Pressable
        style={styles.button}
        onPress={() => alert('Tapped!')}
      >
        <Text style={styles.buttonText}>
          Tap Me
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  title: {
    fontSize: 24,
    fontWeight: 'bold'
  },

  button: {
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 8,
    marginTop: 20
  },

  buttonText: {
    color: 'white',
    fontSize: 16
  }
});

This small example already demonstrates:

• layout

• text rendering

• touch handling

• styling

which forms the foundation of most React Native applications.

Styling in React Native

Styling in React Native feels similar to CSS, but there are important differences.

Instead of writing CSS files, React Native uses:

StyleSheet.create()

Styles are written as JavaScript objects.

Example:

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Also:

• no className

• styles are passed using style

• Flexbox is heavily used by default

Conclusion

At first, React Native components may feel unusual if you come from web development.

But once you understand:

• <View> for layout

• <Text> for text

• <Pressable> for interactions

everything starts feeling natural.

And the interesting part is:

Even though the rendering target changes, the React thinking process stays the same.

You still build:

• reusable components

• state-driven UI

• declarative interfaces

Just for mobile instead of the browser!