formidablelabs / react-native-zephyr Goto Github PK

Right now, the base font size is 14pt for RN. Consider adding a way to set the base font size and let the rest of the default handlers extend from that.

efstathiosntonas created this benchmark of various react native ui libs and Zephyr takes a solid 3rd place after RN Stylesheet and Restyle

Hi

As the editor of ThisWeekInReact.com newsletter (featuring your lib this week), the first question that came to me is: what about web support? Is this lib usable in a cross-platform way? I think it's worth mentioning that in the doc, particularly when there are alternatives that focus on cross-platform.

https://twitter.com/sebastienlorber/status/1541820495603064832

What?

Add caching to the static analysis/unit tests CI jobs.

Why?

Speed up CI runs by avoiding the need for fresh dependencies installs each run (when no changes to dependencies).

How?

Adjust .github/workflows/static-analysis.yml and .github/workflows/unit-test.yml to add yarn caching. See React Native Owl's config for some motivation.

Are there plans to support responsive classes? Tailwind has a screens property in its theme file where you define screen sizes such as sm: 640 and md: 768 which generates modified class names such as md:text-center where the text-center class is only applied if the screen meets the requirements for md (e.g., being 768px or wider).

https://tailwindcss.com/docs/screens

I could imagine this being implemented similar to how dark mode is: smClasses, mdClasses etc., or maybe with some special style handlers (however they would need access to windowDimensions state)

I would be willing to hack on this if you are open to the idea.

There are a reason to send an array as the custom style? Why not parse a string splitting by "space character"? Just a curious question...

Actual:

classes={["flex:1", "bg:purple-100", "justify:center", "items:center"]}

Propose:

classes="flex:1 bg:purple-100 justify:center items:center"

The makeStyledComponent function wraps a component and adds classes and darkClasses props, which accept an array. If users inline these values, these props will technically change each re-render (based on React's default comparison algo).

We might consider writing a custom comparison function and wrapping the returned component in React.memo so that we can smartly compare these additional props and potentially avoid unnecessary re-renders.

What?

Right now, the color extraction mechanism supports rgb colors and hex colors with 3 or 6 digits. We should support rgba color values and 8-digit hex values.

How?

In createStyleBuilder.tsx we have some code like the following:

if (typeof styles["--bg-opacity"] === "number" && styles?.backgroundColor) {
      const { r, g, b } = colorStringToRgb(styles.backgroundColor);
      styles.backgroundColor = `rgba(${r}, ${g}, ${b}, ${styles["--bg-opacity"]})`;
    }
    delete styles["--bg-opacity"];

We may need to tweak this code, along with the colorStringToRgb function. We might also need to consider how we'd apply something like bg-opacity:30 to a background color of rgba(30, 50, 70, 0.7) (I'm assuming we'd just multiply $0.3 \cdot 0.7$, but we should confirm).

I think it shouldn't be hard to add gap, rowGap, coulmnGap
It will greatly increase the speed when building blocks with same spacing between elements. I tried patching by myself, but it was a bit harder, than I thought, thanks :)

Right now I have to do:

<View style={{ columnGap: 16, ...styles(...) }}>

Add line-height handler similar to Tailwind's "leading" classes.

Add handler for text shadows.

The makeStyledComponent function wraps a component and adds classes and darkClasses props, and many of the docs examples use inline arrays for the class lists. Inevitably, people are going to point out the perf implications of this (even though it is likely very minor, or even negligible). However, we'd like to offer another API that avoids this issue, and looks similar to StyledComponents setup.

Proposed API

I'm proposing the createStyleBuilder return a styled function that accepts a component, and a list of classes. Something like the following:

export const { styled } = createStyleBuilder();

// Other component

const MyComponent = () => {
  return (
    <Container>
      <Text>Hey world, I'm in the center</Text>
    </Container>
  );
}

const Container = styled(View)("flex:1", "justify:center", "items:center");

// Or maybe something like
const Container2 = styled(View)({
  classes: ["flex:1", "justify:center", "items:center"],
  darkClasses: ["bg:gray-900"]
});

This approach takes the classname arrays out of the render-cycle, which avoids creating new arrays each render (and helps with React's comparison algo), but might make the styles less dynamic.

By default, in docusaurus, the GitHub icon does not show up on mobile. Would like to have that link available on all screen sizes.

Add handlers for letter spacing, similar to Tailwind's "tracking" utilities.

Show the extended color palette in the docs for easy reference.

What?

The createStyleBuilder.test.tsx file has a handful of ugly @ts-ignores (like here) that we should clean up. Getting the vitest mocks typed properly is hard, but worthwhile to investigate how to properly mock/type those, as it'll probably be a pattern that comes up again.