Adding styled components-like syntax #225

silvestreh · 2023-03-31T20:22:18Z

silvestreh
Mar 31, 2023

I came up with a rather simple utility function for creating components much in the same way as styled-components. This is what it looks like:

import RN from 'react-native';
import twrnc from 'twrnc';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const allowedComponents = [
  'ActivityIndicator',
  'Button',
  'FlatList',
  'Image',
  'Modal',
  'SafeAreaView',
  'ScrollView',
  'SectionList',
  'StatusBar',
  'Switch',
  'Text',
  'TextInput',
  'TouchableHighlight',
  'TouchableNativeFeedback',
  'TouchableOpacity',
  'View',
];

const tw = allowedComponents.reduce((acc, componentName) => {
  const Component = RN[componentName];

  acc[componentName] = (styles) => {
    const classNames = styles.join();

    return function ({ children, ...props }) {
      const insets = useSafeAreaInsets();
      const style = twrnc`${classNames}`;

      if (classNames.includes('pt-safe')) style.paddingTop = insets.top;
      if (classNames.includes('pb-safe')) style.paddingBottom = insets.bottom;
      if (classNames.includes('pl-safe')) style.paddingLeft = insets.left;
      if (classNames.includes('pr-safe')) style.paddingRight = insets.right;

      return (
        <Component {...props} style={[style, props.style]}>
          {children}
        </Component>
      );
    }
  }

  return acc;
}, {});

export default tw;

And this is how you would use it:

import tw from '@/utils/tw-styled-component';

const Container = tw.View`
  bg-blue-500
  p-4
  pt-safe
  shrink-0
`;

const Title = tw.Text`
  text-2xl
  text-white
`;

const MyComponent = () => {
  return (
    <Container>
      <Title>Hello!</Title>
    </Container>
  );
};

export default MyComponent;

And one of the nicest things is that you get IntelliSense in VSCode after adding this to your config

"tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
},
"editor.quickSuggestions": {
    "strings": true // forces VS Code to trigger completions when editing "string" content
},
"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
    "tw\\(.*?\\).*?`([^`]*)" // tw(Component)<xxx>`...`
]

silvestreh · 2023-03-31T21:08:23Z

silvestreh
Mar 31, 2023
Author

I'll try to make it so we could also pass a function alongside of tailwind class names to, potentially, do something like:

const MyComponent = tw.View`
  bg-black

  ${props => ({
    'text-red-500': props.hasError
  })}
`;

0 replies

jaredh159 · 2023-04-04T13:08:00Z

jaredh159
Apr 4, 2023
Maintainer

that looks really cool! nice work 👍

8 replies

jaredh159 Apr 10, 2023
Maintainer

are you having the trouble with RN web? or RN native? web is not officially supported by this library, and i have no idea if it works or not.

silvestreh Apr 12, 2023
Author

It's regular React Native, no web. Yeah, I saw a couple threads about web not being supported and I'm not targeting that platform :)

jaredh159 Apr 24, 2023
Maintainer

sorry for the delay. did you get this figured out?

silvestreh Apr 24, 2023
Author

Unfortunately, nope. I did look into the useDeviceContext implementation and noticed you're using React Native's useColorScheme hook, so I went ahead and tried that hook to see what it's returning and it's always light.

I don't think this is an issue with twrnc. Either I have something wrong in a config somewhere that I'm unaware of, or it's a bug in React Native or the Expo SDK 🤷🏽

silvestreh Apr 24, 2023
Author

Yup, it was a bad config value. I had userInterfaceStyle set to light in my Expo config 🤦🏽‍♂️.

Here's an updated snippet in case someone wants to use it. I added some really basic typings to get autocomplete working for props and also threw in there Animated..

import React from 'react';
import RN from 'react-native';
import twrnc, { useDeviceContext } from 'twrnc';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const allowedComponents = [
  'ActivityIndicator',
  'AnimatedFlatList',
  'AnimatedImage',
  'AnimatedScrollView',
  'AnimatedSectionList',
  'AnimatedText',
  'AnimatedView',
  'Button',
  'FlatList',
  'Image',
  'Modal',
  'SafeAreaView',
  'ScrollView',
  'SectionList',
  'StatusBar',
  'Switch',
  'Text',
  'TextInput',
  'TouchableHighlight',
  'TouchableNativeFeedback',
  'TouchableOpacity',
  'View',
];

