Mastering Props, State, and the 'Essential Four'

In mobile development, components are like blueprints. But a blueprint alone is static. To make an app feel "alive," we need to master the three React fundamentals mentioned in the official documentation: JSX, Props, and State. You should be familiar with these in React fundamentals.

• JSX: The syntax that lets us write our UI inside JavaScript (e.g., <Text>Hello!</Text>).

• Props: Short for "properties." Think of these as Blueprints. They allow us to pass data (like a name or an image) from a parent to a child component to customize it.

• State: The component's Memory. This is how a component tracks data that changes over time, like whether a "Follow" button has been pressed.

Let’s build a Profile Card where the user can actually "Follow" you and watch the follower count change.

import React, { useState } from 'react'; //
import { Image, Pressable, Text, View } from 'react-native';

interface ProfileCardProps {
  name: string;
  bio: string;
  imageUri: string;
}

const ProfileCard = (props: ProfileCardProps) => {
  // STATE: Our component's memory
  const [isFollowing, setIsFollowing] = useState(false);
  const [followerCount, setFollowerCount] = useState(1240); // Initial dummy count

  const toggleFollow = () => {
    if (isFollowing) {
      setFollowerCount(followerCount - 1);
    } else {
      setFollowerCount(followerCount + 1);
    }
    setIsFollowing(!isFollowing);
  };

  return (
    <View className="p-6 bg-white rounded-3xl shadow-xl items-center w-80">

      {/* PROPS: Passing the image source to a Core Component */}
      <Image 
        source={{ uri: props.imageUri }} 
        className="w-24 h-24 rounded-full mb-4 bg-gray-200" 
      />

      {/* PROPS: Rendering custom text passed from the parent */}
      <Text className="text-xl font-bold text-gray-800">{props.name}</Text>
      <Text className="text-blue-500 font-semibold mb-2">{followerCount} Followers</Text>

      <Text className="text-gray-500 text-center mb-6 leading-5">
        {props.bio}
      </Text>

      {/* STATE: Interaction triggers a re-render */}
      <Pressable 
        onPress={toggleFollow}
        className={`px-10 py-3 rounded-full ${isFollowing ? 'bg-gray-200' : 'bg-blue-600'}`}
      >
        <Text className={`font-semibold ${isFollowing ? 'text-black' : 'text-white'}`}>
          {isFollowing ? 'Following' : 'Follow Me'}
        </Text>
      </Pressable>
    </View>
  );
};

export default function App() {
  return (
    <View className="flex-1 justify-center items-center bg-slate-50">
      {/* Passing data via Props */}
      <ProfileCard 
        name="Olamiji Badmos" 
        bio="Documenting my journey from Web Dev to Mobile. Currently mastering Core Components!"
        imageUri="https://api.dicebear.com/7.x/avataaars/png?seed=Felix"
      />
    </View>
  );
}

• The Parent-Child Relationship: In this example, App is the Parent Component and ProfileCard is the Child Component. The Parent sends "Blueprints" (Props) like the name and imageUri down to the child.

• Memory (State): When you press the button, we call setIsFollowing. This tells React Native: "Hey, the memory has changed! Re-draw the screen".

• The Flexbox Flip: Notice we didn't use flex-col. In React Native, the View defaults to a column layout, so our image, name, and button stack vertically automatically.

• Nesting: We nested Text, Image, and Pressable inside a View. It’s "Views all the way down," just as the documentation describes.

Summary of the Fundamentals

• Props are for Configuration: Use them to set up a component when it first appears.

• State is for Interaction: Use it to track data that you expect to change over time (like our follower count).

• Stick to Core Components: You can build 90% of your app's UI using just View, Text, and Image.

If you’ve made it this far, congratulate yourself. We’ve successfully moved from "Simulator fascination" to actually understanding how Native Components are built, styled, and made interactive.

By demonstrating how Props (our blueprints) and State (our component's memory) work in React Native, we’ve bridged the biggest gap between web development and mobile development. If you are familiar with React, you’ll notice that while the "tags" have changed from div to View, the core logic remains the same.

We are now roughly 30% of the way to fully understanding React Native. We have the environment, we have the core building blocks, and we have interactivity.

I’m documenting every step of this journey so we can learn together. Don’t just read, build! Take the code from today, tweak the props, and see it come to life on your own simulator. You can find the full series here.