what is react native and how it works

letskillsup


1. What is React Native?

  • React Native is a JavaScript framework for building mobile apps for Android & iOS.

  • It was developed by Facebook (Meta) in 2015.

  • It allows you to write one codebase and run it on both platforms.

2. How Does React Native Work?

  • It uses React (JavaScript library) to create UI components.

  • Instead of HTML, React Native uses native components like <View>, <Text>, <Button>.

  • It communicates with native mobile code (Android Java/Kotlin, iOS Swift/Objective-C) using a bridge.

3. Why Use React Native?

Cross-platform – Write once, use on Android & iOS.
Faster development – Hot Reload speeds up coding.
Better performance – Uses native components.
Large community – Many libraries & help available.

4. Companies Using React Native

  • Facebook – Facebook app.
  • Instagram – React Native for parts of the app.
  • Uber Eats – UI components built with React Native.
  • Airbnb – Used React Native in their app.

5. How React Native is Different from React?

Feature React (Web) React Native (Mobile)
Uses     Web Apps (Browser)     Mobile Apps (Android/iOS)
UI Components     <div>, <span>   <View>, <Text>
Styling         CSS     JavaScript-based Styles
Navigation     React Router     React Navigation

Real-Life Example: Why React Native?

Imagine you are a startup building a food delivery app like Zomato.

  • You can write one code for Android & iOS instead of separate code in Java (Android) and Swift (iOS).
  • You get faster updates without submitting a new version to app stores.
  • Developers save time, and business saves money.

create a expo app

1. download node js

2.install expo cli command:

npm install -g expo-cli

3.create a react app command:

npx create-expo-app coffeeapp

4.change directory into project folder e.g. coffeeapp

                        cd coffeeapp

5.start the expo app command:

npx expo start

6.reset project command:

npm run reset-project

7.open main file[app.tsx]:


import React from 'react';



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



export default function Index() {

  return (

    <ScrollView>  



              <View>

                    <Text>welcome</Text>

              </View>



    </ScrollView>

  );

}



how to apply css in a react native app

import React from 'react';

import {StyleSheet,Image, ScrollView, Text ,View} from 'react-native';

export default function Index() {
  return (
    <ScrollView>  

              <View style={styles.flexbox}>
                    <Text style={styles.para}>welcome</Text>
              </View>

    </ScrollView>
  );
}

const styles=StyleSheet.create({
  para:
  {
    fontSize:30,
    color:"green"
  },
  flexbox:
  {
    display:"flex",
    justifyContent:"center",
    alignItems:"center",
    padding:5
  }
})



0 Comments