Skip to main content

Development Guide

Development workflow, best practices, and common tasks for ZÈYA Mobile App.

Development Workflow​

1. Start Development Server​

# Start Expo development server
npm start

# Or with cache cleared
npx expo start -c

2. Run on Device/Simulator​

iOS:

npm run ios
# Or press 'i' in Expo CLI

Android:

npm run android
# Or press 'a' in Expo CLI

Web (for quick testing):

npm run web
# Or press 'w' in Expo CLI

3. Make Changes​

  • Edit files in src/
  • Changes hot-reload automatically
  • Check Expo CLI for errors

4. Test Changes​

  • Test on both iOS and Android
  • Test on physical devices when possible
  • Check console logs for errors

Code Quality​

ESLint​

# Run linting
npm run lint

# Fix auto-fixable issues
npm run lint -- --fix

Code Formatting​

Use Prettier (if configured) or follow project style guide:

  • 2 spaces for indentation
  • Single quotes for strings
  • Semicolons
  • Trailing commas

Common Development Tasks​

Creating a New Screen​

  1. Create file in src/app/
// src/app/new-screen.jsx
import { View, Text } from 'react-native';

export default function NewScreen() {
  return (
    <View>
      <Text>New Screen</Text>
    </View>
  );
}
  1. Add navigation (if needed)
import { router } from 'expo-router';
router.push('/new-screen');

Creating a New Component​

  1. Create component file
// src/components/NewComponent.jsx
import { View, Text } from 'react-native';

export default function NewComponent({ title }) {
  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
}
  1. Use in screens
import NewComponent from '../components/NewComponent';
<NewComponent title="Hello" />

Making API Calls​

import { useContext } from 'react';
import { ApiContext } from '../context/ApiProvider';

function MyComponent() {
  const { apiCall } = useContext(ApiContext);
  
  const fetchData = async () => {
    try {
      const response = await apiCall('endpoint', {
        method: 'GET',
      });
      console.log(response.data);
    } catch (error) {
      console.error('API Error:', error);
    }
  };
  
  return (
    // Component JSX
  );
}

Using Translations​

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  
  return (
    <Text>{t('welcome.message')}</Text>
  );
}

Adding New Translation Keys​

  1. Add to translation files
// src/locales/en.json
{
  "new": {
    "key": "New Translation"
  }
}
  1. Extract translations (if using scanner)
npm run extract-translations

Using Firebase​

import { database } from '../share/firebase';

// Write data
database.ref('path').set({ data });

// Read data
database.ref('path').on('value', (snapshot) => {
  const data = snapshot.val();
});

Using Storage​

import Storage from '../share/storage';

// Save data
await Storage().saveData('key', value);

// Get data
const data = await Storage().getData('key');

// Remove data
await Storage().removeData('key');

Debugging​

Console Logging​

console.log('Debug message');
console.warn('Warning message');
console.error('Error message');

React Native Debugger​

  1. Shake device or press Cmd+D (iOS) / Cmd+M (Android)
  2. Select "Debug"
  3. Open Chrome DevTools at chrome://inspect

Flipper​

  1. Install Flipper from fbflipper.com
  2. Start Flipper
  3. Connect device/simulator
  4. Use Flipper plugins for debugging

Network Debugging​

// Enable network logging in API provider
// Check network requests in Flipper or Chrome DevTools

Testing​

Manual Testing Checklist​

  • Test on iOS device/simulator
  • Test on Android device/emulator
  • Test authentication flows
  • Test API integration
  • Test offline scenarios
  • Test push notifications
  • Test deep linking
  • Test translations

Device Testing​

Physical Devices:

  • Connect via USB
  • Enable developer mode
  • Run npm run ios or npm run android

Simulators:

  • iOS: Xcode Simulator
  • Android: Android Studio AVD

Performance Optimization​

Image Optimization​

import { Image } from 'expo-image';

// Use Expo Image for better performance
<Image
  source={{ uri: imageUrl }}
  style={styles.image}
  contentFit="cover"
/>

List Optimization​

import { FlatList } from 'react-native';

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={10}
/>

Animation Performance​

import Animated from 'react-native-reanimated';

// Use Reanimated for 60fps animations
const animatedStyle = useAnimatedStyle(() => {
  return {
    opacity: opacity.value,
  };
});

Common Issues & Solutions​

Metro Bundler Issues​

# Clear cache and restart
npx expo start -c

Build Errors​

# iOS: Clean and rebuild
cd ios && xcodebuild clean && cd ..
cd ios && pod install && cd ..

# Android: Clean gradle
cd android && ./gradlew clean && cd ..

Module Resolution Errors​

# Clear caches
rm -rf node_modules
npm install
watchman watch-del-all

Firebase Issues​

  • Verify google-services.json and GoogleService-Info.plist exist
  • Check Firebase project configuration
  • Verify API keys

Git Workflow​

Branch Naming​

feature/feature-name
fix/bug-description
refactor/component-name

Commit Messages​

feat: add new feature
fix: fix bug description
refactor: refactor component
docs: update documentation
style: code formatting
test: add tests

Before Committing​

  • Code is linted
  • Tests pass (if any)
  • No console.logs left
  • Translations updated
  • Build succeeds

Best Practices​

1. Component Structure​

// ✅ Good: Small, focused components
function ProductCard({ product }) {
  return <View>...</View>;
}

// ❌ Bad: Large, complex components
function ProductCard({ product }) {
  // 200+ lines of code
}

2. API Calls​

// ✅ Good: Use API context
const { apiCall } = useContext(ApiContext);
const data = await apiCall('endpoint');

// ❌ Bad: Direct axios calls
import axios from 'axios';
const data = await axios.get('endpoint');

3. Error Handling​

// ✅ Good: Proper error handling
try {
  const data = await apiCall('endpoint');
} catch (error) {
  console.error('Error:', error);
  // Show user-friendly error
}

// ❌ Bad: No error handling
const data = await apiCall('endpoint');

4. Translations​

// ✅ Good: Use translation keys
<Text>{t('welcome.message')}</Text>

// ❌ Bad: Hardcoded strings
<Text>Welcome</Text>