1--- 2title: Continuous Native Generation (CNG) 3description: Learn about Continuous Native Generation (CNG) and how it works. 4sidebar_title: Continuous Native Generation 5--- 6 7A single native project on its own is complicated to maintain, scale, and update. In a cross-platform app, you have multiple native projects that you must maintain and keep up to date with the latest operating system releases to avoid falling too far behind in any third-party dependencies. 8 9As your project grows, the complexity involved with each third-party dependency increases and makes the app nearly impossible to upgrade--this drastically slows down developer momentum, and discourages adding complex native functionality, overall leading to less powerful apps. To combat these issues, we formalized a process called **Continuous Native Generation**, or _CNG_ for short. 10 11Continuous Native Generation is an abstract concept that describes the process of generating ephemeral native projects from a set of inputs. The inputs are typically a combination of configuration and code, and the output is a native project that can be compiled into a native app. We coined this term to describe the process used by [Expo Prebuild](/workflow/prebuild) to generate native projects for React Native apps, but the concept is not limited to React Native or cross-platform apps. 12 13## Usage in React Native 14 15Any React Native app can leverage **Continuous Native Generation** by using [Expo Prebuild](/workflow/prebuild). This enables you to automate upgrading React Native, installing/uninstalling libraries, white-labeling at scale, sharing config across multiple apps, generating assets, reducing [orphaned code](workflow/prebuild/#orphaned-code), and more––generally speaking, it allows you to build more powerful apps, at larger scales, without compromising on iteration speed. 16 17Expo as a framework enables **Continuous Native Generation** by combining the following tools: 18 191. The [Expo Config][expo-config] file (`app.json`, `app.config.js`). 202. Arguments passed to the `npx expo prebuild` command. 213. Version of `expo` that's installed in the project and its corresponding [prebuild template](#templates). 224. [Autolinking][autolinking], for linking [native modules][native-modules] found in the `package.json`. 235. Native Subscribers, for reducing native code side-effects in entry files. 246. EAS Credentials for code signing additional targets and entitlments. 25 26This boils down to a workflow where a user can express any native application with the `app.json` and generate that project--continuously--by running `npx expo prebuild`. 27 28## Community Adoption 29 30Many complex libraries and services already support CNG via Expo Prebuild, [MapBox](https://github.com/rnmapbox/maps), [OneSignal](https://github.com/OneSignal/onesignal-expo-plugin), [Stripe](https://github.com/stripe/stripe-react-native), and [React Native Firebase](https://rnfirebase.io/#expo) to name a few examples. 31 32Libraries that don't have first-party integration are also supported in the [community Config Plugins repository](https://github.com/expo/config-plugins/). 33 34But the best part; Expo Config Plugins have first-class support for building locally and adding to your project without any third-party intervention or NPM publishing. This enables you to move fast and patch things! 35 36<a 37 aria-label="Expo Config Plugins downloads" 38 href="http://www.npmtrends.com/@expo/config-plugins" 39 target="_blank"> 40 <img 41 alt="Downloads" 42 src="https://img.shields.io/npm/dm/@expo/config-plugins.svg?style=flat-square&labelColor=gray&color=33CC12&label=Downloads" 43 /> 44</a> 45 46> Note: NPM downloads do not exactly reflect the number of users, but it's a rough estimate of adoption. 47 48### Adoption by Library Authors 49 50React Native libraries can _adopt_ Continuous Native Generation in various ways depending on the complexity of their libraries. Here, we outline different scenarios for library adoption. 51 52- **No native code or configuration side-effects**: Libraries without native code or configuration side-effects, such as `react-native-blurhash`, can seamlessly integrate with `npx expo prebuild`. They can rely on Node Module Resolution and [Expo Autolinking][autolinking] to link into the native project without requiring any additional configuration. 53 54- **Native code with no additional setup after install**: Libraries with native code can often be installed and linked automatically with [Expo Autolinking][autolinking] which runs before the native app is built. 55 56- **Additional configuration side-effects and setup**: Libraries which require additional configuration side-effects can adopt CNG by creating [Expo Config Plugins][config-plugins] for their libraries. This approach enables library authors to automate adding values like permission messages to the `Info.plist`, or injecting targets in the Xcode project. 57 58- **Libraries Dependent on Native Runtime Hooks**: Libraries that depend on specific native runtime hooks, such as intercepting the initial launch URL via the AppDelegate, MainActivity, MainApplication, etc., can utilize [**Lifecycle listeners**](https://docs.expo.dev/modules/android-lifecycle-listeners/) to minimize the side-effects of their library. 59 60While library authors' adoption of CNG is not a prerequisite for using `npx expo prebuild`, it significantly enhances the user experience. 61If a library author has not yet adopted CNG, users can still use npx expo prebuild by creating local Config Plugins to modify the native generation pipeline. This flexibility ensures that the adoption of CNG is accessible and beneficial to all users within the React Native community. 62 63## Success 64 65CNG is designed to empower developers to build better apps than they normally could, by dividing configuration into testable and maintainable pieces. This allows developers to build more powerful apps without compromising on iteration speed. 66 67This pattern has been proven to work in the React Native community in the following ways... 68 69### Upgrades 70 71React Native developers who don't use **Continuous Native Generation** have reported that upgrading their apps to the latest version of React Native is the number one weakness of the library. cite: [React Native Survey (2022)](https://results.stateofreactnative.com/opinions/opinions_pain_points). 72 73When using CNG, the upgrade process simply involves upgrading the NPM dependencies, `app.json`, and re-running `npx expo prebuild --clean`. 74 75### Features 76 77The community has been able to convert difficult native features into simple configuration files, which has allowed developers to build more powerful apps without compromising on iteration speed. 78 79Here are a few impressive examples: 80 81- [iOS Safari Extensions](https://github.com/andrew-levy/react-native-safari-extension) -- here we can see the process of creating a Safari Extension for iOS, which is a notoriously difficult feature to implement, boiled down to a couple lines of json. 82- [iMessage Sticker App](https://github.com/expo/config-plugins/tree/main/packages/ios-stickers) -- This Expo Config Plugin can generate an entire iMessage Sticker App from a JSON object. 83- [Cross-platform End-2-End testing](https://github.com/expo/config-plugins/tree/main/packages/detox) -- Configure native apps to support E2E testing with Detox in a single-line. 84- [Entire Firebase suite](https://rnfirebase.io/) -- Here you can see the entire native Firebase suite going from a multi-step native process across multiple IDEs, down to basic JSON configuration. 85- [Cross-platform Homescreen Widgets](https://github.com/gaishimo/eas-widget-example) -- This Expo Config Plugin can generate a homescreen widget for iOS and Android. 86- [Notification extension and code signing](https://github.com/OneSignal/onesignal-expo-plugin) -- this Expo Config Plugin not only generates a notification extension target on iOS, but it also augments the EAS credentials service to keep zero-config code signing working. 87- [Apple App Clips](https://github.com/bndkt/react-native-app-clip) -- this Expo Config Plugin takes the process of generating an Apple App Clip from a multi-step process, ranging across multiple targets, and shakes it down to a single line `["react-native-app-clip", { "name": "My App Clip" }]`. 88 89At any point these features can be easily added, and just as easily removed, without any side effects. 90Continuous Native Generation allows developers to experiment with complex features, and iterate on them quickly without worrying about the long-term maintenance costs or potential orphaned code in their project or uncommited native caches. 91 92This nets out to better apps, built faster. 93 94## Frequently Asked Questions 95 96### Is Continuous Native Generation (CNG) limited to React Native projects? 97 98No, CNG is a versatile pattern that can be applied to any native project. While Expo Prebuild is a tool that implements CNG specifically for React Native projects, the concept itself is not limited to this framework. 99 100### Can CNG be used for operating systems other than iOS and Android? 101 102Absolutely! CNG is an abstract concept that can be applied to any operating system. Take Expo for example, although Expo Prebuild officially implements CNG for iOS and Android, it also provides abstract platform support for users to create implementations for additional platforms. 103 104### Is using Expo a requirement for CNG? 105 106Not at all. CNG is an open pattern that can be adopted by any community. We've defined the pattern abstractly to help other communities understand how they can adopt CNG for their own projects. 107 108### How does CNG compare to web development patterns like Static Site Generation (SSG)? 109 110CNG shares similarities with SSG in that it generates a project from a set of inputs. However, CNG differs from SSG in its output; it generates native runtime code instead of static website code. This means the native project is generated on-demand, and the generated source code and configuration are discarded once the native project is compiled into a native app. 111 112### Is it possible to use CNG with an existing brownfield project? 113 114CNG is designed to manage the entire state of a native project continuously. As a result, it's not intended for use with existing brownfield projects. However, you can use CNG to generate a new native project, which can then be integrated into an existing brownfield project. 115 116[config-plugins-repo]: https://github.com/expo/config-plugins 117[template]: https://github.com/expo/expo/tree/main/templates/expo-template-bare-minimum 118[native-modules]: /more/glossary-of-terms/#native-module 119[autolinking]: /more/glossary-of-terms#autolinking 120[eas]: /eas 121[expo-go]: https://expo.dev/expo-go 122[config-plugins]: /config-plugins/introduction/ 123[expo-config]: /workflow/configuration/ 124
