What is Props

We use the props (properties passing) system to properties to config the component

It is a 3-step process.

1. Identify the variable or the value that we want to be provided by the parent

2. Provide a reference to the props that’s coming in from the parent component. (i.e. Props Object)

Props is a Javascript Object

The first argument to the function:

const Header = props => {
  const { textStyle, viewStyle } = styles;
  return (
    <View style={viewStyle}>
      <Text style={textStyle}>{props.headerText}</Text>
    </View>
  );
};

Example

Header Component

// import libraries for making a component
import React from "react";
import { Text, View } from "react-native";

// Make a component
const Header = props => {
  const { textStyle, viewStyle } = styles;
  return (
    <View style={viewStyle}>
      <Text style={textStyle}>{props.headerText}</Text>
    </View>
  );
};

const styles = {
  //  return JSON Object, used to define the CSS Style
  textStyle: {
    // textStyle is the properties
    fontSize: 20
  },
  viewStyle: {
    backgroundColor: "#F8F8F8",
    justifyContent: "center",
    alignItems: "center",
    height: 60,
    paddingTop: 15,
    // Shadow Related config
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2, // darkness of shadow
    //
    elevation: 2,
    position: "relative"
  }
};

// Make the component available to another parts of the app
export default Header;

App

// import { AppRegistry } from 'react-native';
// import App from './App';

// AppRegistry.registerComponent('albums', () => App);

// Index.ios.js - place code in here for iOS!!!

//  Import a library to help create a component
import React from "react";
// import ReactNative from 'react-native';
// Access Object inside the library React Native: components in ReactNative
import { AppRegistry } from "react-native";
//
// Create a component by using the liibraries
// A component is a javascript function that return JSX Object
import Header from "./src/components/header";

// {} is a JS Function, () is a JSX Object
const App = () => {
  // ES6 syntax
  
  // Text is primitive component, style accept Json Object
  return <Header headerText="Albums~~~" />
};


// Render the components to the device
// Please take this component and show it on the screen
// At least register one component to the app, when app is start, it will render the assigned component

// ReactNative.AppRegistry.registerComponent('albums', () => App);
AppRegistry.registerComponent("albums", () => App);