Skip to content

Commit c6dc645

Browse files
mohit23xmohit23x
authored
Merge pull request #7 from mohit23x/responsive-values
responsive values changing based on width
2 parents 493648a + 01e95df commit c6dc645

24 files changed

Lines changed: 531 additions & 190 deletions

‎README.md‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,19 @@ npm i react-native-sugar-style
2020

2121
STEP 1: **style.tsx**
2222

23-
Define configurations for your theme see [this file](https://github.com/mohit23x/react-native-sugar-style/blob/main/example/style/index.tsx) for a more verbose example
23+
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).
2424

2525
```typescript
26-
import { Sugar, constants } from 'react-native-sugar-style';
26+
import Sugar from 'react-native-sugar-style';
2727

28-
const theme = {
29-
...constants,
28+
const dark = {
29+
background: '#2b2b2b',
30+
text: '#ffffff',
31+
};
32+
33+
const light = {
3034
background: '#fbfbfb',
31-
text: '#2b2b2b',
35+
text: '#000000',
3236
};
3337

3438
export type Theme = typeof theme;
@@ -39,9 +43,9 @@ export default StyleSheet;
3943

4044
<br />
4145

42-
STEP 2: **App.tsx** (optional)
46+
STEP 2: **App.tsx**
4347

44-
Wrap with ThemeProvider, if you are using a single theme then this step is not needed skip to STEP 3
48+
Wrap with ThemeProvider
4549

4650
```javascript
4751
import React from 'react';
@@ -59,7 +63,7 @@ const App = () => (
5963

6064
STEP 3: **component.tsx**
6165

62-
Use StyleSheet as you do normally in react native component
66+
Use StyleSheet as you do normally do in components
6367

6468
```javascript
6569
import React from 'react';
@@ -76,40 +80,41 @@ const Component = () => {
7680
);
7781
};
7882

79-
const styles = StyleSheet.create((theme) => ({
83+
const styles = StyleSheet.create((theme, constants) => ({
8084
container: {
81-
height: theme.constant.height,
82-
width: theme.constant.width,
85+
height: constants.height,
86+
width: constants.width,
8387
backgroundColor: theme.background,
88+
flexDirection: ['column', 'row'],
8489
},
8590
text: {
86-
fontSize: theme.font.size,
91+
fontSize: theme.size.m,
8792
color: theme.text,
8893
},
8994
}));
9095
```
9196

92-
> **NOTE**: if you have a single theme then `useTheme()` hook can be avoided, also if you add `useTheme()` in you navigation screen parent component, then you can avoid using it in child components\*
97+
> **NOTE**: if you add `useTheme()` in the navigation screen (parent component), then you can avoid using it in child components\*
9398
9499
<br />
95100

96-
STEP 4: **anotherComponent.tsx** (optional)
101+
STEP 4: **anotherComponent.tsx**
97102

98103
To change the theme you can call build method and it will swap the theme
99104

100105
```javascript
101106
import React from 'react';
102107
import { View, Button } from 'react-native';
103-
import { StyleSheet, lightTheme, darkTheme } from './style';
108+
import { StyleSheet, light, dark } from './style';
104109

105110
const Component = () => {
106-
const light = () => StyleSheet.build(lightTheme);
107-
const dark = () => StyleSheet.build(darkTheme);
111+
const onLight = () => StyleSheet.build(light);
112+
const onDark = () => StyleSheet.build(dark);
108113

109114
return (
110115
<View>
111-
<Button onPress={light} title="light" />
112-
<Button onPress={dark} title="dark" />
116+
<Button onPress={onLight} title="light theme" />
117+
<Button onPress={onDark} title="dark theme" />
113118
</View>
114119
);
115120
};

‎build/Constant.d.ts‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
1+
export declare const calculateNavBarHeight: ({ screenHeight, height, }: {
2+
screenHeight: number;
3+
height: number;
4+
}) => number;
5+
export declare const calculateVisibleHeight: ({ height, navBarHeight, }: {
6+
height: number;
7+
navBarHeight: number;
8+
}) => number;
19
export declare const constants: {
2-
readonly constant: {
3-
readonly height: number;
4-
readonly width: number;
5-
readonly screenHeight: number;
6-
readonly screenWidth: number;
7-
readonly navBarHeight: number;
8-
readonly isNavBarVisible: boolean;
9-
readonly visibleHeight: number;
10-
readonly isIPhoneX: () => boolean;
11-
readonly os: {
12-
readonly android: boolean;
13-
readonly ios: boolean;
14-
readonly web: boolean;
15-
readonly windows: boolean;
16-
};
17-
readonly statusBarHeight: number;
10+
readonly height: number;
11+
readonly width: number;
12+
readonly screenHeight: number;
13+
readonly screenWidth: number;
14+
readonly statusBarHeight: number;
15+
readonly navBarHeight: number;
16+
readonly isNavBarVisible: boolean;
17+
readonly visibleHeight: number;
18+
readonly isIPhoneX: () => boolean;
19+
readonly os: {
20+
readonly android: boolean;
21+
readonly ios: boolean;
22+
readonly web: boolean;
23+
readonly windows: boolean;
24+
};
25+
readonly breakPoints: {
26+
mobile: number;
27+
tablet: number;
28+
desktop: number;
1829
};
1930
};

‎build/Constant.js‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22
Object.defineProperty(exports, "__esModule", { value: true });
3-
exports.constants = void 0;
3+
exports.constants = exports.calculateVisibleHeight = exports.calculateNavBarHeight = void 0;
44
const react_native_1 = require("react-native");
55
const { height, width } = react_native_1.Dimensions.get('window');
66
/* =========== */
@@ -20,26 +20,37 @@ const statusBarHeight = react_native_1.Platform.select({
2020
});
2121
/* ====== x ====== */
2222
const { height: screenHeight, width: screenWidth } = react_native_1.Dimensions.get('screen');
23-
const navBarHeight = screenHeight - statusBarHeight - height;
23+
exports.calculateNavBarHeight = ({ screenHeight, height, }) => {
24+
return screenHeight - statusBarHeight - height;
25+
};
26+
const navBarHeight = exports.calculateNavBarHeight({
27+
screenHeight,
28+
height,
29+
});
2430
const isNavBarVisible = navBarHeight > 0;
25-
const visibleHeight = height - navBarHeight;
31+
exports.calculateVisibleHeight = ({ height, navBarHeight, }) => height - navBarHeight;
32+
const visibleHeight = exports.calculateVisibleHeight({ height, navBarHeight });
2633
const os = {
2734
android: react_native_1.Platform.OS === 'android',
2835
ios: react_native_1.Platform.OS === 'ios',
2936
web: react_native_1.Platform.OS === 'web',
3037
windows: react_native_1.Platform.OS === 'windows',
3138
};
39+
const breakPoints = {
40+
mobile: 480,
41+
tablet: 767,
42+
desktop: 1280,
43+
};
3244
exports.constants = {
33-
constant: {
34-
height,
35-
width,
36-
screenHeight,
37-
screenWidth,
38-
navBarHeight,
39-
isNavBarVisible,
40-
visibleHeight,
41-
isIPhoneX,
42-
os,
43-
statusBarHeight,
44-
},
45+
height,
46+
width,
47+
screenHeight,
48+
screenWidth,
49+
statusBarHeight,
50+
navBarHeight,
51+
isNavBarVisible,
52+
visibleHeight,
53+
isIPhoneX,
54+
os,
55+
breakPoints,
4556
};

‎build/Main.d.ts‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,56 @@
22
import Sugar from './Sugar';
33
export default function Main<T>(theme: T): {
44
StyleSheet: Sugar<T>;
5-
ThemeContext: import("react").Context<T>;
5+
ThemeContext: import("react").Context<{
6+
theme: T;
7+
constants: {
8+
readonly height: number;
9+
readonly width: number;
10+
readonly screenHeight: number;
11+
readonly screenWidth: number;
12+
readonly statusBarHeight: number;
13+
readonly navBarHeight: number;
14+
readonly isNavBarVisible: boolean;
15+
readonly visibleHeight: number;
16+
readonly isIPhoneX: () => boolean;
17+
readonly os: {
18+
readonly android: boolean;
19+
readonly ios: boolean;
20+
readonly web: boolean;
21+
readonly windows: boolean;
22+
};
23+
readonly breakPoints: {
24+
mobile: number;
25+
tablet: number;
26+
desktop: number;
27+
};
28+
};
29+
}>;
630
ThemeProvider: import("react").ComponentType<{
731
children: import("react").ReactNode;
832
sugar?: Sugar<T> | undefined;
933
}>;
10-
useTheme: () => T;
34+
useTheme: () => ({
35+
readonly height: number;
36+
readonly width: number;
37+
readonly screenHeight: number;
38+
readonly screenWidth: number;
39+
readonly statusBarHeight: number;
40+
readonly navBarHeight: number;
41+
readonly isNavBarVisible: boolean;
42+
readonly visibleHeight: number;
43+
readonly isIPhoneX: () => boolean;
44+
readonly os: {
45+
readonly android: boolean;
46+
readonly ios: boolean;
47+
readonly web: boolean;
48+
readonly windows: boolean;
49+
};
50+
readonly breakPoints: {
51+
mobile: number;
52+
tablet: number;
53+
desktop: number;
54+
};
55+
} | T)[];
1156
withTheme: <P extends import("./type").ThemeProp<T>>(WrappedComponent: import("react").ComponentType<P>) => () => JSX.Element;
1257
};

‎build/Provider.d.ts‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
11
import * as React from 'react';
22
import Sugar from './Sugar';
3-
import type { ThemeProp } from './type';
3+
import type { ThemeProp, ConstantsType } from './type';
44
export declare function themeCreator<T>(sugar: Sugar<T>, defaultTheme: T): {
5-
ThemeContext: React.Context<T>;
5+
ThemeContext: React.Context<{
6+
theme: T;
7+
constants: ConstantsType;
8+
}>;
69
ThemeProvider: React.ComponentType<{
710
children: React.ReactNode;
811
sugar?: Sugar<T> | undefined;
912
}>;
10-
useTheme: () => T;
13+
useTheme: () => ({
14+
readonly height: number;
15+
readonly width: number;
16+
readonly screenHeight: number;
17+
readonly screenWidth: number;
18+
readonly statusBarHeight: number;
19+
readonly navBarHeight: number;
20+
readonly isNavBarVisible: boolean;
21+
readonly visibleHeight: number;
22+
readonly isIPhoneX: () => boolean;
23+
readonly os: {
24+
readonly android: boolean;
25+
readonly ios: boolean;
26+
readonly web: boolean;
27+
readonly windows: boolean;
28+
};
29+
readonly breakPoints: {
30+
mobile: number;
31+
tablet: number;
32+
desktop: number;
33+
};
34+
} | T)[];
1135
withTheme: <P extends ThemeProp<T>>(WrappedComponent: React.ComponentType<P>) => () => JSX.Element;
1236
};

‎build/Provider.js‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,62 @@
22
Object.defineProperty(exports, "__esModule", { value: true });
33
exports.themeCreator = void 0;
44
const React = require("react");
5+
const react_native_1 = require("react-native");
6+
const Constant_1 = require("./Constant");
57
/* PROVIDER */
68
function createThemeProvider(sugar, ThemeContext, defaultTheme) {
79
const ThemeProvider = ({ children, }) => {
810
const [theme, setTheme] = React.useState(defaultTheme);
9-
React.useEffect(() => {
11+
const [constants, setConstants] = React.useState(Constant_1.constants);
12+
const subscribeToThemeChanges = () => {
1013
sugar.subscribe('build', () => {
1114
setTheme(sugar.theme);
15+
setConstants(sugar.constants);
16+
});
17+
};
18+
const onDimensionChange = ({ window: { height, width }, screen: { height: screenHeight, width: screenWidth }, }) => {
19+
const navBarHeight = Constant_1.calculateNavBarHeight({
20+
screenHeight,
21+
height,
1222
});
23+
const visibleHeight = Constant_1.calculateVisibleHeight({ height, navBarHeight });
24+
const newValues = {
25+
width,
26+
height,
27+
screenHeight,
28+
screenWidth,
29+
navBarHeight,
30+
visibleHeight,
31+
};
32+
sugar.configure(newValues);
33+
};
34+
const subscribeToDimensionsChange = () => {
35+
react_native_1.Dimensions.addEventListener('change', onDimensionChange);
36+
};
37+
React.useEffect(() => {
38+
subscribeToThemeChanges();
39+
subscribeToDimensionsChange();
40+
return () => {
41+
react_native_1.Dimensions.removeEventListener('change', onDimensionChange);
42+
};
1343
}, []);
14-
return (<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>);
44+
return (<ThemeContext.Provider value={{ theme, constants }}>{children}</ThemeContext.Provider>);
1545
};
1646
return ThemeProvider;
1747
}
1848
/* creator */
1949
function themeCreator(sugar, defaultTheme) {
20-
const ThemeContext = React.createContext(defaultTheme);
50+
const ThemeContext = React.createContext({ theme: defaultTheme, constants: Constant_1.constants });
2151
const ThemeProvider = createThemeProvider(sugar, ThemeContext, defaultTheme);
2252
function useTheme() {
23-
const theme = React.useContext(ThemeContext);
24-
return theme;
53+
const { theme, constants } = React.useContext(ThemeContext);
54+
return [theme, constants];
2555
}
2656
function withTheme(WrappedComponent) {
2757
return function WithTheme() {
2858
return (<ThemeContext.Consumer>
29-
{(theme) => {
30-
const props = { theme };
59+
{({ theme, constants }) => {
60+
const props = { theme, constants };
3161
return <WrappedComponent {...props}/>;
3262
}}
3363
</ThemeContext.Consumer>);

‎build/Sheet.d.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import type { Fn, NamedStyles } from './type';
2-
export default class Sheet<T, S extends NamedStyles<S> | NamedStyles<any>> {
3-
result: S;
1+
import type { ConstantsType, Fn, NamedStyles, StyleSheetType } from './type';
2+
export default class Sheet<T, S extends NamedStyles<S> | NamedStyles<any>, O extends StyleSheetType<O> | StyleSheetType<any>> {
3+
result: O;
44
source: Fn<T, S>;
5-
nativeSheet: S;
6-
globalVars: T | null;
5+
nativeSheet: O;
76
constructor(sourceFn: Fn<T, S>);
8-
calc(globalVars: T): S;
9-
getResult(): S;
7+
calc(globalVars: T, constants: ConstantsType, activeIndex: number): O;
8+
getResult(): O;
109
clearResult(): void;
11-
calcStyles(): void;
10+
calcStyles(globalVars: T, constants: ConstantsType, activeIndex: number): void;
1211
calcStyle(key: string, styleProps: any): void;
1312
calcNative(): void;
1413
}

0 commit comments

Comments
 (0)