Unable to Integrate react-native-filament Despite Following Installation & Configuration Steps

[obeliskgroup]

Hello maintainers! I’m trying to integrate react-native-filament into my React Native project (Expo SDK ) and am running into persistent errors. Below is a summary of everything I’ve done, all based on the Getting Started Guide instructions for react-native-filament. Despite carefully following each step, I still encounter issues preventing the library from working properly.

Node Version : v20.18.0

app.json config

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

babel config :

module.exports = {
    presets: [
      'babel-preset-expo'
    ],
    plugins: [
      [
        // Inline the environment variable so Metro sees a literal string
        'transform-inline-environment-variables',
        {
          include: ['EXPO_ROUTER_APP_ROOT']
        }
      ],
    ],
  };

metro config :

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname)

/**
 * Metro configuration
 * https://metrobundler.dev/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
        // Enable require.context (experimental feature)
        unstable_allowRequireContext: true,
      },
    resolver: {
        // This makes it possible to import .glb files in your code:
        assetExts: [...(defaultConfig.resolver?.assetExts || []), 'glb']
    }
};

module.exports = mergeConfig(defaultConfig, config);

Package json

{
  "name": "my-app",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native/metro-config": "^0.77.0",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "expo": "~52.0.28",
    "expo-blur": "~14.0.3",
    "expo-constants": "~17.0.5",
    "expo-font": "~13.0.3",
    "expo-haptics": "~14.0.1",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-splash-screen": "~0.29.21",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.1",
    "expo-system-ui": "~4.0.7",
    "expo-web-browser": "~14.0.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.6",
    "react-native-filament": "^1.6.1",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5",
    "react-native-worklets-core": "^1.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/plugin-syntax-jsx": "^7.25.9",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.3",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

Errors like :

ERROR SyntaxError: my-app/node_modules/@expo/metro-runtime/src/location/install.native.ts: Missing semicolon. (16:37)

14 | import getDevServer from '../getDevServer';
15 |

16 | const manifest = Constants.expoConfig as Record<string, any> | null;
| ^
17 |
18 | function getOrigin() {
19 | if (process.env.NODE_ENV !== 'production') {
› Stopped server

(NOBRIDGE) ERROR Error: The experimental Metro feature require.context is not enabled in your project.
This can be enabled by setting the transformer.unstable_allowRequireContext property to true in your Metro configuration. [Component Stack]
(NOBRIDGE) ERROR Error: The experimental Metro feature require.context is not enabled in your project.
This can be enabled by setting the transformer.unstable_allowRequireContext property to true in your Metro configuration. [Component Stack]
(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'ctx' of undefined

This error is located at:
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (created by withDevTools(ErrorOverlay))
in withDevTools(ErrorOverlay)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'ctx' of undefined

This error is located at:
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (created by withDevTools(ErrorOverlay))
in withDevTools(ErrorOverlay)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
› Reloading apps

iOS Bundling failed 1141ms node_modules/expo-router/entry.js (10 modules)
ERROR SyntaxError: my-app/node_modules/expo-router/build/qualified-entry.js: Support for the experimental syntax 'jsx' isn't currently enabled (20:13):

18 | // Must be exported or Fast Refresh won't update the context
19 | function App() {

20 | return (<head_1.Head.Provider>
| ^
21 | <ExpoRoot_1.ExpoRoot context={_ctx_1.ctx}/>
22 | </head_1.Head.Provider>);
23 | }

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
npx cross-env BABEL_SHOW_CONFIG_FOR=/my-app/node_modules/expo-router/build/qualified-entry.js
See https://babeljs.io/docs/configuration#print-effective-configs for more info.

› Stopped server

iOS Bundling failed 3250ms node_modules/expo-router/entry.js (339 modules)
ERROR node_modules/expo-router/_ctx.ios.js: node_modules/expo-router/_ctx.ios.js:Invalid call at line 2: process.env.EXPO_ROUTER_APP_ROOT
First argument of require.context should be a string denoting the directory to require.
› Stopped server

iOS Bundling failed 3187ms node_modules/expo-router/entry.js (340 modules)
ERROR node_modules/expo-router/_ctx.ios.js: node_modules/expo-router/_ctx.ios.js:Invalid call at line 2: process.env.EXPO_ROUTER_APP_ROOT
First argument of require.context should be a string denoting the directory to require.
iOS Bundling failed 181ms node_modules/expo-router/entry.js (225 modules)
ERROR SyntaxError: my-app/node_modules/@expo/metro-runtime/src/location/install.native.ts: Missing semicolon. (16:37)

14 | import getDevServer from '../getDevServer';
15 |

16 | const manifest = Constants.expoConfig as Record<string, any> | null;
| ^
17 |
18 | function getOrigin() {
19 | if (process.env.NODE_ENV !== 'production') {

[obeliskgroup]

OK, So for about 2 days I'm trying to install this and make an example to work , I have no ideea how to install it :)), I get a lot of errors and I tried also with new architecture and everything I found on the internet. I can't make it to work .

[hannojg]

Can you please share your original metro config before you made any changes to it? As you are using expo it probably needs to be slightly different than the config you're seeing in the docs