interface ImageProps extends RN.ImageProps {
  tintColor?: string;
}

type TailwindComponents = {
  ActivityIndicator?: (styles: TemplateStringsArray) => React.FC<RN.ActivityIndicatorProps>;
  AnimatedFlatList?: (styles: TemplateStringsArray) => React.FC<RN.Animated.AnimatedProps<RN.FlatListProps<any>>>;
  AnimatedImage?: (styles: TemplateStringsArray) => React.FC<RN.Animated.AnimatedProps<ImageProps>>;
  AnimatedScrollView?: (styles: TemplateStringsArray) => React.FC<RN.Animated.AnimatedProps<RN.ScrollViewProps>>;
  AnimatedSectionList?: (styles: TemplateStringsArray) => React.FC<RN.Animated.AnimatedProps<RN.SectionListProps<any>>>;
  AnimatedText?: (styles: TemplateStringsArray) => React.FC<RN.Animated.AnimatedProps<RN.TextProps>>;
  AnimatedView?: (styles: TemplateStringsArray) => React.FC<RN.Animated.AnimatedProps<RN.ViewProps>>;
  Button?: (styles: TemplateStringsArray) => React.FC<RN.ButtonProps>;
  FlatList?: (styles: TemplateStringsArray) => React.FC<RN.FlatListProps<any>>;
  Image?: (styles: TemplateStringsArray) => React.FC<ImageProps>;
  Modal?: (styles: TemplateStringsArray) => React.FC<RN.ModalProps>;
  SafeAreaView?: (styles: TemplateStringsArray) => React.FC<RN.ViewProps>;
  ScrollView?: (styles: TemplateStringsArray) => React.FC<RN.ScrollViewProps>;
  SectionList?: (styles: TemplateStringsArray) => React.FC<RN.SectionListProps<any>>;
  StatusBar?: (styles: TemplateStringsArray) => React.FC<RN.StatusBarProps>;
  Switch?: (styles: TemplateStringsArray) => React.FC<RN.SwitchProps>;
  Text?: (styles: TemplateStringsArray) => React.FC<RN.TextProps>;
  TextInput?: (styles: TemplateStringsArray) => React.FC<RN.TextInputProps>;
  TouchableHighlight?: (styles: TemplateStringsArray) => React.FC<RN.TouchableHighlightProps>;
  TouchableNativeFeedback?: (styles: TemplateStringsArray) => React.FC<RN.TouchableNativeFeedbackProps>;
  TouchableOpacity?: (styles: TemplateStringsArray) => React.FC<RN.TouchableOpacityProps>;
  View?: (styles: TemplateStringsArray) => React.FC<RN.ViewProps>;
};

function generateTailwindStyledComponents (): TailwindComponents {
  return allowedComponents.reduce((acc, componentName) => {
    const animatedComponentName = componentName.startsWith('Animated') ? componentName.split('Animated')[1] : null;
    const Component = animatedComponentName
      ? RN.Animated[animatedComponentName]
      : RN[componentName];

    acc[componentName] = (styles) => {
      const classNames = styles.join();

      return function ({ children, ...props }) {
        useDeviceContext(twrnc);

        const insets = useSafeAreaInsets();
        const style = twrnc`${classNames}`;

        if (classNames.includes('safe:pt')) style.paddingTop = insets.top;
        if (classNames.includes('safe:pb')) style.paddingBottom = insets.bottom;
        if (classNames.includes('safe:pl')) style.paddingLeft = insets.left;
        if (classNames.includes('safe:pr')) style.paddingRight = insets.right;

        if (classNames.includes('safe:mt')) style.marginTop = insets.top;
        if (classNames.includes('safe:mb')) style.marginBottom = insets.bottom;
        if (classNames.includes('safe:ml')) style.marginLeft = insets.left;
        if (classNames.includes('safe:mr')) style.marginRight = insets.right;

        if (classNames.includes('safe:top')) style.top = insets.top;
        if (classNames.includes('safe:bottom')) style.bottom = insets.bottom;
        if (classNames.includes('safe:left')) style.left = insets.left;
        if (classNames.includes('safe:right')) style.right = insets.right;

        if (classNames.includes('safe:h-top')) style.height = insets.top;
        if (classNames.includes('safe:h-bottom')) style.height = insets.bottom;
        if (classNames.includes('safe:w-left')) style.width = insets.left;
        if (classNames.includes('safe:w-right')) style.width = insets.right;

        return (
          <Component {...props} style={[style, props.style]}>
            {children}
          </Component>
        );
      }
    }

    return acc;
  }, {});
}

