styledwind-native 0.0.10 → 0.0.12
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/README.md +2 -2
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
# styledwind-native
|
|
4
4
|
|
|
@@ -87,4 +87,4 @@ More detailed instructions, including how to add snippets, are available
|
|
|
87
87
|
|
|
88
88
|
## Why Use `styledwind-native`?
|
|
89
89
|
|
|
90
|
-
If you're building a React Native app and want to use Tailwind CSS for styling, `styledwind-native` simplifies the process by wrapping [`twrnc`](https://github.com/jaredh159/tailwind-react-native-classnames) with a [`styled-components`](https://github.com/styled-components/styled-components)-like API. This reduces the need for verbose inline styles, making your components cleaner, easier to read, and more maintainable.
|
|
90
|
+
If you're building a React Native app and want to use Tailwind CSS for styling, `styledwind-native` simplifies the process by wrapping [`twrnc`](https://github.com/jaredh159/tailwind-react-native-classnames) with a [`styled-components`](https://github.com/styled-components/styled-components)-like API. This reduces the need for verbose inline styles, making your components cleaner, easier to read, and more maintainable.
|
package/dist/index.js
CHANGED
|
@@ -34,7 +34,7 @@ const allowedComponents = [
|
|
|
34
34
|
];
|
|
35
35
|
function createTailwindComponent(Component, styles, ...interpolations) {
|
|
36
36
|
const classNames = styles.filter(style => !['', ','].includes(style.trim())).join();
|
|
37
|
-
return function TailwindComponent({ children, component, ...props }) {
|
|
37
|
+
return React.forwardRef(function TailwindComponent({ children, component, ...props }, ref) {
|
|
38
38
|
var _a;
|
|
39
39
|
useDeviceContext(twrnc);
|
|
40
40
|
let BaseComponent = Component;
|
|
@@ -45,7 +45,7 @@ function createTailwindComponent(Component, styles, ...interpolations) {
|
|
|
45
45
|
BaseComponent = CustomComponent;
|
|
46
46
|
}
|
|
47
47
|
const insets = useSafeAreaInsets();
|
|
48
|
-
let style = twrnc `${classNames}
|
|
48
|
+
let style = { ...twrnc `${classNames}` };
|
|
49
49
|
interpolations.forEach(interpolation => {
|
|
50
50
|
const interpolatedStyle = interpolation(props);
|
|
51
51
|
if (interpolatedStyle) {
|
|
@@ -84,10 +84,10 @@ function createTailwindComponent(Component, styles, ...interpolations) {
|
|
|
84
84
|
style.width = insets.left;
|
|
85
85
|
if (classNames.includes('safe:w-right'))
|
|
86
86
|
style.width = insets.right;
|
|
87
|
-
return (<BaseComponent {...props} style={[baseStyle, style, props.style]}>
|
|
87
|
+
return (<BaseComponent {...props} ref={ref} style={[baseStyle, style, props.style]}>
|
|
88
88
|
{children}
|
|
89
89
|
</BaseComponent>);
|
|
90
|
-
};
|
|
90
|
+
});
|
|
91
91
|
}
|
|
92
92
|
function generateTailwindStyledComponents() {
|
|
93
93
|
return allowedComponents.reduce((acc, componentName) => {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,cAAc,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAA+B,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,IAAI,cAAc,CAAC;AAEnB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAC1D,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC,CAAA,CAAC;AAElB,MAAM,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAErC,MAAM,iBAAiB,GAAG;IACxB,mBAAmB;IACnB,kBAAkB;IAClB,eAAe;IACf,oBAAoB;IACpB,qBAAqB;IACrB,cAAc;IACd,cAAc;IACd,QAAQ;IACR,UAAU;IACV,OAAO;IACP,OAAO;IACP,cAAc;IACd,YAAY;IACZ,aAAa;IACb,WAAW;IACX,QAAQ;IACR,MAAM;IACN,WAAW;IACX,oBAAoB;IACpB,yBAAyB;IACzB,kBAAkB;IAClB,MAAM;CACP,CAAC;AAuGF,SAAS,uBAAuB,CAC9B,SAAwB,EACxB,MAA4B,EAC5B,GAAG,cAA2D;IAE9D,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAEpF,OAAO,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|