[WIP] v3

README.md

@@ -3,7 +3,6 @@
 [![CircleCI](https://circleci.com/gh/wcandillon/react-native-responsive-ui.svg?style=svg)](https://circleci.com/gh/wcandillon/react-native-responsive-ui)
 [![npm version](https://badge.fury.io/js/react-native-responsive-ui.svg)](https://badge.fury.io/js/react-native-responsive-ui)
 
-
 Building responsive UIs in React Native.
 
 ![example](https://raw.githubusercontent.com/wcandillon/react-native-responsive-ui/4637085802323386110a6352929147d11e1ca83c/example/components/images/example.gif)
@@ -58,102 +57,66 @@ export default class Login extends Component {
 | platform       | string | Platform of the device.  See [Platform](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-module). |
 | condition      | boolean | Abritrary boolean value that must be true for the media query to pass. |
 
-
-### useDimensions
+### useStyle
 
 ```jsx
 import React from "react";
-import {useDimensions} from "react-native-responsive-ui";
+import {useStyle} from "react-native-responsive-ui";
 
 export default ({ children }) =>  {
-  const {width, height} = useDimensions();
-  console.log(`New window dimensions: ${width}x${height}`);
-  return children;
-};
-```
-
-### useStylesheet
-
-```jsx
-import React from "react";
-import {useStylesheet} from "react-native-responsive-ui";
-
-export default class Buttons extends ResponsiveComponent {
-    render() {
-        const style = useStylesheet(staticStyle)
-        return <View style={style.btns}>
-            <Button label="Login" primary style={style.btn} />
-            <Button label="Sign Up" style={style.btn} />
-        </View>;
+  const styles = useStyle(cond => ({
+    container: {
+        flex: 1,
+        cond(
+            { orientation: "landscape" },
+            { flexDirection: "row" }
+        ),
+        cond(
+            { orientation: "portrait" },
+            { flexDirection: "column" }
+        ),
     }
-}
-
-const staticStyle = [
-  {
-      query: { orientation: "landscape" },
-      style: {
-          btns: {
-              flexDirection: "row"
-          },
-          btn: {
-              flex: 1
-          }
-      }
-  },
-  {
-      query: { orientation: "portrait" },
-      style: {
-          btns: {
-              alignSelf: "stretch"
-          },
-          btn: {
-              flex: 0
-          }
-      }
-  }
-];
-```
-
-### Media Query
+  }));
 
-`mediaQuery()` evaluates a media query and return true or false.
-See example below.
-
-```jsx
-import {mediaQuery, useDimensions} from "react-native-responsive-ui";
-
-const {width, height} = useDimensions();
-mediaQuery({ orientation: "portrait", minHeight: 450 }, width, height)
+  return <View style={styles.container} />;
+};
 ```
 
-### ResponsiveComponent
+or without hooks: 
 
-`ResponsiveComponents` extends `React.Component` and add the window dimensions to the state of the component.
 
 ```jsx
 import React from "react";
-import {ResponsiveComponent} from "react-native-responsive-ui";
+import {getStyle} from "react-native-responsive-ui";
 
-export default class Debug extends ResponsiveComponent {
-    render() {
-        const {width, height} = this.state.window;
-        console.log(`New window dimensions: ${width}x${height}`);
-        return null;
+export default ({ children }) =>  {
+  const styles = getStyle(dimensions.get("window"), cond => ({
+    container: {
+        flex: 1,
+        ...cond(
+            { orientation: "landscape" },
+            { flexDirection: "row" }
+        ),
+        ...cond(
+            { orientation: "portrait" },
+            { flexDirection: "column" }
+        ),
     }
-}
+  }));
+
+  return <View style={styles.container} />;
+};
 ```
 
-### getStyleSheet
+### useDimensions
 
 ```jsx
 import React from "react";
-import {ResponsiveComponent, getStyleSheet} from "react-native-responsive-ui";
+import {useDimensions} from "react-native-responsive-ui";
 
-export default class Debug extends ResponsiveComponent {
-    render() {
-        const {width, height} = this.state.window;
-        const style = getStyleSheet({width, height})
-        return <View style={style.container} />
-    }
-}
+export default ({ children }) =>  {
+  const {width, height} = useDimensions();
+  console.log(`New window dimensions: ${width}x${height}`);
+  return children;
+};
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-responsive-ui",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "Responsive UIs for React Native",
   "main": "dist/src/index.js",
   "repository": "https://github.com/wcandillon/react-native-responsive-ui",

src/DimensionsContext.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Dimensions } from "react-native";
+
+import useDimensions from "./useDimensions";
+
+export const DimensionsContext = React.createContext(Dimensions.get("window"));
+
+interface DimensionProviderProps {
+  children: React.ReactNode;
+}
+
+export const DimensionsConsumer = DimensionsContext.Consumer;
+
+export const DimensionsProvider = ({ children }: DimensionProviderProps) => {
+  const dimensions = useDimensions();
+  return (
+    <DimensionsContext.Provider value={dimensions}>
+      {children}
+    </DimensionsContext.Provider>
+  );
+};

src/MediaQuery.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PixelRatio, Platform } from "react-native";
+import { PixelRatio, Platform, ScaledSize } from "react-native";
 import useDimensions from "./useDimensions";
 
 type Orientation = "landscape" | "portrait";
@@ -26,6 +26,7 @@ export const isInInterval = (
   (min === undefined || value >= min) && (max === undefined || value <= max);
 
 export const mediaQuery = (
+  dimensions: ScaledSize,
   {
     minWidth,
     maxWidth,
@@ -38,10 +39,9 @@ export const mediaQuery = (
     minPixelRatio,
     maxPixelRatio,
     condition
-  }: IMediaQuery,
-  width: number,
-  height: number
+  }: IMediaQuery
 ): boolean => {
+  const { width, height } = dimensions;
   const currentOrientation: Orientation =
     width > height ? "landscape" : "portrait";
   return (
@@ -60,8 +60,8 @@ interface MediaQueryProps extends IMediaQuery {
 }
 
 export default ({ children, ...props }: MediaQueryProps) => {
-  const { width, height } = useDimensions();
-  const val = mediaQuery(props, width, height);
+  const dimensions = useDimensions();
+  const val = mediaQuery(dimensions, props);
   if (val) {
     return children;
   }

src/index.ts

@@ -1,4 +1,8 @@
-export { default as useDimensions } from "./useDimensions";
-export { useStylesheet, getStylesheet } from "./useStylesheet";
 export { default as MediaQuery, IMediaQuery, mediaQuery } from "./MediaQuery";
-export { default as ResponsiveComponent } from "./ResponsiveComponent";
+export {
+  DimensionsContext,
+  DimensionsProvider,
+  DimensionsConsumer
+} from "./DimensionsContext";
+export { default as useDimensions } from "./useDimensions";
+export { getStyle, useStyle } from "./useStyle";

src/useDimensions.ts → src/useDimensions.tsx

@@ -6,11 +6,8 @@ const dims = Dimensions.get("window");
 export default () => {
   const [dimensions, setDimensions] = useState(dims);
 
-  const onChange = ({
-    window: { width, height, scale, fontScale }
-  }: {
-    window: ScaledSize;
-  }) => setDimensions({ width, height, scale, fontScale });
+  const onChange = ({ window }: { window: ScaledSize }) =>
+    setDimensions(window);
 
   useEffect(() => {
     Dimensions.addEventListener("change", onChange);

src/useStyle.ts

@@ -0,0 +1,39 @@
+import { ScaledSize, ViewStyle, TextStyle, ImageStyle } from "react-native";
+import { mediaQuery, IMediaQuery } from "./MediaQuery";
+import useDimensions from "./useDimensions";
+
+type Style = ViewStyle | TextStyle | ImageStyle;
+
+let id = 0;
+const uniqueId = () => {
+  id += 1;
+  return id;
+};
+
+type ReponsiveStyles = Style & {
+  [condition: string]: Style;
+};
+
+const selectStyle = (styles: ReponsiveStyles): Style => ({
+  ...(Object.keys(styles)
+    .filter(style => style.endsWith("-true"))
+    .map(style => styles[style]) as Style)
+});
+
+export const useStyle = (
+  styles: (cond: (query: IMediaQuery) => string) => ReponsiveStyles
+): Style => {
+  const dimensions = useDimensions();
+  const cond = (query: IMediaQuery) =>
+    `${uniqueId()}-${mediaQuery(dimensions, query)}`;
+  return selectStyle(styles(cond));
+};
+
+export const getStyle = (
+  dimensions: ScaledSize,
+  styles: (cond: (query: IMediaQuery) => string) => ReponsiveStyles
+): Style => {
+  const cond = (query: IMediaQuery) =>
+    `${uniqueId()}-${mediaQuery(dimensions, query)}`;
+  return selectStyle(styles(cond));
+};