Native mobile apps for web developers - complete Expo (React Native) guide

import { Platform } from "react-native";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\nCmd+D for dev menu",
  android: "Double tap R to reload,\nShake for dev menu",
  web: "Press Ctrl+R to reload",
});

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

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View style={styles.container}>
      <Text style={styles.count}>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: "center" },
  count: { fontSize: 24, marginBottom: 20 },
});

expo --help

MyFirstExpoApp/
├── .expo/              # Expo configuration files
├── assets/             # Static assets like images and fonts
├── node_modules/       # Project dependencies
├── .gitignore          # Git ignore file
├── App.js              # Main application component
├── app.json            # Expo configuration
├── babel.config.js     # Babel configuration
├── package.json        # Project metadata and dependencies
└── README.md           # Project documentation

{
  "expo": {
    "name": "My First Expo App",
    "slug": "my-first-expo-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

// screens/WeatherScreen.js
import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  SafeAreaView,
} from "react-native";

export default function WeatherScreen() {
  const [loading, setLoading] = useState(true);
  const [weatherData, setWeatherData] = useState(null);

  // We'll add the data fetching logic later
  useEffect(() => {
    // Simulate loading data
    setTimeout(() => {
      setWeatherData({
        location: "San Francisco",
        temperature: 72,
        condition: "Sunny",
        humidity: 65,
      });
      setLoading(false);
    }, 2000);
  }, []);

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text style={styles.loadingText}>Loading weather data...</Text>
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.weatherContainer}>
        <Text style={styles.location}>{weatherData.location}</Text>
        <Text style={styles.temperature}>{weatherData.temperature}°F</Text>
        <Text style={styles.condition}>{weatherData.condition}</Text>
        <View style={styles.detailsContainer}>
          <Text style={styles.detailsText}>
            Humidity: {weatherData.humidity}%
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#f5f5f5" },
  loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
  loadingText: { marginTop: 10, fontSize: 16 },
  weatherContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
  },
  location: { fontSize: 24, fontWeight: "bold", marginBottom: 10 },
  temperature: { fontSize: 72, fontWeight: "200" },
  condition: { fontSize: 24, marginVertical: 10 },
  detailsContainer: {
    marginTop: 20,
    borderTopWidth: 1,
    borderTopColor: "#ddd",
    paddingTop: 20,
    width: "100%",
    alignItems: "center",
  },
  detailsText: { fontSize: 18, marginBottom: 5 },
});

// screens/SettingsScreen.js
import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Switch,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";

export default function SettingsScreen({ navigation }) {
  const [useCelsius, setUseCelsius] = useState(false);
  const [useLocation, setUseLocation] = useState(true);

  const saveSettings = () => {
    // In a real app, we would save these settings
    // Then navigate back to the weather screen
    navigation.goBack();
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.settingContainer}>
        <Text style={styles.settingLabel}>Use Celsius</Text>
        <Switch value={useCelsius} onValueChange={setUseCelsius} />
      </View>

      <View style={styles.settingContainer}>
        <Text style={styles.settingLabel}>Use Current Location</Text>
        <Switch value={useLocation} onValueChange={setUseLocation} />
      </View>

      <TouchableOpacity style={styles.saveButton} onPress={saveSettings}>
        <Text style={styles.saveButtonText}>Save Settings</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: "#f5f5f5" },
  settingContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
  },
  settingLabel: { fontSize: 18 },
  saveButton: {
    backgroundColor: "#4285F4",
    padding: 15,
    borderRadius: 5,
    alignItems: "center",
    marginTop: 30,
  },
  saveButtonText: { color: "white", fontSize: 16, fontWeight: "bold" },
});

expo install @react-navigation/native @react-navigation/stack
expo install react-native-screens react-native-safe-area-context

// App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { TouchableOpacity, Text } from "react-native";

