rn-css 1.4.4 → 1.5.0

package/README.md

@@ -2,6 +2,8 @@
 
 This is basically [styled-components](https://github.com/styled-components/styled-components) with a much better support for React-Native, and some awesome additional features. You can check the docs of [styled-components](https://github.com/styled-components/styled-components) for more details about the basic API. I'll focus here on the differences.
 
+**Current version: 1.5** [See the Changelog](./CHANGELOG.md)
+
 ---
 
 ## Purpose
@@ -331,6 +333,14 @@ const View = styled.View`
 
 ---
 
+## Theming:
+
+To match the API of styled-components, we offer the same abilities for theming [See the documentation](https://styled-components.com/docs/advanced).
+
+This relies on the [SharedValue](#shared-value) context. This means that you cannot use the Shared Value system **and** this theming système. Pick the one that best suits your needs.
+
+---
+
 ## Coming later:
 
 linear-gradient, background-repeat, transitions, animations

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as RN from 'react-native';
 export { cssToRNStyle } from './cssToRN';
 export { FontSizeContext } from './features';
 export { SharedValue } from './styleComponent';
+export * from './useTheme';
 declare const styled: {
     <T>(Component: React.ComponentType<T>): {
         <S>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S & T & {

package/dist/index.js

@@ -18,6 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedValue = exports.FontSizeContext = exports.cssToRNStyle = void 0;
 const RN = __importStar(require("react-native"));
@@ -28,6 +31,7 @@ var features_1 = require("./features");
 Object.defineProperty(exports, "FontSizeContext", { enumerable: true, get: function () { return features_1.FontSizeContext; } });
 var styleComponent_2 = require("./styleComponent");
 Object.defineProperty(exports, "SharedValue", { enumerable: true, get: function () { return styleComponent_2.SharedValue; } });
+__exportStar(require("./useTheme"), exports);
 const styled = (Component) => styleComponent_1.default(Component);
 styled.ActivityIndicator = styled(RN.ActivityIndicator);
 styled.Button = styled(RN.Button);

package/dist/useTheme.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ThemeProvider: ({ theme, children }: {
+    theme: unknown;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useTheme: () => unknown;
+export declare const withTheme: <T>(Component: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<React.Component<{}, {}, any>>>;

package/dist/useTheme.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTheme = exports.useTheme = exports.ThemeProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const styleComponent_1 = require("./styleComponent");
+const ThemeProvider = ({ theme, children }) => {
+    return react_1.default.createElement(styleComponent_1.SharedValue.Provider, { value: theme }, children);
+};
+exports.ThemeProvider = ThemeProvider;
+const useTheme = () => react_1.default.useContext(styleComponent_1.SharedValue);
+exports.useTheme = useTheme;
+const withTheme = (Component) => {
+    const theme = exports.useTheme();
+    const ThemedComponent = react_1.default.forwardRef((props, ref) => react_1.default.createElement(Component, { ref: ref, theme: theme, ...props }));
+    ThemedComponent.displayName = 'ThemedComponent';
+    return ThemedComponent;
+};
+exports.withTheme = withTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/index.tsx

@@ -4,6 +4,7 @@ import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedLi
 export { cssToRNStyle } from './cssToRN'
 export { FontSizeContext } from './features'
 export { SharedValue } from './styleComponent'
+export * from './useTheme'
 
 const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T>(Component)
 

package/src/useTheme.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { SharedValue } from './styleComponent'
+
+export const ThemeProvider = ({ theme, children }: { theme: unknown; children: React.ReactNode }) => {
+  return <SharedValue.Provider value={theme}>
+    {children}
+  </SharedValue.Provider>
+}
+
+export const useTheme = () => React.useContext(SharedValue)
+
+export const withTheme = <T, >(Component: React.ComponentType<T>) => {
+  const theme = useTheme()
+  const ThemedComponent = React.forwardRef<React.Component, T>((props: T, ref) => <Component ref={ref} theme={theme} {...props} />)
+  ThemedComponent.displayName = 'ThemedComponent'
+  return ThemedComponent
+}