React Native Expo notes

Project Setup

Create a new project

1npx create-expo-app@latest app-name

• Router documentation: Available at Expo docs for navigation setup
• Template option: TripPlan social travel template available on CodeCanyon

Push Notifications

Two types available:

• Push Notifications: Remote via Expo Push Service, APNs (iOS), or FCM (Android)
• Local Notifications: In-app scheduling without external servers

Installation and Setup

1npx expo install expo-notifications

• Free tier: Up to 600 notifications per second at no cost
• Setup guide: Expo push notifications setup
• Pricing FAQ: Expo push notifications FAQ

Server-Side Integration

For backend integration, use the Node.js SDK:

• SDK Repository: expo-server-sdk-node

Testing with cURL

1curl -X POST "https://exp.host/--/api/v2/push/send" \
2-H "Content-Type: application/json" \
3-H "Accept: application/json" \
4-H "Accept-encoding: gzip, deflate" \
5-d '{
6  "to": "ExponentPushToken[ZSZdA5JnWpCqoMyIispev-]",
7  "title": "hej Andreas!",
8  "body": "ADON är bäst!"
9}'

• Replace the token with your actual Expo push token
• Use this for quick testing before implementing server-side logic

Client-Side Consumption

Guide: Consuming push notifications

Firebase Configuration

Required for production:

• FCM Credentials: Setup guide
• Firebase Console: Project settings
• Files needed: google-services.json and keystore configuration

Styling with NativeWind

NativeWind brings Tailwind CSS support to React Native.

Documentation: NativeWind with Expo Router

Troubleshooting Setup Issues

If you encounter styling issues, use the verification function:

1import React from 'react';
2import { verifyInstallation } from 'nativewind';
3
4function App() {
5    verifyInstallation();
6    return (); 
7}
8
9export default App;

• Common issues: JSX import source configuration problems
• Troubleshooting guide: NativeWind troubleshooting
• Verification function: verifyInstallation() helps identify setup problems

Data Storage

AsyncStorage for Non-Sensitive Data

AsyncStorage provides simple, persistent key-value storage for React Native apps.

Documentation: AsyncStorage usage guide

 1import AsyncStorage from '@react-native-async-storage/async-storage';
 2
 3const storeData = async (key, value) => {
 4  await AsyncStorage.setItem(key, value);
 5}
 6
 7const getData = async (key) => {
 8  const value = await AsyncStorage.getItem(key);
 9  return value;
10}

• Use case: Perfect for user preferences, app settings, and non-sensitive data
• API: Simple setItem() and getItem() methods
• Persistence: Data survives app restarts and updates

Deployment

EAS (Expo Application Services)

EAS provides build and deployment services for Expo projects.

 1# Install EAS CLI globally and initialize project
 2npm install --global eas-cli && eas init --id [your-project-id]
 3
 4# Configure build profiles
 5eas build:configure
 6
 7# Build for specific platform
 8eas build --platform android --profile dev
 9
10# Manage secrets (like Google Services file)
11eas secret:create --name GOOGLE_SERVICES --value "$(cat google-services.json)"

• EAS CLI: Global installation required for build management
• Project ID: Initialize with your specific Expo project ID
• Build profiles: Configure different builds (dev, preview, production)
• Secrets management: Securely store sensitive files like google-services.json
• Platform targeting: Build for Android/iOS individually or both