React Native Crash Course — CoreLabs Tutorial

What is React Native?

React Native is a framework created by Meta that lets you build native mobile apps using JavaScript and React. Instead of writing separate code for iOS (Swift) and Android (Kotlin), you write one codebase that runs on both platforms — with truly native performance.

Create a new React Native project with Expo:

# Install Expo CLI and create a project
npx create-expo-app@latest MyApp
cd MyApp

# Start development server
npx expo start

# Your app will be available on:
# - iOS Simulator
# - Android Emulator
# - Expo Go app on your phone

Core Components & Styling

React Native provides built-in components like View, Text, Image, and ScrollView that map to native platform views. Styling uses a CSS-like syntax through the StyleSheet API — supporting Flexbox layout by default.

Build a simple profile card component:

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

export default function ProfileCard() {
  return (
    <View style={styles.card}>
      <Image
        source={{ uri: 'https://i.pravatar.cc/100' }}
        style={styles.avatar}
      />
      <Text style={styles.name}>John Doe</Text>
      <Text style={styles.role}>Developer</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    padding: 24,
    backgroundColor: '#1a1a2e',
    borderRadius: 16,
  },
  avatar: { width: 80, height: 80, borderRadius: 40 },
  name: { color: '#fff', fontSize: 20, marginTop: 12 },
  role: { color: '#888', fontSize: 14 },
});

Navigation & State Management

React Navigation is the standard library for handling screen transitions. Combined with React's useState and useEffect hooks, you can build complex multi-screen apps with shared state, dynamic data, and smooth animations.

Set up a basic stack navigator:

import { NavigationContainer }
  from '@react-navigation/native';
import { createNativeStackNavigator }
  from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: { backgroundColor: '#0f0f23' },
          headerTintColor: '#fff',
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile"
          component={Profile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Key Takeaway

React Native lets you leverage your JavaScript and React skills to build real native mobile apps. With Expo, you can prototype quickly and access native APIs without needing Xcode or Android Studio for initial development.