Expo config plugin

[nandorojo]

Expo's new config plugin setup would allow React Native Firebase to work with Expo managed. All it would require is creating a simple config plugin.

Docs are here: https://docs.expo.io/guides/config-plugins/

I would PR this, but I honestly don't know how native code works so I'm not exactly sure how to implement it. But the gist is, Expo lets you edit native files and configurations in a "prebuild" step. Users can install this as a simple JS plugin in their app.config.js file.

---

Update

This was added in 12.4.0! See docs.

[nandorojo]

@mikehardy curious what you think. Happy to help however I can. We basically just need to turn the installation instructions into a config plugin, and suddenly any React Native user (including Expo managed apps) can use react-native-firebase. So cool!

[brentvatne]

@mikehardy - maybe using app.json would have been a good fit instead of creating firebase.json, we created that file in react-native for config just like what you put in firebase.json. we namespace expo specific properties under the expo key and the rest can be used for any purpose, eg: name and displayName at the root used by the react-native template.

[nandorojo]

FWIW, my config plugin below follows the installation steps from the docs, but the app crashes when I try to open it. I think it may be related to the order in which withDangerousMod is called. Not sure.

[mikehardy]

I have a great pile of things in my queue ahead of this, but I do love interoperability when possible, and I'm following this. @nandorojo I sent you a link to the demo script I use which goes from zero through react-native bare template through working firebase app, I can't see how I can really do more than that? if/when I have time in the future I'll see about converging config stuff

[nandorojo]

@mikehardy Yeah I appreciate your attention here. Unfortunately I'm very unfamiliar with the shell syntax so it's foreign to me but I'll keep trying. Thanks again!

[mikehardy]

@nandorojo you can just do a side-by-side then and visually compare the files or diff them. No need to understand sed (which does have a truly horrible syntax)

[nandorojo]

Here's my latest working example (iOS only):

1. Put your GoogleService-Info.plist into a GoogleService-Info.js file in the root of your expo project

const GoogleServicesInfoPlist = `` // copy the XML file into this string

module.exports = {
  GoogleServicesInfoPlist
}

