styledwind-native 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/index.tsx +0 -228
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "styledwind-native",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A lightweight utility for applying dynamic Tailwind CSS styles in React Native",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": ">=18.2.0",
|
|
28
28
|
"react-native": ">=0.74.5",
|
|
29
|
-
"react-native-safe-area-context": ">=4
|
|
29
|
+
"react-native-safe-area-context": ">=4",
|
|
30
30
|
"twrnc": ">=4.5.1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
package/src/index.tsx
DELETED
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import RN from 'react-native';
|
|
3
|
-
import { useDeviceContext, create, type TailwindFn, type Style } from 'twrnc';
|
|
4
|
-
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
|
-
import path from 'path';
|
|
6
|
-
import fs from 'fs';
|
|
7
|
-
|
|
8
|
-
let tailwindConfig;
|
|
9
|
-
const configPaths = [
|
|
10
|
-
path.resolve(process.cwd(), 'tailwind.config.js'),
|
|
11
|
-
path.resolve(process.cwd(), 'tailwind.config.ts'),
|
|
12
|
-
path.resolve(process.cwd(), 'tailwind.config.mjs'),
|
|
13
|
-
];
|
|
14
|
-
|
|
15
|
-
const configPath = configPaths.find(fs.existsSync);
|
|
16
|
-
|
|
17
|
-
if (configPath) {
|
|
18
|
-
tailwindConfig = require(configPath);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const twrnc = create(tailwindConfig);
|
|
22
|
-
|
|
23
|
-
const allowedComponents = [
|
|
24
|
-
'ActivityIndicator',
|
|
25
|
-
'AnimatedFlatList',
|
|
26
|
-
'AnimatedImage',
|
|
27
|
-
'AnimatedScrollView',
|
|
28
|
-
'AnimatedSectionList',
|
|
29
|
-
'AnimatedText',
|
|
30
|
-
'AnimatedView',
|
|
31
|
-
'Button',
|
|
32
|
-
'FlatList',
|
|
33
|
-
'Image',
|
|
34
|
-
'Modal',
|
|
35
|
-
'SafeAreaView',
|
|
36
|
-
'ScrollView',
|
|
37
|
-
'SectionList',
|
|
38
|
-
'StatusBar',
|
|
39
|
-
'Switch',
|
|
40
|
-
'Text',
|
|
41
|
-
'TextInput',
|
|
42
|
-
'TouchableHighlight',
|
|
43
|
-
'TouchableNativeFeedback',
|
|
44
|
-
'TouchableOpacity',
|
|
45
|
-
'View',
|
|
46
|
-
];
|
|
47
|
-
|
|
48
|
-
interface ImageProps extends RN.ImageProps {
|
|
49
|
-
tintColor?: string;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
interface TailwindComponentProps {
|
|
53
|
-
children?: React.ReactNode;
|
|
54
|
-
component?: React.FC<any>;
|
|
55
|
-
[key: string]: any;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
type TailwindComponents = TailwindFn & {
|
|
59
|
-
ActivityIndicator: <T = {}>(
|
|
60
|
-
styles: TemplateStringsArray,
|
|
61
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
62
|
-
) => React.FC<RN.ActivityIndicatorProps & T>;
|
|
63
|
-
AnimatedFlatList: <T = {}>(
|
|
64
|
-
styles: TemplateStringsArray,
|
|
65
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
66
|
-
) => React.FC<RN.Animated.AnimatedProps<RN.FlatListProps<any>> & T>;
|
|
67
|
-
AnimatedImage: <T = {}>(
|
|
68
|
-
styles: TemplateStringsArray,
|
|
69
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
70
|
-
) => React.FC<RN.Animated.AnimatedProps<ImageProps> & T>;
|
|
71
|
-
AnimatedScrollView: <T = {}>(
|
|
72
|
-
styles: TemplateStringsArray,
|
|
73
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
74
|
-
) => React.FC<RN.Animated.AnimatedProps<RN.ScrollViewProps> & T>;
|
|
75
|
-
AnimatedSectionList: <T = {}>(
|
|
76
|
-
styles: TemplateStringsArray,
|
|
77
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
78
|
-
) => React.FC<RN.Animated.AnimatedProps<RN.SectionListProps<any>> & T>;
|
|
79
|
-
AnimatedText: <T = {}>(
|
|
80
|
-
styles: TemplateStringsArray,
|
|
81
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
82
|
-
) => React.FC<RN.Animated.AnimatedProps<RN.TextProps> & T>;
|
|
83
|
-
AnimatedView: <T = {}>(
|
|
84
|
-
styles: TemplateStringsArray,
|
|
85
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
86
|
-
) => React.FC<RN.Animated.AnimatedProps<RN.ViewProps> & T>;
|
|
87
|
-
Button: <T = {}>(
|
|
88
|
-
styles: TemplateStringsArray,
|
|
89
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
90
|
-
) => React.FC<RN.ButtonProps & T>;
|
|
91
|
-
FlatList: <T = {}>(
|
|
92
|
-
styles: TemplateStringsArray,
|
|
93
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
94
|
-
) => React.FC<RN.FlatListProps<any> & T>;
|
|
95
|
-
Image: <T = {}>(
|
|
96
|
-
styles: TemplateStringsArray,
|
|
97
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
98
|
-
) => React.FC<ImageProps & T>;
|
|
99
|
-
Modal: <T = {}>(
|
|
100
|
-
styles: TemplateStringsArray,
|
|
101
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
102
|
-
) => React.FC<RN.ModalProps & T>;
|
|
103
|
-
SafeAreaView: <T = {}>(
|
|
104
|
-
styles: TemplateStringsArray,
|
|
105
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
106
|
-
) => React.FC<RN.ViewProps & T>;
|
|
107
|
-
ScrollView: <T = {}>(
|
|
108
|
-
styles: TemplateStringsArray,
|
|
109
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
110
|
-
) => React.FC<RN.ScrollViewProps & T>;
|
|
111
|
-
SectionList: <T = {}>(
|
|
112
|
-
styles: TemplateStringsArray,
|
|
113
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
114
|
-
) => React.FC<RN.SectionListProps<any> & T>;
|
|
115
|
-
StatusBar: <T = {}>(
|
|
116
|
-
styles: TemplateStringsArray,
|
|
117
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
118
|
-
) => React.FC<RN.StatusBarProps & T>;
|
|
119
|
-
Switch: <T = {}>(
|
|
120
|
-
styles: TemplateStringsArray,
|
|
121
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
122
|
-
) => React.FC<RN.SwitchProps & T>;
|
|
123
|
-
Text: <T = {}>(
|
|
124
|
-
styles: TemplateStringsArray,
|
|
125
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
126
|
-
) => React.FC<RN.TextProps & T>;
|
|
127
|
-
TextInput: <T = {}>(
|
|
128
|
-
styles: TemplateStringsArray,
|
|
129
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
130
|
-
) => React.FC<RN.TextInputProps & T>;
|
|
131
|
-
TouchableHighlight: <T = {}>(
|
|
132
|
-
styles: TemplateStringsArray,
|
|
133
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
134
|
-
) => React.FC<RN.TouchableHighlightProps & T>;
|
|
135
|
-
TouchableNativeFeedback: <T = {}>(
|
|
136
|
-
styles: TemplateStringsArray,
|
|
137
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
138
|
-
) => React.FC<RN.TouchableNativeFeedbackProps & T>;
|
|
139
|
-
TouchableOpacity: <T = {}>(
|
|
140
|
-
styles: TemplateStringsArray,
|
|
141
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
142
|
-
) => React.FC<RN.TouchableOpacityProps & T>;
|
|
143
|
-
View: <T = {}>(
|
|
144
|
-
styles: TemplateStringsArray,
|
|
145
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
146
|
-
) => React.FC<RN.ViewProps & T>;
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
function createTailwindComponent<T = {}>(
|
|
150
|
-
Component: React.FC<any>,
|
|
151
|
-
styles: TemplateStringsArray,
|
|
152
|
-
...interpolations: ((props: T) => false | Style | undefined)[]
|
|
153
|
-
) {
|
|
154
|
-
const classNames = styles.filter(style => !['', ','].includes(style.trim())).join();
|
|
155
|
-
|
|
156
|
-
return function TailwindComponent({ children, component, ...props }: TailwindComponentProps) {
|
|
157
|
-
useDeviceContext(twrnc);
|
|
158
|
-
|
|
159
|
-
let BaseComponent = Component;
|
|
160
|
-
let baseStyle = null;
|
|
161
|
-
|
|
162
|
-
if (typeof component === 'function') {
|
|
163
|
-
const CustomComponent = component;
|
|
164
|
-
baseStyle = (CustomComponent.defaultProps as React.ComponentProps<typeof BaseComponent>)
|
|
165
|
-
?.style;
|
|
166
|
-
BaseComponent = CustomComponent;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
const insets = useSafeAreaInsets();
|
|
170
|
-
let style = twrnc`${classNames}`;
|
|
171
|
-
|
|
172
|
-
interpolations.forEach(interpolation => {
|
|
173
|
-
const interpolatedStyle = interpolation(props as T);
|
|
174
|
-
if (interpolatedStyle) {
|
|
175
|
-
style = { ...style, ...interpolatedStyle };
|
|
176
|
-
}
|
|
177
|
-
});
|
|
178
|
-
|
|
179
|
-
if (classNames.includes('safe:pt')) style.paddingTop = insets.top;
|
|
180
|
-
if (classNames.includes('safe:pb')) style.paddingBottom = insets.bottom;
|
|
181
|
-
if (classNames.includes('safe:pl')) style.paddingLeft = insets.left;
|
|
182
|
-
if (classNames.includes('safe:pr')) style.paddingRight = insets.right;
|
|
183
|
-
|
|
184
|
-
if (classNames.includes('safe:mt')) style.marginTop = insets.top;
|
|
185
|
-
if (classNames.includes('safe:mb')) style.marginBottom = insets.bottom;
|
|
186
|
-
if (classNames.includes('safe:ml')) style.marginLeft = insets.left;
|
|
187
|
-
if (classNames.includes('safe:mr')) style.marginRight = insets.right;
|
|
188
|
-
|
|
189
|
-
if (classNames.includes('safe:top')) style.top = insets.top;
|
|
190
|
-
if (classNames.includes('safe:bottom')) style.bottom = insets.bottom;
|
|
191
|
-
if (classNames.includes('safe:left')) style.left = insets.left;
|
|
192
|
-
if (classNames.includes('safe:right')) style.right = insets.right;
|
|
193
|
-
|
|
194
|
-
if (classNames.includes('safe:h-top')) style.height = insets.top;
|
|
195
|
-
if (classNames.includes('safe:h-bottom')) style.height = insets.bottom;
|
|
196
|
-
if (classNames.includes('safe:w-left')) style.width = insets.left;
|
|
197
|
-
if (classNames.includes('safe:w-right')) style.width = insets.right;
|
|
198
|
-
|
|
199
|
-
return (
|
|
200
|
-
<BaseComponent {...props} style={[baseStyle, style, props.style]}>
|
|
201
|
-
{children}
|
|
202
|
-
</BaseComponent>
|
|
203
|
-
);
|
|
204
|
-
};
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
function generateTailwindStyledComponents(): TailwindComponents {
|
|
208
|
-
return allowedComponents.reduce<TailwindComponents>((acc, componentName) => {
|
|
209
|
-
const animatedComponentName = componentName.startsWith('Animated')
|
|
210
|
-
? componentName.split('Animated')[1]
|
|
211
|
-
: null;
|
|
212
|
-
const Component = animatedComponentName
|
|
213
|
-
? (RN.Animated as any)[animatedComponentName as keyof typeof RN.Animated]
|
|
214
|
-
: RN[componentName as keyof typeof RN];
|
|
215
|
-
|
|
216
|
-
(acc as Record<string, any>)[componentName] = (
|
|
217
|
-
styles: TemplateStringsArray,
|
|
218
|
-
...interpolations: ((props: any) => false | Style | undefined)[]
|
|
219
|
-
) => createTailwindComponent(Component, styles, ...interpolations);
|
|
220
|
-
|
|
221
|
-
return acc;
|
|
222
|
-
}, twrnc as TailwindComponents);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
const tw = generateTailwindStyledComponents();
|
|
226
|
-
|
|
227
|
-
export * from 'twrnc';
|
|
228
|
-
export default tw;
|