How to Play PCM Audio in Expo React Native Using Android Native Modules

In the world of mobile app development, React Native and Expo have become popular choices for building cross-platform applications. However, when it comes to integrating native functionalities, such as playing PCM audio using Android native modules, developers often face challenges. This blog post will guide you through the process of using Android native modules in an Expo React Native project to play PCM audio, and how to manage these modules effectively.

Understanding the Challenge

Expo Managed Workflow Limitations

Expo's Managed Workflow is designed to simplify app development by allowing developers to write pure JavaScript/TypeScript code without delving into native code. However, this convenience comes with limitations:

• No Direct Native Module Integration: You cannot directly add custom native modules in the Managed Workflow. This means functionalities like playing PCM audio using Android's AudioTrack class cannot be directly implemented.

The Issue with expo prebuild --clean

When you run expo prebuild --clean, Expo regenerates the android/ and ios/ directories based on your configuration files and dependencies. This process deletes any manually added native code, which can be frustrating if you're trying to integrate custom native modules.

Solutions to Integrate Native Modules

Option 1: Eject to Bare Workflow

1. Eject Your Project: Use npx expo eject to convert your Expo project into a standard React Native project. This will create android/ and ios/ directories where you can add custom native code.

2. Add Native Code: Implement your PCM audio playback using Android's AudioTrack class within the android/ directory.

3. Manage Dependencies: You will need to handle native dependencies and build processes manually, which can be more complex but offers greater flexibility.

Option 2: Use Expo Dev Client

1. Install Expo Dev Client: This allows you to maintain the Expo project structure while integrating custom native modules.

2. Create a Config Plugin: Write an Expo Config Plugin to automate the integration of your native code during the prebuild process. This ensures that your custom native modules are included every time you run expo prebuild.

3. Build with EAS: Use Expo Application Services (EAS) to build your app, which includes your custom native modules.

Example: Writing a Config Plugin

A Config Plugin is a JavaScript function that modifies the native project files during the prebuild process. Here’s a simple example:

Javascript
1// plugins/withCustomAudioModule.js
2module.exports = function withCustomAudioModule(config) {
3  return {
4    ...config,
5    android: {
6      ...config.android,
7      // Add custom native module integration here
8    },
9  };
10};
11

Conclusion

Integrating Android native modules in an Expo React Native project requires careful consideration of your workflow. Whether you choose to eject to the Bare Workflow or use the Expo Dev Client with a Config Plugin, each approach has its trade-offs. Ejecting provides full control over native code, while the Dev Client allows you to maintain the Expo ecosystem with some additional setup.

By understanding these options and implementing the right strategy, you can successfully integrate native functionalities like PCM audio playback into your Expo React Native app.

Further Reading

• Expo Config Plugins Documentation
• Expo Dev Client Documentation
• React Native Native Modules Documentation