const tw = generateTailwindStyledComponents();

export default tw;

silvestreh · 2024-10-01T03:30:18Z

silvestreh
Oct 1, 2024
Author

Here's the latest iteration that (finally) adds interpolation:

import React from 'react';
import RN from 'react-native';
import { useDeviceContext, create, type TailwindFn, type Style } from 'twrnc';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const twrnc = create(require('@/tailwind.config'));

const allowedComponents = [
  'ActivityIndicator',
  'AnimatedFlatList',
  'AnimatedImage',
  'AnimatedScrollView',
  'AnimatedSectionList',
  'AnimatedText',
  'AnimatedView',
  'Button',
  'FlatList',
  'Image',
  'Modal',
  'SafeAreaView',
  'ScrollView',
  'SectionList',
  'StatusBar',
  'Switch',
  'Text',
  'TextInput',
  'TouchableHighlight',
  'TouchableNativeFeedback',
  'TouchableOpacity',
  'View',
];

interface ImageProps extends RN.ImageProps {
  tintColor?: string;
}

interface TailwindComponentProps {
  children?: React.ReactNode;
  component?: React.FC<any>;
  [key: string]: any;
}

type TailwindComponents = TailwindFn & {
  ActivityIndicator: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.ActivityIndicatorProps & T>;
  AnimatedFlatList: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.Animated.AnimatedProps<RN.FlatListProps<any>> & T>;
  AnimatedImage: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.Animated.AnimatedProps<ImageProps> & T>;
  AnimatedScrollView: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.Animated.AnimatedProps<RN.ScrollViewProps> & T>;
  AnimatedSectionList: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.Animated.AnimatedProps<RN.SectionListProps<any>> & T>;
  AnimatedText: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.Animated.AnimatedProps<RN.TextProps> & T>;
  AnimatedView: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.Animated.AnimatedProps<RN.ViewProps> & T>;
  Button: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.ButtonProps & T>;
  FlatList: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.FlatListProps<any> & T>;
  Image: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<ImageProps & T>;
  Modal: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.ModalProps & T>;
  SafeAreaView: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.ViewProps & T>;
  ScrollView: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.ScrollViewProps & T>;
  SectionList: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.SectionListProps<any> & T>;
  StatusBar: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.StatusBarProps & T>;
  Switch: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.SwitchProps & T>;
  Text: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.TextProps & T>;
  TextInput: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.TextInputProps & T>;
  TouchableHighlight: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.TouchableHighlightProps & T>;
  TouchableNativeFeedback: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.TouchableNativeFeedbackProps & T>;
  TouchableOpacity: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.TouchableOpacityProps & T>;
  View: <T = {}>(
    styles: TemplateStringsArray,
    ...interpolations: ((props: T) => false | Style | undefined)[]
  ) => React.FC<RN.ViewProps & T>;
};

