I. Tạo thư mục chứa Component

• Tạo thư mục src - tạo component bên trong src, tạo thêm Avatar và Dummy, sau đó tạo file index.js như hình
• 

II. Tạo Component và export

• Tạo component Avatar trong index.js 
• import React, {Component} from "react";

  import { View } from "react-native";

  
  

  export default class Avatar extends Component{

      render(){

          return

          <View></View>

      }

  }
• Export Component Avatar: Quay trở lại index.jx của component

III. Chạy Component

• Đến thư mục App.js import component Avatar vào
• //B1 Import thư viện

  import React, { Component } from "react";

  import {

    AppRegistry, View, Text, StatusBar

  } from "react-native";

  import { Avatar } from "./src/component";

  
  

  //B2 Viết code Class

  export default class Demo extends Component {

    render() {

      return (

        <Avatar />

      );

    }

  }

  
  

  //B3 Register

  AppRegistry.registerComponent('Demo', () => Demo);
• Quay trở lại index.js trong component Avatar và in ra dòng Hello

IV. In ra hình tròn

• Trong index.js Avatar ta truyền các tham số width, height,...
• import React, { Component } from "react";

  import { View, Text } from "react-native";

  
  

  export default class Avatar extends Component {

      render() {

          const {width, height, borderRadius, backgroundColor } = this.props;

          return(

              <View style={{

                  width,

                  height,

                  borderRadius,

                  backgroundColor

              }}

              />

          );

      }

  }
• Trở lại App.js truyền giá trị vào các tham số
• export default class Demo extends Component {

    render() {

      return (

        <View>

        <Avatar 

        width={50} 

        height={50} 

        borderRadius={50 / 2} 

        backgroundColor={"red"} />

        </View>

      );

    }

  }
• Kết quả