React Native

Introduction

Introduction to React Native

What is React Native?

  • React Native is a framework for building native apps using React.
  • It allows developers to write code once and deploy it on both iOS and Android and other devices
  • Developed by Facebook, React Native has been widely adopted due to its efficiency and performance.

Advantages of React Native

  • Cross-Platform Development: Write once, run anywhere.
  • Hot Reloading: See changes immediately during development.
  • Large Community and Ecosystem: Access to numerous libraries and tools.
  • Rich Pre-Built Components: Speeds up development with ready-to-use components.

Differences Between React & React Native

  • Syntax and Components: React uses HTML elements, while React Native uses native components like View and Text.
  • Styling: React Native uses a JavaScript style object instead of CSS.
  • Navigation: React Native uses libraries like React Navigation or expo-router for routing.

Overview of the React Native Ecosystem

  • React Native Core: Core components and APIs provided by React Native.
  • Popular Libraries: React Navigation, Redux, Axios, etc.
  • Expo vs. React Native CLI: Expo simplifies setup and development. and currently have its own routing and state management.

Setting Up the Development Environment

  • Required Software:
    • Node.js
    • npm
    • Android Studio

Setting Up Expo

  • Create expo project
npx create-expo-app@latest
  • Go to edit code
cd my-app
code .
  • Run the app on expo
npm run start
npm run android
  • Run the app on an android emulator

Core Components of React Native

  • View: A container that supports layout with Flexbox, style, touch handling.
  • Text: For displaying text.
  • Image: For displaying images.
  • ScrollView: For scrolling content.
  • StyleSheet: For defining component styles.

 Example

Building a Simple Layout

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

export default function App ()  {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Image source={{ uri: 'https://example.com/image.png' }} style={styles.image} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  image: {
    width: 100,
    height: 100,
  },
});

React Native Introduction

By Youcef Madadi

Made with Slides.com

React Native Introduction

  • 305

More from Youcef Madadi