Pass Props

Now that we have our components and screen we need to update it, so that it can render data that is passed to it rather than displaying hard-coded information. One method for passing data between components in React Native is called props.

Props (shorthand for properties) are arguments passed into React components. You can add props to your function and reference the props variable to access the parameters like this:

const MyComponent = props => {
  console.log(props.arg1);
};

Another way you can access the data is to destructure the arguments you want from props:

const MyComponent = ({arg1}) => {
  console.log(arg1);
};

We will use both methods in this guide.

Add Props to VideoCard

Let's start by adding props to VideoCard. The first step is to define the data types for the props in TypeScript. In TypeScript, interfaces fill the role of naming and defining these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

Let's define an interface for the props.

• Open VideoCard.tsx and insert an interface that declares the types of the props, below the import statements.

interface IProps {
  title: string;
  imgURL: string;
  description: string;
}

• In the arrow function for VideoCard, destructure each field in the interface.
• Add :IProps to enforce the type of each field in the object.

const VideoCard = ({title, imgURL, description}: IProps) => {};

• Replace the hard-coded values with their respective values.

<View style={styles.videoCardContainer}>
  <Image style={styles.videoImage} source={{uri: imgURL}} />
  <View style={styles.videoTextContainer}>
    <Text style={styles.videoTitle}>{title}</Text>
    <Text style={styles.videoDescription}>{description}</Text>
  </View>
</View>

The updated VideoCard.tsx should look like this:

import * as React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';

interface IProps {
  title: string;
  imgURL: string;
  description: string;
}

const VideoCard = ({title, imgURL, description}: IProps) => {
  return (
    <View style={styles.videoCardContainer}>
      <Image style={styles.videoImage} source={{uri: imgURL}} />
      <View style={styles.videoTextContainer}>
        <Text style={styles.videoTitle}>{title}</Text>
        <Text style={styles.videoDescription}>{description}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  videoCardContainer: {
    height: 400,
    width: 550,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 5,
  },
  videoTextContainer: {
    height: '25%',
    display: 'flex',
    justifyContent: 'space-around',
    padding: 10,
  },
  videoImage: {
    height: '75%',
  },
  videoTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  videoDescription: {
    color: 'white',
  },
});

export default VideoCard;

Pass Props to VideoCard

Now we need to update the Landing Screen to pass values to VideoCard.

• Open LandingScreen.tsx.
• Pass in title, description, and imgURL to the VideoCard component. Change title to "My Video", and description to "My Video Description", to make it easier to verify we are passing the props.

The updated LandingScreen.tsx should look like this:

import * as React from 'react';
import Header from '../components/Header';
import VideoCard from '../components/VideoCard';

const LandingScreen = () => {
  return (
    <>
      <Header />
      <VideoCard
        title="My Video"
        description="My Video Description"
        imgURL="https://le1.cdn01.net/videos/0000169/0169322/thumbs/0169322__002f.jpg"
      />
    </>
  );
};

export default LandingScreen;

• Hit "play" or press "r" to reload the app if needed, and there is our video card with updated values!

Next