Configuration

Creating Environment Files

Create different environment files for different stages:

API_URL=http://localhost:3000/api
APP_ENV=development
DEBUG_MODE=true

API_URL=https://api.yourapp.com
APP_ENV=production
DEBUG_MODE=false

Using Environment Variables

// src/config/env.ts
import Config from 'react-native-config';

export const env = {
  API_URL: Config.API_URL || 'http://localhost:3000/api',
  APP_ENV: Config.APP_ENV || 'development',
  DEBUG_MODE: Config.DEBUG_MODE === 'true',
};

App Config File

// src/config/app.ts
export const appConfig = {
  name: 'Your App Name',
  version: '1.0.0',
  bundleId: 'com.yourcompany.yourapp',
  
  // Navigation
  initialRouteName: 'Home',
  
  // Theme
  defaultTheme: 'light',
  
  // Features
  features: {
    darkMode: true,
    biometricAuth: true,
    pushNotifications: true,
  },
  
  // API
  api: {
    timeout: 10000,
    retries: 3,
  },
};

Metro Configuration

Configure Metro bundler for optimal performance:

// metro.config.js
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(
      ext => ext !== 'svg',
    ),
    sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Babel Configuration

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@': './src',
          '@components': './src/components',
          '@modules': './src/modules',
          '@services': './src/services',
          '@utils': './src/utils',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

i18n Setup

// src/translations/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './en';
import es from './es';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    es: { translation: es },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

Translation Files

export default {
  common: {
    save: 'Save',
    cancel: 'Cancel',
    loading: 'Loading...',
  },
  modules: {
    home: {
      title: 'Welcome',
      subtitle: 'Get started',
    },
  },
};

export default {
  common: {
    save: 'Guardar',
    cancel: 'Cancelar',
    loading: 'Cargando...',
  },
  modules: {
    home: {
      title: 'Bienvenido',
      subtitle: 'Comenzar',
    },
  },
};

Secure Storage

// src/services/storage/secureStorage.ts
import EncryptedStorage from 'react-native-encrypted-storage';

export const secureStorage = {
  async setItem(key: string, value: string): Promise<void> {
    try {
      await EncryptedStorage.setItem(key, value);
    } catch (error) {
      console.error('Secure storage setItem error:', error);
    }
  },

  async getItem(key: string): Promise<string | null> {
    try {
      return await EncryptedStorage.getItem(key);
    } catch (error) {
      console.error('Secure storage getItem error:', error);
      return null;
    }
  },

  async removeItem(key: string): Promise<void> {
    try {
      await EncryptedStorage.removeItem(key);
    } catch (error) {
      console.error('Secure storage removeItem error:', error);
    }
  },
};

Network Security

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="false">
        <domain includeSubdomains="true">your-api-domain.com</domain>
    </domain-config>
</network-security-config>