Adding styled components-like syntax

[silvestreh]

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.experimental.classRegex": [
  "tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
],

[silvestreh]

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
  })}
`;

[jaredh159]

that looks really cool! nice work 👍

[jaredh159]

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]

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]

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

[silvestreh]

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]

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;