import WeatherScreen from "./screens/WeatherScreen";
import SettingsScreen from "./screens/SettingsScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Weather">
        <Stack.Screen
          name="Weather"
          component={WeatherScreen}
          options={({ navigation }) => ({
            title: "Weather",
            headerRight: () => (
              <TouchableOpacity
                onPress={() => navigation.navigate("Settings")}
                style={{ marginRight: 15 }}
              >
                <Text>Settings</Text>
              </TouchableOpacity>
            ),
          })}
        />
        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
          options={{ title: "Settings" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// To navigate to a screen:
navigation.navigate("ScreenName");

// To go back to the previous screen:
navigation.goBack();

// screens/WeatherScreen.js (updated with location and API)
import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import * as Location from "expo-location";

// First, install the location package:
// expo install expo-location

export default function WeatherScreen({ navigation }) {
  const [loading, setLoading] = useState(true);
  const [errorMsg, setErrorMsg] = useState(null);
  const [weatherData, setWeatherData] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        // Ask for location permission
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== "granted") {
          setErrorMsg("Permission to access location was denied");
          setLoading(false);
          return;
        }

        // Get current position
        let location = await Location.getCurrentPositionAsync({});
        const { latitude, longitude } = location.coords;

        // Fetch weather data (replace with your API key)
        const apiKey = "YOUR_WEATHER_API_KEY";
        const response = await fetch(
          `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=imperial&appid=${apiKey}`,
        );

        const result = await response.json();

        setWeatherData({
          location: result.name,
          temperature: Math.round(result.main.temp),
          condition: result.weather[0].main,
          humidity: result.main.humidity,
        });
      } catch (error) {
        setErrorMsg("Error fetching weather data");
        console.error(error);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text style={styles.loadingText}>Loading weather data...</Text>
      </View>
    );
  }

  if (errorMsg) {
    return (
      <View style={styles.errorContainer}>
        <Text style={styles.errorText}>{errorMsg}</Text>
        <TouchableOpacity
          style={styles.retryButton}
          onPress={() => navigation.replace("Weather")}
        >
          <Text style={styles.retryButtonText}>Retry</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.weatherContainer}>
        <Text style={styles.location}>{weatherData.location}</Text>
        <Text style={styles.temperature}>{weatherData.temperature}°F</Text>
        <Text style={styles.condition}>{weatherData.condition}</Text>
        <View style={styles.detailsContainer}>
          <Text style={styles.detailsText}>
            Humidity: {weatherData.humidity}%
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

// Add these new styles:
const styles = StyleSheet.create({
  // ... previous styles ...
  errorContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  errorText: {
    fontSize: 18,
    color: "red",
    textAlign: "center",
    marginBottom: 20,
  },
  retryButton: {
    backgroundColor: "#4285F4",
    padding: 15,
    borderRadius: 5,
  },
  retryButtonText: {
    color: "white",
    fontSize: 16,
  },
});

<View style={styles.container}>
  <Text>Content goes here</Text>
</View>

<ScrollView style={styles.scrollContainer}>
  {/* Many components can go here */}
  <Text>Scroll me!</Text>
  <Image source={require("./image.png")} />
  <Text>Keep scrolling...</Text>
</ScrollView>

<FlatList
  data={[
    { id: "1", title: "Item 1" },
    { id: "2", title: "Item 2" },
    // many more items...
  ]}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  keyExtractor={(item) => item.id}
/>

<SafeAreaView style={styles.container}>
  <Text>This content respects the safe area</Text>
</SafeAreaView>

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

export default function StyledComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>Styling with JavaScript</Text>

      {/* You can combine styles */}
      <Text style={[styles.text, styles.highlighted]}>
        This text has multiple styles
      </Text>

      {/* Or apply inline styles */}
      <View
        style={{
          padding: 10,
          backgroundColor: "lightblue",
          marginTop: 10,
        }}
      >
        <Text>Inline styled component</Text>
      </View>
    </View>
  );
}

// Define styles using StyleSheet.create
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    color: "gray",
    marginBottom: 20,
  },
  text: {
    fontSize: 16,
    lineHeight: 24,
  },
  highlighted: {
    backgroundColor: "yellow",
    padding: 5,
    borderRadius: 3,
  },
});

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

