🚀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.

importSugarfrom"react-native-sugar-style";constdark={background: "#2b2b2b",text: "#ffffff",};constlight={background: "#fbfbfb",text: "#000000",};exportconst{ StyleSheet }=Sugar(light);exportdefaultStyleSheet;

STEP 2: component.tsx

Use StyleSheet as you do normally do in components

importReactfrom"react";import{View,Text}from"react-native";import{StyleSheet}from"./style";constComponent=()=>{return(<Viewstyle={styles.container}><Textstyle={styles.text}>Hello World</Text></View>);};conststyles=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