React-native-config: Interpolating config variables in Info.plist

[migueloller]

First of all, thanks so much for adding Info.plist support in the latest version. Super awesome work! 🎉

For using react-native-fbsdk you need to use a couple of config variables in Info.plist. Here is what their guides instruct.

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{your-app-id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
  <string>{human-readable reason for photo access}</string>

As you can see, the first config variable has fb as a prefix and it is used again by itself later on. I tried using the new feature by doing fb__RN_CONFIG_FACEBOOK_APP_ID but this wont work because it seems that it won't catch the macro from the preprocessor. If there a way to fix this?

For now my workaround was to have another config variable entirely that has the fb as a prefix.

Would be happy to help if you guys can point me in the right direction. 😄

[pontusab]

@migueloller Did you get it to work?

[migueloller]

@pontusab,

I had to use the workaround I mentioned and have two variables.

[migueloller]

@himanshu-satija, the two variables you use should be setup in your .env file in the following way:

FACEBOOK_CUSTOM_URL_SCHEME=fb{your-app-id}
FACEBOOK_APP_ID={your-app-id}
FACEBOOK_DISPLAY_NAME={your-app-name}

Then, in the Info.plist you have the following:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>__RN_CONFIG_FACEBOOK_CUSTOM_URL_SCHEME</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>__RN_CONFIG_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>__RN_CONFIG_FACEBOOK_DISPLAY_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
  <string>{human-readable reason for photo access}</string>

[himanshu-satija]

@migueloller Thanks for your quick reply!

I just realized I hadn't linked the package 😅

So I removed my comment as soon as it hit me. Didn't check you had already replied.

[pedro]

Nice, this seems resolved by now?
Lemme know if there's anything still pending.
Thanks folks!

[hs-sundeep]

@migueloller Were you able to achieve this without an extra variable?

[migueloller]

@hs-sundeep, unfortunately I wasn't able to do it using a single variable. I moved away from that RN project 2 years ago as well so I didn't have the time or motivation to pursue a more elegant solution.