Mobile Developer

Key Libraries

Navigation:

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

State Management:

• Zustand (lightweight)
• Redux Toolkit (complex apps)
• React Query (server state)

UI Components:

• React Native Paper (Material Design)
• NativeBase
• React Native Elements

Native Features:

• expo-camera
• expo-location
• expo-notifications
• react-native-biometrics

Mobile UI Patterns

Platform-Specific Design

iOS vs Android Differences:

• Navigation: iOS uses tab bar at bottom, Android often uses drawer
• Icons: SF Symbols (iOS) vs Material Icons (Android)
• Typography: San Francisco (iOS) vs Roboto (Android)
• Buttons: iOS uses borderless, Android uses raised/contained
• Headers: iOS centers titles, Android left-aligns

Platform Detection:

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
  },
});

// Platform-specific code
const Component = Platform.select({
  ios: () => require('./ComponentIOS'),
  android: () => require('./ComponentAndroid'),
})();

Touch Targets

• Minimum 44x44 points (iOS) / 48x48 dp (Android)
• Add hitSlop for small touchable areas
• Use proper touchable components

<TouchableOpacity
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  onPress={handlePress}
>
  <Text>Tap Me</Text>
</TouchableOpacity>

Safe Areas

import { SafeAreaView } from 'react-native-safe-area-context';

function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Content automatically avoids notches, status bar */}
    </SafeAreaView>
  );
}

Navigation Patterns

Stack Navigator

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

const Stack = createNativeStackNavigator();

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

Tab Navigator

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Deep Linking

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Profile: 'user/:id',
    },
  },
};

<NavigationContainer linking={linking}>

Performance Optimization

Lists

Use FlatList or SectionList, never ScrollView with map:

<FlatList
  data={items}
  renderItem={({ item }) => <Item data={item} />}
  keyExtractor={(item) => item.id}
  // Performance props
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  updateCellsBatchingPeriod={50}
  initialNumToRender={10}
  windowSize={10}
/>

Images

import { Image } from 'expo-image';

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
  contentFit="cover"
  transition={200}
  // Cache
  cachePolicy="memory-disk"
/>

Memoization

const MemoizedComponent = React.memo(({ item }) => (
  <View>{item.name}</View>
));

const memoizedValue = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Avoid Re-renders

// Bad: Creates new object every render
<Component style={{ flex: 1 }} />

// Good: StyleSheet creates optimized styles
const styles = StyleSheet.create({
  container: { flex: 1 },
});
<Component style={styles.container} />

Native Features

Camera

import { Camera, CameraType } from 'expo-camera';

const [permission, requestPermission] = Camera.useCameraPermissions();

if (!permission?.granted) {
  return <Button onPress={requestPermission} title="Grant Permission" />;
}

<Camera style={{ flex: 1 }} type={CameraType.back}>
  {/* Camera UI */}
</Camera>

Location

import * as Location from 'expo-location';

const [location, setLocation] = useState(null);

useEffect(() => {
  (async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') return;
    
    let loc = await Location.getCurrentPositionAsync({});
    setLocation(loc);
  })();
}, []);

Push Notifications

import * as Notifications from 'expo-notifications';

// Request permission
const { status } = await Notifications.requestPermissionsAsync();

// Get push token
const token = (await Notifications.getExpoPushTokenAsync()).data;

// Handle received notifications
Notifications.addNotificationReceivedListener(notification => {
  console.log(notification);
});

Biometric Auth

import * as LocalAuthentication from 'expo-local-authentication';

const authenticate = async () => {
  const hasHardware = await LocalAuthentication.hasHardwareAsync();
  const isEnrolled = await LocalAuthentication.isEnrolledAsync();
  
  if (hasHardware && isEnrolled) {
    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Authenticate to continue',
    });
    return result.success;
  }
};

Local Storage

Async Storage

import AsyncStorage from '@react-native-async-storage/async-storage';

// Store
await AsyncStorage.setItem('user', JSON.stringify(userData));

// Retrieve
const user = JSON.parse(await AsyncStorage.getItem('user'));

// Remove
await AsyncStorage.removeItem('user');

Secure Storage

import * as SecureStore from 'expo-secure-store';

// Store sensitive data (tokens, passwords)
await SecureStore.setItemAsync('token', authToken);

// Retrieve
const token = await SecureStore.getItemAsync('token');

SQLite (Complex Data)

import * as SQLite from 'expo-sqlite';

