React Native Complete Guide 📱⚛️

Build Mobile Apps using React + JavaScript

1. What is React Native?

React Native is a framework by Meta (Facebook) used to build Android and iOS apps using JavaScript and React.

2. Why React Native?

- One codebase → Android + iOS
- Uses React knowledge
- Fast development
- Huge job demand

3. Basic App

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

export default function App() {
  return (
    <View>
      <Text>Hello React Native</Text>
    </View>
  );
}

4. Core Components

View → Container
Text → Text display
Image → Show images
Button → Click actions
ScrollView → Scrolling

5. Styling

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

6. State (useState)

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </>
  );
}

7. Navigation

React Navigation:
- Stack Navigation
- Tab Navigation
- Drawer Navigation

8. API Calls

fetch('https://api.example.com')
  .then(res => res.json())
  .then(data => console.log(data));

9. Storage

- AsyncStorage (local storage)
- Firebase (cloud database)

10. Mini Projects