TypeScript API

[brentvatne]

What if instead of:

import * as React from "react";
import { View } from "react-native";
import { style } from "tailwind-react-native";

export default function Card() {
  return (
    <View style={style("flex-1 p-24")}>
      <View style={style("w-24 h-24 bg-platform-red")} />
    </View>
  );
}

we used:

import * as React from "react";
import { View } from "react-native";
import { style } from "tailwind-react-native";

export default function Card() {
  return (
    <View style={style("flex-1", "p-24")}>
      <View style={style("w-24", "h-24", "bg-platform-red")} />
    </View>
  );
}

this would make it pretty straightforward to add autocompletion and validation of style names :)

[ajsmth]

funnily enough I recall seeing something similar proposed in the tailwind-rn repo. i know some people like the string syntax over array syntax, so I think this could be a great optional api for those who want typings

[ajsmth]

@brentvatne this is available in 0.2.12 with a caveat - I used regular arrays instead of arguments syntax:

<View style={style(["w-24", "h-24", "bg-platform-red"])} />

the typings were much simpler / i'm not familiar enough with TS to make it work with arguments like that

all three fns should accept an array of keys as an option

[brentvatne]

nice work!

[isaac-statgo]

Nice move. How about going a little further in a javascript way?

import {
   flex1,
   p24,
   w24,
   h24,
   bgPlatformRed,
   iosBgPlatformCrimson,
} from 'tailwind-react-native/elements'

export function Card() {
   return (
      <View style={style([flex1, p24])}>
         <View
            style={style([
               w24,
               h24,
               bgPlatformRed,
               iosBgPlatformCrimson,
            ])}
         />
      </View>
   )
}