export default function FlexboxLayout() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Header</Text>
      </View>

      <View style={styles.content}>
        <View style={styles.sidebar}>
          <Text>Sidebar</Text>
        </View>
        <View style={styles.mainContent}>
          <Text>Main Content</Text>
        </View>
      </View>

      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up all available space
  },
  header: {
    height: 60,
    backgroundColor: "#f0f0f0",
    justifyContent: "center",
    alignItems: "center",
  },
  headerText: {
    fontSize: 18,
    fontWeight: "bold",
  },
  content: {
    flex: 1, // Take up all available space between header and footer
    flexDirection: "row", // Arrange children horizontally
  },
  sidebar: {
    width: 100,
    backgroundColor: "#e0e0e0",
    padding: 10,
  },
  mainContent: {
    flex: 1, // Take up remaining space
    backgroundColor: "#ffffff",
    padding: 10,
  },
  footer: {
    height: 50,
    backgroundColor: "#f0f0f0",
    justifyContent: "center",
    alignItems: "center",
  },
});

src/
├── api/              # API clients and data fetching
├── components/       # Presentational components (platform-specific)
├── hooks/            # Custom React hooks (shared)
├── navigation/       # Navigation configuration (platform-specific)
├── screens/          # Screen components (platform-specific)
├── services/         # Business logic services (shared)
├── store/            # State management (shared)
└── utils/            # Utility functions (shared)

// services/authService.js - Shared across platforms
export async function loginUser(email, password) {
  try {
    const response = await apiClient.post("/auth/login", { email, password });
    return {
      success: true,
      user: response.data.user,
      token: response.data.token,
    };
  } catch (error) {
    return {
      success: false,
      error: error.response?.data?.message || "Login failed",
    };
  }
}

// Can be used in both web and mobile:
import { loginUser } from "../services/authService";

// In a React component
const handleLogin = async () => {
  const result = await loginUser(email, password);
  if (result.success) {
    // Handle successful login
  } else {
    // Handle error
  }
};

// utils/validators.js - Shared across platforms
export const emailValidator = (email) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!email) return "Email is required";
  if (!emailRegex.test(email)) return "Invalid email format";
  return null;
};

export const passwordValidator = (password) => {
  if (!password) return "Password is required";
  if (password.length < 8) return "Password must be at least 8 characters";
  return null;
};

// Used in both web and mobile forms
import { emailValidator, passwordValidator } from "../utils/validators";

// In a form component
const validateForm = () => {
  const emailError = emailValidator(email);
  const passwordError = passwordValidator(password);

  setErrors({ email: emailError, password: passwordError });
  return !emailError && !passwordError;
};

// storage/index.js - Platform detection and export
import * as webStorage from "./webStorage";
import * as mobileStorage from "./mobileStorage";
import { Platform } from "react-native";

// Export the appropriate implementation based on platform
export const storage = Platform.OS === "web" ? webStorage : mobileStorage;

// Used the same way across platforms
import { storage } from "../storage";

// Later in code
await storage.setItem("user", JSON.stringify(userData));
const savedUser = JSON.parse(await storage.getItem("user"));

// For a web app with a sidebar and top navigation
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

// Convert top-level sidebar navigation to bottom tabs
function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

// Use stack navigation for drill-down flows
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainTabs}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="EditProfile" component={EditProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Web button (too small for mobile)
<button className="web-button">Click Me</button>

// Converted to React Native
<TouchableOpacity
  style={styles.button}
  onPress={handlePress}
>
  <Text style={styles.buttonText}>Tap Me</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 15,          // More padding for larger touch target
    borderRadius: 5,
    minHeight: 44,        // Minimum height for touch target
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 10,   // Increased spacing between elements
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

// Mobile approach: Break into multiple screens
function PersonalInfoScreen({ navigation }) {
  // Step 1: Basic info
  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Name"
        style={styles.input}
        returnKeyType="next"
        onSubmitEditing={() => emailRef.current.focus()}
      />
      <TextInput
        ref={emailRef}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        style={styles.input}
        returnKeyType="next"
        onSubmitEditing={() => passwordRef.current.focus()}
      />
      <TextInput
        ref={passwordRef}
        placeholder="Password"
        secureTextEntry
        style={styles.input}
        returnKeyType="done"
        onSubmitEditing={() => navigation.navigate("AddressInfo")}
      />
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.navigate("AddressInfo")}
      >
        <Text style={styles.buttonText}>Next</Text>
      </TouchableOpacity>
    </View>
  );
}

