Terms

Components

Functions in React and JSX are called Components
Parent Component: Any component that renders other components is called Parent. Example Cat is parent and fun is child Component.
1. Text Component
Used to show text

import React from 'react';
import {Text} from 'react-native';      //1

const fun = (a: string,b: string) => {
  return a + " " + b;
};

// const FUNCTION_NAME=(argument list) => {Body}
const Cat = () => {                     //2
    const name = "Pinky";
    return Hello, I am cat {name} belong to {fun("titu", "lal")};  //3
};
export default Cat;                    //4

$ npx expo start --tunnel
1. Import React Native’s Text Core Component
2. component starts as a function 

const Cat = () => {};

Whatever a function component returns is rendered as a React element.
3. We can call function from inside of {} 4. export the function using default
2. View Component
Used to embed 2 or more components(eg: text, textinput) 

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

const ViewComp = () => {            //2
    return (
    <View>
    <Text>
        My Name..
    </Text>
    <TextInput style={{height: 40, borderColor: 'gray',borderWidth: 1}}
        defaultValue="Name me!"
    ></TextInput>
    </View>
    );
}

const Main = () => {            //3
    return (
        <ViewComp/>          //4
        <ViewComp/>
    );
};
export default Main;

$ npx expo start --tunnel
1. Import Text, View, TextInput
2. ViewComp() function returns View component. Text, TextInput are placed inside it
3. Call function from default component
4. We can call 1 function multiple times to avoid writing same code again and again

Props / Properties

Props means something which can be passed to Components. Eg: struct, string etc 

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

type Emp = {        //1
    name: string
};

const ViewComp = (e: Emp) => {    //2
    return (
    <View>
        <Text>
        My Name..{e.name}
        </Text>
    </View>
    );
}

const Main = () => {
    return (
        <ViewComp name="Ram"/>       //3
    );
};
export default Main;
1. prop declared
2. Component accepts prop as argument
3. Prop passed while calling the function. We have passed value to name, this should be exactly same as variable name inside Prop.

State (local variable)

State is useful for handling data that changes over time or that comes from user interaction 

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


const ViewComp = () => {
    const [hungry, setHungry] = useState(true);         //2
    return (
        <View>
            <text>I am cat sofie and I am {hungry ? 'Hungry' : 'full'}</text>
            <button onClick={                        //3
                ()=>setHungry(false)
            }>
                Click to Feed me
                <text>Thanks Now I am {hungry ? 'Hungry' : 'full'}</text>
        </View>
    );
}

const Main = () => {
    return (
        <>           //4
            <ViewComp/>
        </>
    );
};

export default Main;
1. import useState from React
2. Create hungry state variable inside the function. Initialize the true
  we can use useState to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, const [counter, setCounter] = useState(0)!
  Function setHungry() will used to set value of variable hungry
3. Add button component
4. Wrap inside JSX fragments