expo app.제이슨에서 flavor 같은 거 해요.

app.json와 병렬적으로 배열app.config.js하면 expo의config는 동적app.json을 구축할 수 있다.

https://docs.expo.io/versions/latest/config/app/

https://docs.expo.io/workflow/configuration/

// app.config.js

export default ({ config }) => { // app.jsonのexpo部分が取れる
  console.log(config.name)
  return config
}

그나저나 삭제app.json된 경우app.config.js는 읽을 줄 알기 때문에 여기에 모든 설정을 기술할 수 있지만 react-native-version 등 생태계는 사용할 수 없기 쉬우므로 보존app.json과 동시에 사용하는 것이 좋다.

flavor의 모습을 보여드릴게요.

이걸로 빌딩 플래버 같은 거 하자.
원시app.json가 이런 상태라고 가정하다

{
  "expo": {
    "name": "example-flavor-config",
    "slug": "example-flavor-config",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

이런 느낌으로 준비해 봤는데 거기에 덮인 차이점만 기술했어app.staging.json

{
  "expo": {
    "name": "(staging)example-flavor-config",
    "slug": "example-flavor-config-staging",
    "splash": {
      "backgroundColor": "#000000"
    }
  }
}

자바스크립트로 Object를 합병하는 것은 번거롭기 때문에 이번에 이용deepmerge

$ yarn add -D deepmerge

및 결합json

// app.config.js
import merge from "deepmerge"
import stagingConfig from "./app.staging.json"

export default ({ config }) => {
  if (process.env.BUILD_FLAVOR === "staging") {
    return merge(config, stagingConfig.expo)
  }
  return config
}

그 다음에 이런 느낌으로 환경 변수를 바꿀 수 있어요.

$ BUILD_FLAVOR=staging expo build:ios