function createTailwindComponent<T = {}>(
  Component: React.FC<any>,
  styles: TemplateStringsArray,
  ...interpolations: ((props: T) => false | Style | undefined)[]
) {
  const classNames = styles.filter(style => !['', ','].includes(style.trim())).join();

  return function TailwindComponent({ children, component, ...props }: TailwindComponentProps) {
    useDeviceContext(twrnc);

    let BaseComponent = Component;
    let baseStyle = null;

    if (typeof component === 'function') {
      const CustomComponent = component;
      baseStyle = (CustomComponent.defaultProps as React.ComponentProps<typeof BaseComponent>)
        ?.style;
      BaseComponent = CustomComponent;
    }

    const insets = useSafeAreaInsets();
    let style = twrnc`${classNames}`;

    // Apply interpolations
    interpolations.forEach(interpolation => {
      const interpolatedStyle = interpolation(props as T);
      if (interpolatedStyle) {
        style = { ...style, ...interpolatedStyle };
      }
    });

    if (classNames.includes('safe:pt')) style.paddingTop = insets.top;
    if (classNames.includes('safe:pb')) style.paddingBottom = insets.bottom;
    if (classNames.includes('safe:pl')) style.paddingLeft = insets.left;
    if (classNames.includes('safe:pr')) style.paddingRight = insets.right;

    if (classNames.includes('safe:mt')) style.marginTop = insets.top;
    if (classNames.includes('safe:mb')) style.marginBottom = insets.bottom;
    if (classNames.includes('safe:ml')) style.marginLeft = insets.left;
    if (classNames.includes('safe:mr')) style.marginRight = insets.right;

    if (classNames.includes('safe:top')) style.top = insets.top;
    if (classNames.includes('safe:bottom')) style.bottom = insets.bottom;
    if (classNames.includes('safe:left')) style.left = insets.left;
    if (classNames.includes('safe:right')) style.right = insets.right;

    if (classNames.includes('safe:h-top')) style.height = insets.top;
    if (classNames.includes('safe:h-bottom')) style.height = insets.bottom;
    if (classNames.includes('safe:w-left')) style.width = insets.left;
    if (classNames.includes('safe:w-right')) style.width = insets.right;

    return (
      <BaseComponent {...props} style={[baseStyle, style, props.style]}>
        {children}
      </BaseComponent>
    );
  };
}

function generateTailwindStyledComponents(): TailwindComponents {
  return allowedComponents.reduce<TailwindComponents>((acc, componentName) => {
    const animatedComponentName = componentName.startsWith('Animated')
      ? componentName.split('Animated')[1]
      : null;
    const Component = animatedComponentName
      ? (RN.Animated as any)[animatedComponentName as keyof typeof RN.Animated]
      : RN[componentName as keyof typeof RN];

    (acc as Record<string, any>)[componentName] = (
      styles: TemplateStringsArray,
      ...interpolations: ((props: any) => false | Style | undefined)[]
    ) => createTailwindComponent(Component, styles, ...interpolations);

    return acc;
  }, twrnc as TailwindComponents);
}

const tw = generateTailwindStyledComponents();

export const classNames = twrnc.style;

export default tw;

This allows you to pass down props for dynamic styling like so:

import tw from '@/utils/tw-styled-component';

type TextProps = {
  isBig?: boolean;
};

const Container = tw.View`
  safe:pt
  px-4
  flex-1
`;

const Text = tw.Text<TextProps>`
  text-slate-500
  font-mono

  ${props => props.isBig && tw`text-4xl`}
`;

export default function HomeScreen() {
  return (
    <Container>
      <Text isBig>Test</Text>
    </Container>
  );
}

You can still get autocomplete suggestions for these new props:

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding styled components-like syntax #225

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Adding styled components-like syntax #225

silvestreh Mar 31, 2023

Replies: 3 comments · 8 replies

silvestreh Mar 31, 2023 Author

jaredh159 Apr 4, 2023 Maintainer

jaredh159 Apr 10, 2023 Maintainer

silvestreh Apr 12, 2023 Author

jaredh159 Apr 24, 2023 Maintainer

silvestreh Apr 24, 2023 Author

silvestreh Apr 24, 2023 Author

silvestreh Oct 1, 2024 Author

silvestreh
Mar 31, 2023

Replies: 3 comments 8 replies

silvestreh
Mar 31, 2023
Author

jaredh159
Apr 4, 2023
Maintainer

jaredh159 Apr 10, 2023
Maintainer

silvestreh Apr 12, 2023
Author

jaredh159 Apr 24, 2023
Maintainer

silvestreh Apr 24, 2023
Author

silvestreh Apr 24, 2023
Author

silvestreh
Oct 1, 2024
Author