Nativewind

[scott-harrison]

Have you tried implementing Nativewind? I've been trying to get it to work for hours. Works on the app fine and on storybook. However, when I use it in the shared elements workspace and use it in the app it doesn't work. I must be doing something wrong.

I'm including the babel plugin in the shared-elements plugins: ["nativewind/babel"],

Also including "nativewind" in the base.config.ts as a external for rollup.

for example of the component in shared-elements

import { styled } from "nativewind";
import React from "react";
import { TouchableOpacity, Text } from "react-native";

const ButtonStyled = styled(TouchableOpacity);
const ButtonTextStyled = styled(Text);

export const Button = ({ children, onPress, style, textStyle }: any) => {
  return (
    <ButtonStyled
      className="bg-blue-500 font-bold py-3 px-4 rounded"
      onPress={onPress}
    >
      <ButtonTextStyled className="text-center text-white text-lg">
        {children}
      </ButtonTextStyled>
    </ButtonStyled>
  );
};```

[crutchcorn]

Truth be told, Nativewind (or any other styling system outside of Styled Components) is something I'm not easily able to add to this specific template. This template is ~a fork of internal monorepo scaffolding we use at my day job and we needed Styled Components (or some other runtime styling solution) for another project.

That said, using NativeBase might come with better SSR support/etc.

If you fork this project and create a generic configuration, I might spend some time trying to fix the issues you have - altho I can't promise a substantial amount of time worked on it.