Understanding Props, Parent, and Child Components in React Native using TypeScript.

Parent-child-component

In React Native, we often need to pass data from one component to another. This is where the concept of props (short for properties) comes into play. Props are a way to pass data from a parent component to a child component.

Let’s start by creating a simple app that displays a list of posts.

Step 1: Set up a new React Native project with TypeScript

npx expo-cli init my-app --template expo-template-blank-typescript

This command will create a new React Native project with TypeScript support using the Expo CLI.

Step 2: Create a Parent Component

Create a new file called App.tsx in the root directory of your project and add the following code:

import React from 'react';
import { View } from 'react-native';
import FeedPost from './FeedPost';

// Define the type for the data object
type DataObject = {
  id: number;
  title: string;
  content: string;
};
const App = () => {
// Define the data array
  const data: DataObject[] = [
    { id: 1, title: 'Post 1', content: 'This is the first post.' },
    { id: 2, title: 'Post 2', content: 'This is the second post.' },
// ... more data objects
  ];
  return (
    <View>
      {data.map(item => (
        <FeedPost
          key={item.id}
          id={item.id}
          title={item.title}
          content={item.content}
        />
      ))}
    </View>
  );
};
export default App;

In this example, we define a DataObject type that represents the structure of each data object. We then create an array data of DataObject types, which holds our sample data.

The App component maps over the data array and renders a FeedPost component for each item, passing down the id, title, and content properties as props.

Step 3: Create a Child Component

Create a new file called FeedPost.tsx in the same directory and add the following code:

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

// Define the prop types for the FeedPost component
type FeedPostProps = {
  id: number;
  title: string;
  content: string;
};
const FeedPost = ({ id, title, content }: FeedPostProps) => {
  return (
    <View>
      <Text>{title}</Text>
      <Text>{content}</Text>
    </View>
  );
};
export default FeedPost;

In this file, we define a FeedPostProps type that represents the props that the FeedPost component expects to receive from its parent component. The FeedPost component receives these props as parameters and renders the title and content properties.

Step 4: Run the App

Now, you can run the app using the Expo CLI:

npm start

This will start the Expo development server and open the app in a simulator or on your physical device.

Explanation

In this tutorial, we have created a parent component App that holds the data as an array of objects. Each object represents a post with an id, title, and content property.

The App component maps over this data array and renders a FeedPost component for each item, passing down the id, title, and content properties as props.

The FeedPost component is a child component that receives these props and renders the title and content properties.

By using TypeScript, we define the types for the data objects and the props, which helps catch potential type errors during development and improves code maintainability.

In this example, we pass down the id prop to the FeedPost component, even though it's not used within the component itself. This demonstrates that you should pass down only the necessary props to the child component, but in some cases, you might need to pass additional data for identification, updating, or other purposes.

This tutorial covers the basics of how to create a parent component that holds data, pass that data as props to a child component, and how to define and use types in TypeScript to ensure type safety. You can build upon this foundation to create more complex applications and component hierarchies in React Native.