Understanding Props, Parent, and Child Components in React Native using TypeScript.
Published: 2024-06-24 01:17:02

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**

```bash
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:

```tsx
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:

```tsx
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:

```bash
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.