react native and custom components

react native

• React Native that is also known as RN, is a popular JavaScript-based mobile app framework.
• It allows you to build natively-rendered mobile apps for iOS and Android.
• The framework lets you create an application for various platforms by using the same codebase.

COMPONENTS:

React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components Native Components.

Core Components:

<View> :

            A container that supports layout with flexbox, style, some touch handling, and accessibility             controls

<Text> :

            Displays, styles, and nests strings of text and even handles touch event

<TextInput>:

                Allows the user to enter text

<Image>:

            Displays different types of images

that book can be used for react native:

React Native runs on React.

A popular open-source library for building user interfaces with JavaScript. 

To make the most of React Native, it helps to understand React itself. 

Components

let's take an example of hello world in the app:

import React from 'react';

you do not have direct access to that code, so you use the import statement. React: The second word is the name of the variable where all the imported code is assigned into.

import {Text} from 'react-native';

this statement states that a component named 'Text' is imported from the 'react-native' library.

const Cat = () => {

  return <Text>Hello world</Text>;

};

this is an arrow function named 'Cat' that returns a  Text component

export default Cat

export default is used to export a single class, function, or primitive from a script file.

example:

import React from 'react';

import {Text} from 'react-native';

const Hello = () => {

  return <Text>Hello, I am your cat!</Text>;

};

export default Cat

Custom Components:

import React from 'react'
import { View, Text } from 'react-native'
import Constants from 'expo-constants'
const Mycomp=({name,job})=>{

return(
<View>
<Text>{name}</Text>
<Text>{job}</Text>
</View>

);
}
function App() {
return (
<View style={{paddingTop:Constants.statusBarHeight}}>
<Mycomp name="sagar" job="lab ass." />
<Mycomp name="sam" job="proffessor" />
<Mycomp name="sagar" job="blogger" />
</View>
);
}

export default App;