const db = SQLite.openDatabase('mydb.db');

db.transaction(tx => {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT);'
  );
});

Offline-First Architecture

Network Detection

import NetInfo from '@react-native-community/netinfo';

const [isConnected, setIsConnected] = useState(true);

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    setIsConnected(state.isConnected);
  });
  
  return () => unsubscribe();
}, []);

Sync Strategy

1. Optimistic Updates: Update UI immediately, sync later
2. Queue Failed Requests: Retry when connection returns
3. Conflict Resolution: Last-write-wins or manual merge
4. Cache API Responses: Use React Query with cache

App Configuration

app.json (Expo)

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "bundleIdentifier": "com.mycompany.myapp",
      "buildNumber": "1"
    },
    "android": {
      "package": "com.mycompany.myapp",
      "versionCode": 1,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png"
      }
    }
  }
}

Environment Variables

// Use expo-constants
import Constants from 'expo-constants';

const API_URL = Constants.expoConfig.extra.apiUrl;

// app.json
{
  "extra": {
    "apiUrl": "https://api.example.com"
  }
}

Testing

Unit Tests (Jest)

import { render, fireEvent } from '@testing-library/react-native';

test('button press increments counter', () => {
  const { getByText } = render(<Counter />);
  const button = getByText('Increment');
  
  fireEvent.press(button);
  
  expect(getByText('Count: 1')).toBeTruthy();
});

E2E Tests (Detox)

describe('Login Flow', () => {
  it('should login successfully', async () => {
    await element(by.id('email-input')).typeText('[email protected]');
    await element(by.id('password-input')).typeText('password123');
    await element(by.id('login-button')).tap();
    await expect(element(by.text('Welcome'))).toBeVisible();
  });
});

Deployment

iOS App Store

1. Xcode: Open ios/YourApp.xcworkspace
2. Signing: Configure in Xcode > Signing & Capabilities
3. Archive: Product > Archive
4. Upload: Xcode > Window > Organizer > Upload to App Store
5. App Store Connect: Create app, submit for review

Or use EAS (Expo):

eas build --platform ios
eas submit --platform ios

Google Play Store

1. Generate Keystore:

keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

2. Build APK/AAB:

cd android
./gradlew bundleRelease

3. Upload: Google Play Console > Create App > Upload AAB

Or use EAS (Expo):

eas build --platform android
eas submit --platform android

Common Mobile Challenges

Keyboard Handling

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
>
  <TextInput placeholder="Type here" />
</KeyboardAvoidingView>

Status Bar

import { StatusBar } from 'expo-status-bar';

<StatusBar style="dark" backgroundColor="#ffffff" />

Handling Notches

Use SafeAreaView and SafeAreaProvider from react-native-safe-area-context.

App State Changes

import { AppState } from 'react-native';

useEffect(() => {
  const subscription = AppState.addEventListener('change', nextAppState => {
    if (nextAppState === 'active') {
      // App came to foreground
    } else if (nextAppState === 'background') {
      // App went to background
    }
  });
  
  return () => subscription.remove();
}, []);

Mobile-Specific Best Practices

1. Battery Efficiency: Minimize background tasks, GPS usage
2. Data Usage: Cache aggressively, compress images
3. Gestures: Use pan, swipe, pinch gestures appropriately
4. Loading States: Always show feedback during async operations
5. Error Handling: Graceful degradation when features unavailable
6. Permissions: Request only when needed, explain why
7. App Size: Optimize bundle size, use dynamic imports
8. Accessibility: VoiceOver (iOS) and TalkBack (Android) support

Debugging

# React Native Debugger
npm install -g react-native-debugger

# Flipper (Facebook's debugging platform)
# Logs, network requests, layout inspector

# Chrome DevTools
# Shake device > "Debug" > Opens Chrome debugger

When to Activate

Activate this skill when the task involves:

• Building mobile applications
• React Native development
• iOS/Android platform-specific features
• Mobile UI/UX implementation
• App store deployment
• Push notifications, camera, location
• Offline-first mobile apps
• Mobile performance optimization
• Cross-platform app development
• Native module integration

Remember

Focus on:

• Platform-specific design patterns
• Performance (mobile devices have constraints)
• Offline-first architecture
• Battery and data efficiency
• Proper permission handling
• Smooth animations (60 FPS)
• Touch-friendly UI (proper hit targets)
• Testing on real devices, not just emulators