REACT Native

React Native is a popular framework for building cross-platform mobile applications using JavaScript and React. With React Native, you can develop apps for iOS and Android using a single codebase.

1. Install React Native

Using Expo

Expo is a tool that simplifies React Native development by handling dependencies for you.

npx create-expo-app MyApp
cd MyApp
npm start
  • npx create-expo-app creates a new project.
  • npm start runs the development server.

Using React Native CLI

npx react-native init MyApp
cd MyApp
npx react-native run-android  # For Android
npx react-native run-ios      # For iOS
  • Requires Android Studio (for Android) or Xcode (for iOS).

 

2. Running the App on a Device

  • Expo: Install the Expo Go app on your phone and scan the QR code from the terminal.
  • React Native CLI: Connect an emulator or a physical device and use npx react-native run-android or run-ios.

3. Basic React Native App

Here’s a simple Hello World app:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native! 🚀</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  text: {
    fontSize: 20,
    color: "#333",
  },
});

export default App;
  • View is like <div> in React Web.
  • Text is used instead of <p> or <h1>.
  • StyleSheet helps with styling.

4. Core Components

Button

import { Button, Alert } from "react-native";

<Button title="Click Me" onPress={() => Alert.alert("Button Clicked!")} />

TextInput (User Input)

import { TextInput } from "react-native";

<TextInput placeholder="Enter text" style={{ borderWidth: 1, padding: 10 }} />

TouchableOpacity (Custom Button)

import { TouchableOpacity, Text } from "react-native";

<TouchableOpacity onPress={() => alert("Tapped!")} style={{ padding: 10, backgroundColor: "blue" }}>
  <Text style={{ color: "white" }}>Press Me</Text>
</TouchableOpacity>

5. Flexbox for Layout

React Native uses Flexbox for layout, just like CSS:

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
  <Text>Hello World!</Text>
</View>
  • justifyContent: "center" aligns items vertically.
  • alignItems: "center" aligns items horizontally.

6. Navigation in React Native

Use React Navigation to add navigation between screens.

Install React Navigation

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

Stack Navigation Example

import React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button title="Go to Details" onPress={() => navigation.navigate("Details")} />
  </View>
);

const DetailsScreen = () => (
  <View>
    <Text>Details Screen</Text>
  </View>
);

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

7. Fetch API (API Calls in React Native)

Using Fetch

import React, { useEffect, useState } from "react";
import { View, Text } from "react-native";

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return (
    <View>
      <Text>{data?.title}</Text>
    </View>
  );
};

export default App;

Using Axios

npm install axios

import axios from "axios";

useEffect(() => {
  axios.get("https://jsonplaceholder.typicode.com/posts/1")
    .then((response) => setData(response.data));
}, []);

8. React Native Styling

React Native doesn’t use CSS, but it has a similar styling system using StyleSheet.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: "white",
  },
  text: {
    fontSize: 20,
    color: "blue",
  },
});

9. React Native Animations

Use Animated API for animations:

import { Animated } from "react-native";
import { useEffect, useRef } from "react";

const App = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, { toValue: 1, duration: 2000, useNativeDriver: true }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>Fading In Text</Text>
    </Animated.View>
  );
};

export default App;

10. Deploying React Native Apps

Android Deployment

  1. Generate a release APK: 
    cd android && ./gradlew assembleRelease
  2. Find the APK inside android/app/build/outputs/apk/release/.

 

iOS Deployment

  1. Open Xcode (cd ios && open MyApp.xcworkspace).
  2. Archive and upload to the App Store.

Using Expo for Easy Deployment

npx expo publish  # Deploy to Expo
npx expo build:android  # Build Android APK
npx expo build:ios  # Build iOS app