How can I install Gluestack (formerly NativeBase / NativeWind) ?

[linkpad]

Hello, thanks for making Renative, it looks very interesting !
I'm trying to use glusetack which is a React & React Native Components & Patterns crafted with Tailwind CSS (NativeWind).

I tried to use their CLI to automatically install gluestack on my rnv app, unfortunately it's not working properly and I'm not able to run rnv app anymore.

I also tried the manual installation of gluestack, but it still doesn't work, and my knowledge of renative is pretty limited to find how I could install gluestack and make it work.

Any help on how to install it would be appreciated, thanks in advance !

[pauliusguzas]

Hello @linkpad, this should help https://renative.org/docs/concepts/plugins

[linkpad]

Thanks for you answer @pauliusguzas, I tried using the plugins docs your provided and renative is able to download them correctly, this is what I added in my renative.json, at the moment I'm trying to install only nativewind :

    "plugins": {
        "react-native-reanimated": "source:rnv",
        "react-native-safe-area-context": "source:rnv",
        "nativewind": {
            "version": "4.1.23"
        },
        "tailwindcss": {
            "version": "3.4.15"
        }
    }

I followed their tutorial on how to install it (react native framework-less instruction), and did the following change in babel.config.js :

const { withRNVBabel } = require('@rnv/adapter');

const config = {
    presets: ['nativewind/babel'],
};

module.exports = withRNVBabel(config);

Unfortunately, only doing that change in the babel.config.js file give me that error when I run the renative application in web :

 ⨯ ./src/config.tsx:16:32
Syntax error: Unexpected token, expected ","

  14 | import ICON_LOGO from '../platformAssets/runtime/logo.png';
  15 |
> 16 | export function testProps(testId: string | undefined) {
     |                                 ^
  17 |     if (!testId) {
  18 |         return;
  19 |     }

The next instruction is modifying metro.config.js but I don't know how I can achieve it while keeping the withRNVMetro, this is the asked modification, how should I proceed while keeping withRNVMetro ? :

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

const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
});

module.exports = withNativeWind(config, { input: "./global.css" });

Thanks a lot for your help !