Building and Configuring Apps

{
  "name": "my-react-native-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "expo": "~50.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "typescript": "^5.0.0"
  }
}

{
  "name": "MyReactNativeApp",
  "displayName": "MyReactNativeApp",
  "android": {
    "package": "com.mycompany.myreactnativeapp"
  },
  "ios": {
    "bundleIdentifier": "com.mycompany.myreactnativeapp"
  }
}

mkdir -p ios/MyApp/Assets.xcassets/AppIcon.appiconset
cp icon-1024.png ios/MyApp/Assets.xcassets/AppIcon.appiconset/icon-1024.png

mkdir -p android/app/src/main/res/mipmap-mdpi
mkdir -p android/app/src/main/res/mipmap-hdpi
mkdir -p android/app/src/main/res/mipmap-xhdpi

cp icon-192.png android/app/src/main/res/mipmap-mdpi/ic_launcher.png
cp icon-384.png android/app/src/main/res/mipmap-hdpi/ic_launcher.png
cp icon-576.png android/app/src/main/res/mipmap-xhd/%ic_launcher.png

import SplashScreen from 'react-native-splash-screen';

const App = () => {
  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Text>Hello World</Text>
    </View>
  );
};

android {
    buildTypes {
        debug {
            debuggable true
        }
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

export CONFIGURATION_BUILD_DIR="build/Release-iphoneos"

// config/env.js
const envConfig = {
  development: {
    apiUrl: 'http://localhost:3000',
    debug: true
  },
  production: {
    apiUrl: 'https://api.myapp.com',
    debug: false
  }
};

export default envConfig[process.env.NODE_ENV || 'development'];

import config from './config/env';

function fetchData() {
  return fetch(`\${config.apiUrl}/data`);
}

{
  "name": "MyReactNativeApp",
  "version": "2.1.0",
  "buildNumber": "5"
}

{
  "expo": {
    "name": "MyApp",
    "version": "3.0.1",
    "android": {
      "versionCode": 10
    },
    "ios": {
      "buildNumber": "10"
    }
  }
}

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

const requestCameraPermission = async () => {
  if (Platform.OS === 'android') {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Camera Permission',
          message: 'App needs camera access to scan QR codes.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK'
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('Camera permission granted');
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  }
};

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="myapp" android:host="notifications" />
</intent-filter>

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>Deep Link Scheme</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

MYAPP_RELEASE_STORE_FILE=../my-release-key.keystore
MYAPP_RELEASE_STORE_PASSWORD=myStorePassword
MYAPP_RELEASE_KEY_ALIAS=myKeyAlias
MYAPP_RELEASE_KEY_PASSWORD=myKeyPassword

signingConfigs {
    release {
        storeFile file(System.getenv("MYAPP_RELEASE_STORE_FILE"))
        storePassword System.getenv("MYAPP_RELEASE_STORE_PASSWORD")
        keyAlias System.getenv("MYAPP_RELEASE_KEY_ALIAS")
        keyPassword System.getenv("MYAPP_RELEASE_KEY_PASSWORD")
    }
}