https://github.com/mohit23x/react-native-sugar-style
React Native Stylesheet alternative with theme support
https://github.com/mohit23x/react-native-sugar-style
Last synced: 9 months ago
JSON representation
React Native Stylesheet alternative with theme support
- Host: GitHub
- URL: https://github.com/mohit23x/react-native-sugar-style
- Owner: mohit23x
- License: mit
- Created: 2021-01-24T15:28:08.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-01T23:57:08.000Z (almost 3 years ago)
- Last Synced: 2025-05-07T08:02:08.674Z (9 months ago)
- Language: TypeScript
- Homepage: https://sugar-style.netlify.app/
- Size: 744 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🚀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](https://github.com/mohit23x/react-native-sugar-style/blob/main/example/style/index.tsx).
```typescript
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
```javascript
import React from "react";
import { View, Text } from "react-native";
import { StyleSheet } from "./style";
const Component = () => {
return (
Hello World
);
};
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](https://github.com/mohit23x/react-native-sugar-style/tree/main/example) for a more detailed example.
https://expo.io/@mohit23x/projects/react-native-sugar-style or try the [react native web version](https://sugar-style.netlify.app/)
## More
[Guide](docs/Guide.md#Guide)
[Constants](docs/Guide.md#Constants)
[API](docs/Guide.md#API)
[Live Example](docs/Guide.md#Demo)
[Why this Package](docs/Guide.md#Why?)
[Acknowledgement](docs/Guide.md#Acknowledgement)
[Caveats](docs/Guide.md#Caveats)