React-native-config: iOS Integration change - clarification

[JeremyBradshaw7]

In this commit you changed the way ios integration is managed, but can you clarify whether the old mechanism still works? I have Info.plist entries like this:

    <key>CFBundleShortVersionString</key>
    <string>__RN_CONFIG_APP_VERSION</string>
    <key>CFBundleVersion</key>
    <string>__RN_CONFIG_APP_BUILD</string>

And this in build settings, as per the old instructions:

And, at least in releases to TestFairy this still seems to work having upgraded to react-native-config 0.11.7, but before we roll out to the app store I just wanted confirmation that this will still work.

Were there any upgrade instructions when this new mechanism was rolled out? What is the advantage of the new mechanism using a .xcconfig file? Seems more complicated in the setup to me, and the latest README does not clarify how to refer to ENVFILE variables in the Info.plist file.

[sarmad1995]

it didn't work for my in the latest release,
and i used ${VARIABLE_NAME} like this in my info.plist.

[JeremyBradshaw7]

it didn't work for my in the latest release,
and i used ${VARIABLE_NAME} like this in my info.plist.

Hmm, it didn't work using the old mechanism or doesn't work with the new?

[dcalhoun]

I agree it'd be helpful if the project maintainer would include an example of accessing values in the documentation.

I am also unable to get access within Info.plist working with the new instructions found in this project's README. I've attempted to access the values via __RN_CONFIG_<key> and <key>. Neither work.

[dcalhoun]

I was able to get access within Info.plist working just now. The issues with my original approach that I identified were:

1. Within Info.plist, you now must access the values in your .env files with $(<key>) (e.g. $(MY_KEY_NAME)) rather than __RN_CONFIG_<key>.
2. I was adding the build phase outlined in step 6 of the Info.plist setup found in the README in the incorrect place. See the image below as for the correct location.

Hopefully this is helps others with issues.

[JeremyBradshaw7]

Many thanks @dcalhoun - will try this tomorrow.

[c0d3x]

With some help from this post, I now have data in my tmp.xcconfig
But when I try to access Config object in react, I get undefined.
Did you guys get that part to work, and if so how?
I set the Config.xcconfig on my debug and release app like in the post.

[dcalhoun]

@c0d3x if you are referring to accessing environment variables from react-native-config within your JavaScript files, that should be possible with the basic setup. You shouldn't need to create Config.xcconfig unless you want to access your environment variables from the Info.plist.

[c0d3x]

So why does it not work? I have the basic setup too.

[dcalhoun]

So why does it not work? I have the basic setup too.

@c0d3x I cannot answer that question from the information you provided. I recommend opening a new issue in this repository outlining the details of your setup and potentially creating a simple reproduction example of your issue in a public repository. That will help the community assist you.

[c0d3x]

So why does it not work? I have the basic setup too.

@c0d3x I cannot answer that question from the information you provided. I recommend opening a new issue in this repository outlining the details of your setup and potentially creating a simple reproduction example of your issue in a public repository. That will help the community assist you.

Allready did: https://github.com/luggit/react-native-config/issues/412

[export-mike]

Looks Like

$(KEY)

is now the method of accessing env vars from .env

[JeremyBradshaw7]

I tried the new approach and tried to follow the advice exactly, but ran into problems like this

   /bin/sh -c /Users/jeremybradshaw/rn060/ios/build/Build/Intermediates.noindex/ArchiveIntermediates/ccf/IntermediateBuildFilesPath/Pods.build/Release-iphoneos/react-native-config.build/Script-46EB2E00013960.sh
ruby: No such file or directory -- ./node_modules/react-native-config//ios/ReactNativeConfig/BuildDotenvConfig.ruby (LoadError)
Command PhaseScriptExecution failed with a nonzero exit code

So am still stuck on the old mechanism with __RN_CONFIG_xxx references, which DOES still seem to work though I haven't had confirmation yet whether this is reliable.

[jsvegborn]

For me the following worked for RN 61.4 and RNC 12.0:

1. Follow the steps in the readme with the clarification that under Edit Scheme>Pre actions>"provide build settings from" should be set to your target.
   
2. Make sure that following settings in Build Settings>Packaging is set for the Project and NOT for the target. If it is set for the target, remove it from there.
   
3. If you have a postinstall script specific for react-native-config in your Podfile, remove it.
4. Replace __RN_CONFIG_xxx with $(xxx) in your project

[damathryx]

I've done the steps but it doesn't work.

