View the example project on GitHub (opens new window)

package.json

{
  "name": "react-native-project",
  "version": "0.0.0",
  "license": "MPL-2.0",
  "private": true,
  "main": "__generated__/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@app-config/main": "2",
    "expo": "39",
    "expo-status-bar": "1",
    "expo-yarn-workspaces": "1",
    "react": "16",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-web": "0.13"
  },
  "devDependencies": {
    "@babel/core": "7",
    "@app-config/main": "2",
    "@app-config/react-native": "2",
    "@lcdev/tsconfig": "0.1",
    "@types/react": "16",
    "@types/react-native": "0.63",
    "typescript": "4"
  }
}

metro.config.js

const { createMetroConfiguration } = require('expo-yarn-workspaces');

module.exports = Object.assign(createMetroConfiguration(__dirname), {
  // Force cache reset in order to load app-config changes
  resetCache: true,
  transformer: {
    babelTransformerPath: require.resolve('@app-config/react-native'),
  },
});

App.tsx

import React from 'react';
import { config } from '@app-config/main';
import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  // notice that TypeScript knows the type of externalApiUrl
  console.log('externalApiUrl:', config.externalApiUrl);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Config</Text>
      <Text>{JSON.stringify(config)}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 40,
    marginBottom: 20,
    fontWeight: '700',
  },
});

.app-config.schema.yml

type: object
additionalProperties: false

required:
  - externalApiUrl

properties:
  externalApiUrl:
    type: string
    format: uri

.app-config.meta.yml

generate:
  - file: './src/@types/lcdev__app-config/index.d.ts'

.app-config.yml

externalApiUrl: https://example.com

Generated Type File

// AUTO GENERATED CODE
// Run app-config with 'generate' command to regenerate this file

import '@app-config/main';

export interface Config {
  externalApiUrl: string;
}

// augment the default export from app-config
declare module '@app-config/main' {
  export interface ExportedConfig extends Config {}
}