Sample expo plugin file for iOS and native changes

This is a sample expo plugin file that shows how to add custom codes in iOS and Android native files. So for best practice, you can create a new file named app.plugin.js in the root of your project and add the following code. Also as a best practice, you can add your custom codes in separate functions for iOS and Android and if you can keep these functions in separate files and import them in app.plugin.js file for better code management.

app.plugin.js

const { withAppDelegate, withInfoPlist, withAppBuildGradle } = require('expo/config-plugins');


const applyIOS = (config) => {
  config = withAppDelegate(config, (config) => {
    // Add your custom codes here
    return config;
  });
  config = withInfoPlist(config, (config) => {
    // Add your custom code here
    return config;
  });
  return config;
};

const applyAndroid = (config) => {
  config = withAppBuildGradle(config, (config) => {
    // Add your custom code here
    return config;
  });
  return config;
};


module.exports = function myCustomExpoFunctionName(config) {
  config = applyIOS(config);
  config = applyAndroid(config);

  return config;
};

Best practices

1. Do not put console.log in the plugin file when you are building the app for production. It might fail the build process. But you can use console.log for debugging purposes.

2. Keeping android and iOS codes in separate functions and separate files for better code management.

app.plugin.js

const { applyIos } = require('./buildConfig/ios');
const { applyAndroid } = require('./buildConfig/android');

module.exports = function myCustomExpoFunctionName(config) {
  config = applyIOS(config);
  config = applyAndroid(config);

  return config;
};

buildConfig/ios.js

const { withAppDelegate, withInfoPlist } = require('expo/config-plugins');

module.exports.applyIos = function applyIos(config) {
  config = withAppDelegate(config, (config) => {
    // Add your custom codes here
    return config;
  });
  config = withInfoPlist(config, (config) => {
    // Add your custom code here
    return config;
  });
  return config;
};

buildConfig/android.js

const { withAppBuildGradle } = require('expo/config-plugins');

module.exports.applyAndroid = function applyAndroid(config) {
  config = withAppBuildGradle(config, (config) => {
    // Add your custom code here
    return config;
  });
  return config;
};