RN Config: 0.12.0

[export-mike]

@damathryx whats the errors?

does your info plist use $() instead now?

[Daimyo7]

I have the BuildXCConfig.rb building the tmp.xcconfig.
I have the Config.xcconfig with #include? "tmp.xcconfig".
I check that the Tmp file has data and is within the ios folder, but when I'm done building the app doesn't load any of the config data.

What am I missing? Based on the Readme everything is in the same order.

[Daimyo7]

Found it.
I had to link the framework into the libraries then in AppDelegate.m
add

import

and
NSDictionary *config = [ReactNativeConfig env];
with in the application.

[edritech93]

same for me, please help

[vitalyiegorov]

To automate build phase addition you can add the following code snippet to your ios/Podfile(only fix the relative path to your node_modules, we are using monorepo):

post_install do |installer|
    installer.pods_project.targets.each do |target|
      targets_to_ignore = %w(React yoga)

      if targets_to_ignore.include? target.name
        target.remove_from_project
      end

      if target.name == 'react-native-config'
        phase = target.project.new(Xcodeproj::Project::Object::PBXShellScriptBuildPhase)
        phase.shell_script = "cd ../../"\
                             " && RNC_ROOT=../../node_modules/react-native-config"\
                             " && export SYMROOT=$RNC_ROOT/ios/ReactNativeConfig"\
                             " && ruby $SYMROOT/BuildXCConfig.rb ${SRCROOT}/.. ${SRCROOT}/../tmp.xcconfig"

        target.build_phases << phase
        target.build_phases.move(phase,0)
      end

    end
  end

Don't forget to clear project cache and install pods after addition.

[export-mike]

for me i have multiple schemes so I set the "envfile"

echo ".env.dev" > /tmp/envfile

then I toggled the build system from new to legacy and back

also moved the

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

to a build phase.

[twelve17]

@maxkomarychev , could you kindly help out with how the new scheme works? I have looked at the project's README. I've also looked at the sample project, using the pods branch, trying to copy the setup on the XCode project to mine, and have had no luck. It's not very clear what should stay from the older approach vs the newer approach:

1. Should the modification to the Podfile that add a build phase be included? The example app seems to lack it.

2. Regarding this code:

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

Should it be added as a Target build phase (e.g. "Run Script"), or as a Pre-Action in the Scheme settings?

1. If 2 is to be a Pre-Action, should "Provide build settings from" be set to the target, as specified in this comment?

2. Should the Info.plist settings referenced in this comment be removed, or kept in the project? Or target? The example app seems to lack them altogether.

3. In Info.plist, should variables be referenced by ${xyz} or $(xyz)? I see people here commenting that the $(xyz) format should be used, but the example is using ${xyz}

I've tried lots of combinations of the above, and have had zero luck getting it to work. For others trying to debug this, note that you may have to take extra steps for XCode to re-build the Info.plist file, as shown here, otherwise you may make changes to it and not be reflected in the compiled app.

[maxkomarychev]

hey @twelve17 ,

1. no. the podspec file now includes everything that is needed. that is - it will install script phase itself after you do 'pod install' - https://github.com/luggit/react-native-config/blob/master/react-native-config.podspec#L20-L29
2. it should be Pre-Action in scheme.
3. "Provide builds settings" should be set to your target, otherwise ${SRCROOT} will be undefined
4. NO custom settings for infoplist processing are needed
5. afaik both forms $() and ${} are identical

hope this helps!

[twelve17]

@maxkomarychev yes, thank you so much for your response!

I can confirm I have gotten it to work using those instructions, but will add I had to remove the cached Info.plist, which I did by adding a command to do so in the same pre-action:

rm "${CONFIGURATION_BUILD_DIR}/${INFOPLIST_PATH}"
echo ".env.staging" > /tmp/envfile
"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

Reference: https://stackoverflow.com/a/18638003

[twelve17]

@maxkomarychev I've noticed that for production builds I've created via the XCode "Archive" task, the app is not seeing the configs. Is it possible that the same pre-action and "provide build settings" (2 and 3 from my comment) are needed in the scheme's "Archive" section too? Or is there another step necessary?

[maxkomarychev]

@twelve17 looks like you're right, it needs to be as Pre-Action for Archive too.

[twelve17]

@maxkomarychev that didn't seem to fix my problem. I think I'm running into #409 . The circle build is always ending up with a Info.plist file that is missing the env values. After spending so many hours on this, I think I will need to either do this workaround or downgrade to the version of this module prior to this approach change.