expo install expo-camera

import React, { useState, useEffect, useRef } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Camera } from "expo-camera";

export default function CameraScreen() {
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
  const cameraRef = useRef(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  }, []);

  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync();
      console.log("Photo taken:", photo.uri);
      // Here you could navigate to a preview screen
      // or upload the photo to your server
    }
  };

  // Toggle between front and back camera
  const toggleCameraType = () => {
    setCameraType(
      cameraType === Camera.Constants.Type.back
        ? Camera.Constants.Type.front
        : Camera.Constants.Type.back,
    );
  };

  // Render permission and camera UI
  // (shortened for brevity)
  return (
    <View style={styles.container}>
      <Camera ref={cameraRef} style={styles.camera} type={cameraType}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraType}>
            <Text style={styles.text}>Flip</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={takePicture}>
            <Text style={styles.text}>Take Photo</Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

expo install expo-location

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
import * as Location from "expo-location";
import MapView, { Marker } from "react-native-maps";

export default function LocationScreen() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        // Ask for permission
        const { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== "granted") {
          setErrorMsg("Permission to access location was denied");
          setLoading(false);
          return;
        }

        // Get current position
        const location = await Location.getCurrentPositionAsync({
          accuracy: Location.Accuracy.Highest,
        });

        setLocation(location);
      } catch (error) {
        setErrorMsg("Could not get location: " + error.message);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  // Render location UI with map (shortened for brevity)
  return (
    <View style={styles.container}>
      {location && (
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          <Marker
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude,
            }}
            title="You are here"
          />
        </MapView>
      )}
    </View>
  );
}

expo install expo-notifications

import React, { useState, useEffect, useRef } from "react";
import { Text, View, Button, Platform } from "react-native";
import * as Notifications from "expo-notifications";
import * as Device from "expo-device";

// Configure notification handler
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});

export default function NotificationsScreen() {
  const [expoPushToken, setExpoPushToken] = useState("");

  useEffect(() => {
    // Register for push notifications
    registerForPushNotificationsAsync().then((token) =>
      setExpoPushToken(token),
    );

    // Set up notification listeners (implementation shortened)
  }, []);

  // Send a test notification
  const sendNotification = async () => {
    await Notifications.scheduleNotificationAsync({
      content: {
        title: "You've got a notification!",
        body: "This is a test notification from your Expo app.",
        data: { data: "Custom data goes here" },
      },
      trigger: { seconds: 2 },
    });
  };

  return (
    <View style={styles.container}>
      <Text>Your Expo Push Token: {expoPushToken}</Text>
      <Button title="Send Test Notification" onPress={sendNotification} />
    </View>
  );
}

// Registration function implementation (shortened)

npm install --save-dev jest @testing-library/react-native @testing-library/jest-native

// __tests__/Button.test.js
import React from "react";
import { render, fireEvent } from "@testing-library/react-native";
import CustomButton from "../components/CustomButton";

describe("CustomButton", () => {
  it("renders correctly", () => {
    const { getByText } = render(<CustomButton title="Press Me" />);
    expect(getByText("Press Me")).toBeTruthy();
  });

  it("calls onPress function when pressed", () => {
    const onPressMock = jest.fn();
    const { getByText } = render(
      <CustomButton title="Press Me" onPress={onPressMock} />,
    );

    fireEvent.press(getByText("Press Me"));
    expect(onPressMock).toHaveBeenCalledTimes(1);
  });
});

npm install -g eas-cli

eas login
eas build:configure
eas build --platform android  # For Android
eas build --platform ios      # For iOS

eas submit --platform ios     # For iOS App Store
eas submit --platform android # For Google Play Store

expo publish