React Native

Agrippa has first-class support for React Native projects

Core functionality should work out of the box - Agrippa automatically detects React Native projects in typical setups, and generates components accordingly.

Auto-detection and explicitly setting the framework

Agrippa’s auto-detection determines which framework is used in your environment through your package.json’s dependencies. Particularly, React Native is detected through the react-native package.
However, some setups have more than one framework as a dependency or none at all, which can lead Agrippa to a different result than the desired one.

If this is the case for your setup, you can explicitly set Agrippa’s options.framework to react-native in agrippa.config.mjs:

// @ts-check
// note the new import
import { defineConfig, Framework } from "agrippa";

export default defineConfig({
  options: {
    framework: Framework.REACT_NATIVE

    // ...
  },
  // ...
});

Framework.REACT_NATIVE is equivalent to "react-native", but using the built-in Framework enum is clearer and less prone to errors.

React Native Styling

Agrippa can be configured to generate a StyleSheet.create({}) declaration for your react-native components. This can be done by setting options.styling to Styling.REACT_NATIVE in the config:

// @ts-check
// note the new import
import { defineConfig, Styling } from "agrippa";

export default defineConfig({
  options: {
    styling: Styling.REACT_NATIVE
    
    // ...
  },
  // ...
});

Styling.REACT_NATIVE is equivalent to "react-native", but using the built-in Styling enum is clearer and less prone to errors.

Also see our React page for react-related docs