[luatnd]

Agree!

The README did not mention that I need to change the key:

Within Info.plist, you now must access the values in your .env files with $() (e.g. $(MY_KEY_NAME)) rather than __RN_CONFIG_.

Follow README file and use $(KEY) form will work
[email protected]
[email protected]

[Thram]

For me the following worked for RN 61.4 and RNC 12.0:

1. Follow the steps in the readme with the clarification that under Edit Scheme>Pre actions>"provide build settings from" should be set to your target.

1. Make sure that following settings in Build Settings>Packaging is set for the Project and NOT for the target. If it is set for the target, remove it from there.
   

2. If you have a postinstall script specific for react-native-config in your Podfile, remove it. 4. Replace __RN_CONFIG_xxx with $(xxx) in your project

I've been going around for hours to fix this and finally this saved me.
Thank you so much!

Using:
"react-native": "0.61.5",
"react-native-config": "^0.12.0",

[maxkomarychev]

hey, if you still having issues with this lib - I kindly ask to try my - https://www.npmjs.com/package/react-native-ultimate-config
I don't see if this repo is currently maintained 🤷‍♂

[nabilfreeman]

I'm experiencing this issue, it seems to only be happening when I build via command line. In xcode it's working fine.

That sounds plausible as some of you are reporting CI issues which are headless.

Maybe something to do with the SRCROOT path being different from terminal? But that shouldn't happen

[tr3v3r]

Thanks, @maxkomarychev! It works like a charm 🎉 🎉 🎉

[nabilfreeman]

I solved the issue by making sure "Provide build settings from" had the target set - before it was blank.

Edit: derp I see @Thram above commented the same! Don't know how I missed that 🤦‍♂️

@maxkomarychev I checked out your library, the README is excellent and looks really thorough. Just wondering if it supports multiple environment files? In our project we have 8 different env files and I couldn't see a way to choose a specific one apart from maybe overwriting .env during each build process.

[maxkomarychev]

@nabilfreeman the lib does not have any path hardcoded - just explicitly specify file you want to use when running cli. Feel free to open issues with questions in my repo. Thanks for feedback!

[tr3v3r]

I solved the issue by making sure "Provide build settings from" had the target set - before it was blank.

Edit: derp I see @Thram above commented the same! Don't know how I missed that 🤦‍♂️

@maxkomarychev I checked out your library, the README is excellent and looks really thorough. Just wondering if it supports multiple environment files? In our project we have 8 different env files and I couldn't see a way to choose a specific one apart from maybe overwriting .env during each build process.

As for me I just run right after yarn / npm install: yarn rnuc <your env file>.

It works locally and on CI as well.

Moreover, If you use TypeScript you got a fully typed config object in JS.

import config from 'react-native-ultimate-config'

config.TEST -> // string

[blcsntb]

For me the following worked for RN 61.4 and RNC 12.0:

1. Follow the steps in the readme with the clarification that under Edit Scheme>Pre actions>"provide build settings from" should be set to your target.

1. Make sure that following settings in Build Settings>Packaging is set for the Project and NOT for the target. If it is set for the target, remove it from there.
   

2. If you have a postinstall script specific for react-native-config in your Podfile, remove it. 4. Replace __RN_CONFIG_xxx with $(xxx) in your project

It works for me. Thank you!

[ArekChr]

For me the following worked for RN 61.4 and RNC 12.0:

1. Follow the steps in the readme with the clarification that under Edit Scheme>Pre actions>"provide build settings from" should be set to your target.

1. Make sure that following settings in Build Settings>Packaging is set for the Project and NOT for the target. If it is set for the target, remove it from there.

1. If you have a postinstall script specific for react-native-config in your Podfile, remove it. 4. Replace __RN_CONFIG_xxx with $(xxx) in your project

I've been going around for hours to fix this and finally this saved me.
Thank you so much!

Using:
"react-native": "0.61.5",
"react-native-config": "^0.12.0",

How to configure this for other plist files instead of Info.plist??

[blcsntb]

@ArekChr You don't need configuration.

// .env file
CUSTOM_APP_NAME=xxx

// AnotherInfo.plist file
$(CUSTOM_APP_NAME)

[ArekChr]

@ArekChr You don't need configuration.

// .env file
CUSTOM_APP_NAME=xxx

// AnotherInfo.plist file
$(CUSTOM_APP_NAME)

this does not work, works only in info.plist