🚀React Native Sugar Style

https://www.npmjs.com/package/react-native-sugar-style (🧪 Experimental)

🎨 Theme based alternative for React Native StyleSheet

✨ Support responsive values as array

📐 Reduce computing device height & width in every component

📱 Works on android/ios/web (expo/react-native)

Install

yarn add react-native-sugar-style

npm i react-native-sugar-style

Usage

STEP 1: style.tsx

Define configurations for your theme, for more verbose example see this file.

import Sugar from "react-native-sugar-style";

const dark = {
  background: "#2b2b2b",
  text: "#ffffff",
};

const light = {
  background: "#fbfbfb",
  text: "#000000",
};

export const { StyleSheet } = Sugar(light);

export default StyleSheet;

STEP 2: component.tsx

Use StyleSheet as you do normally do in components

import React from "react";
import { View, Text } from "react-native";
import { StyleSheet } from "./style";

const Component = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create((theme, constants) => ({
  container: {
    height: constants.height,
    width: constants.width,
    backgroundColor: theme.background,
    flexDirection: ["column", "row"],
  },
  text: {
    color: theme.text,
  },
}));

Demo

Scan and run with expo go app, run the example project for a more detailed example. https://expo.io/@mohit23x/projects/react-native-sugar-style or try the react native web version

More

Guide

Constants

API

Live Example

Why this Package

Acknowledgement

Caveats