2. Add the Expo mods to your app.config.ts (this would be in the RNFB repo later, and would be imported easily by a user, just like stripe-react-native's plugin)

// app.config.ts

import { ExpoConfig } from '@expo/config'

import {
  ConfigPlugin,
  ExportedConfigWithProps,
  WarningAggregator,
  withAppDelegate,
  withDangerousMod
} from '@expo/config-plugins'

import { resolve } from 'path'
import fs from 'fs'

const config = {
  // your expo config
}

/**
 * This code will all go inside of the RNFB repo, making it easy for users to import in their projects.
 */

const RN_FIREBASE_IMPORT = `#import <Firebase.h>
`

const RN_FIREBASE_DID_FINISH_LAUNCHING_IDENTIFIER = `- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{`

const RN_FIREBASE_DID_FINISH_LAUNCHING_CODE = `
if ([FIRApp defaultApp] == nil) {
  [FIRApp configure];
}`

function modifyAppDelegate(appDelegate: string) {
  if (!appDelegate.includes(RN_FIREBASE_IMPORT)) {
    appDelegate = RN_FIREBASE_IMPORT + appDelegate
  }
  if (appDelegate.includes(RN_FIREBASE_DID_FINISH_LAUNCHING_IDENTIFIER)) {
    const block = RN_FIREBASE_DID_FINISH_LAUNCHING_IDENTIFIER + RN_FIREBASE_DID_FINISH_LAUNCHING_CODE
    appDelegate = appDelegate.replace(RN_FIREBASE_DID_FINISH_LAUNCHING_IDENTIFIER, block)
  } else {
    throw new Error('Failed to detect didFinishLaunchingWithOptions in AppDelegate.m')
  }
  return appDelegate
}

const withRnFirebaseIosAppDelegate: ConfigPlugin = (config) => {
  return withAppDelegate(config, (config) => {
    if (config.modResults.language === 'objc') {
      config.modResults.contents = modifyAppDelegate(config.modResults.contents)
    } else {
      WarningAggregator.addWarningIOS('withRnFirebaseIosAppDelegate', 'Swift AppDelegate files are not supported yet.')
    }
    return config
  })
}

type Props = {
  GoogleServicesInfoPlist: string
}

async function saveFileAsync(path: string, content: string): Promise<void> {
  return fs.promises.writeFile(path, content, 'utf8')
}

async function addGoogleServiceInfoPlist(config: ExportedConfigWithProps, { GoogleServicesInfoPlist }: Props) {
  try {
    if (!config.modRequest.projectName) {
      throw new Error('missing iOS project name.')
    }
    const path = resolve(
      config.modRequest.platformProjectRoot,
      config.modRequest.projectName || '',
      'GoogleService-Info.plist'
    )
    if (!GoogleServicesInfoPlist) {
      throw new Error('Missing GoogleService-Info.plist file.')
    }
    saveFileAsync(path, GoogleServicesInfoPlist)
  } catch (e) {
    WarningAggregator.addWarningIOS('with-rn-firebase-ios', `Couldn't add GoogleService-Info.plist - ${e}.`)
  }
}

const withGoogleServiceInfoPlist: ConfigPlugin<Props> = (config, props) => {
  return withDangerousMod(config, [
    'ios',
    async (config) => {
      await addGoogleServiceInfoPlist(config, props)
      return config
    }
  ])
}

export const withRnFirebaseIos: ConfigPlugin<Props> = (config, props) => {
  config = withGoogleServiceInfoPlist(config, props)
  config = withRnFirebaseIosAppDelegate(config)

  return config
}

const { GoogleServicesInfoPlist } = require('./GoogleService-Info')

export default withRnFirebaseIos(config, {
  GoogleServicesInfoPlist
})

For developer, the final API will look like this:

const config = {
  // user's expo config
}

const { GoogleServicesInfoPlist } = require('./GoogleService-Info')

export default withRnFirebase(config, {
  GoogleServicesInfoPlist
})

And it'll work for any RN project, Expo or otherwise.

[mikehardy]

https://github.com/mikehardy/rnfbdemo/blob/master/make-demo.sh

[barthap]

Hi, I've created and published a with-rn-firebase plugin. I based it on original Expo plugins (expo-firebase-core and built-in ones for Google services files). It would be nice if something like that was integrated into @react-native-firebase/app. I can help if anyone wants to make a PR.

Edit: The PR: #5480

[nandorojo]

Thanks so much! I’ll try this tomorrow morning and let you know.

[sshquack]

Thanks @barthap! Would be amazing to roll this into rn-firebase eventually!

[mikehardy]

If there is not a PR for it already (I don't think one exists?) I'm open to the idea, and a PR is by far the fastest way to move it forward

[barthap]

Alright then, I'll open a PR integrating my plugin sometime next week. Is that OK?
Edit: The PR: #5480

[mikehardy]

Any timeline is fine, it's open source, no pressure :-), which also carries the implication I'm not sure when I'll have time to review/merge/release (assuming it's all good) on my side though I do give RNFB regular timeslices

[nandorojo]

@barthap's plugin has been working with RNFB 12.0.0. Using 12.1.0 seems to crash my app on startup, but I'm not sure if that's related to the config plugin or not.

[mikehardy]

I think that will be unrelated, I've got 12.1.0 in production on a couple projects one with a full QA squad etc and it appears fine. diff from 12.0.0 to 12.1.0 was tiny

[nandorojo]

Yeah that makes sense. I'll try again and see if I can repro.

[barthap]

Some updates:

• Expo has released the Development Clients (also see blog post) - basically it allows you to build your own Expo Go/Client with RNFB (and any other native lib) included - so now you can use RNFB in Managed workflow 🎉
• The RNFB can be easily installed only with yarn install calls (without any native modifications) thanks to Config Plugins
• I've written a Medium article about the Expo - RNFB integration workflow (it's gonna be a little updated when the feat: Added Expo config plugin #5480 gets merged).
• ❗ Edit: The PR is merged, config plugins are shipped with RNFB v12.4.0+. See documentation for more details.

[sshquack]

Rn Firebase is the only reason I ejected from expo and it is a pain to setup the .plist config files in the right place. So having expo-config plug-in for rn Firebase is going to be a win-win for everyone!

• stay in expo managed workflow
• super fast and error free Rn Firebase integration
• easy to swap dev or prod environment credentials in 2 lines

This will be a game changer!

[nandorojo]

I'm using it successfully in my managed Expo app on iOS 🔥

I'll be testing with Android + Hermes this week too.

[todorone]

Amazing job, thanks @barthap!