react-native-prestyle v0.1.1-next.0

react-native-prestyle

Another react-native styling library but this time it transforms styles on build time using babel.

While the library is currently in development and not yet stable, it offers the potential for improved performance and reliability in styling. Please exercise caution when using this library and report any issues or unexpected behavior you may encounter.

Philosophy

Building styles on build time allows the styles to be precomputed and optimized, which can improve the performance of the application. When styles are built on run time, the application has to calculate the styles every time the component is rendered, which can cause lag and reduce performance.

Usage:

1. Install the library:

yarn add react-native-prestyle

2. Add the babel plugin into your babel config file:

{
  "plugins": ["react-native-prestyle/plugin"]
}

3. Create a theme file:

import { TextStyle, ViewStyle } from "react-native";
import { prestyle } from "react-native-prestyle";

const { ThemedView, ThemedText, ThemeProvider } = prestyle<
  ViewStyle,
  TextStyle
>()({
  light: {
    colors: {
      primary: "white",
      text: "black",
    },
  },
  dark: {
    colors: {
      primary: "black",
      text: "white",
    },
  },
  spacing: {
    m: {
      small: 8,
      medium: 16,
    },
    l: 32,
  },
  breakPoints: {
    small: 0,
    medium: 768,
  },
  viewVariants: {
    card: {
      backgroundColor: "primary",
      padding: "m",
      flex: 1,
    },
  },
  textVariants: {
    bold: {
      color: "primary",
      fontWeight: "bold",
    },
  },
});

export { ThemedView, ThemedText, ThemeProvider };

4. Usage:

<ThemedView
  variant="card"
  backgroundColor="primary"
  marginBottom="m"
  style={{ marginTop: 10 }}
>
  <ThemedText variant="bold" color="text" marginTop="l">
    Hello I am a text
  </ThemedText>
</ThemedView>

The components ThemedView and ThemedText must be named exactly as such, as they are statically searched for by name.

When parsing the props for the components, the order in which they are defined determines their priority, except for the style prop, which always takes precedence over everything else.

API:

Themes:

Prestyle:

Props:

Known Limitations

• The components ThemedView and ThemedText must be named exactly as such, as they are statically searched for by name.
• Limited props spreading.