feat: add Responsive component

Author: minheq

src/components/Helpers/Hoverable.tsx

@@ -10,8 +10,8 @@ export interface HoverableChildrenProps {
 
 export interface HoverableProps {
   children: React.ReactNode | RenderPropType;
-  onHoverIn: () => void;
-  onHoverOut: () => void;
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
 }
 
 export default class Hoverable extends React.Component<HoverableProps> {

src/components/Helpers/RefMeasure.tsx

@@ -70,10 +70,11 @@ class RefMeasure extends React.Component<RefMeasureProps, Measurements> {
           pageY,
         };
 
+        this.setState(() => nodeMeasurements);
+
         if (onMeasure) {
           onMeasure(nodeMeasurements);
         }
-        this.setState(() => nodeMeasurements);
       },
     );
   };

src/components/Helpers/Responsive.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Dimensions } from 'react-native';
+
+export type RenderPropType = (
+  props: ResponsiveChildrenProps,
+) => React.ReactNode;
+
+export interface ResponsiveChildrenProps {
+  matches: boolean;
+}
+
+export interface ResponsiveProps {
+  children: React.ReactNode | RenderPropType;
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+export const isWindowAboveMinWidth = (minWidth: number) => {
+  const scaledSize = Dimensions.get('window');
+
+  return scaledSize.width > minWidth;
+};
+
+export const isWindowBelowMaxWidth = (maxWidth: number) => {
+  const scaledSize = Dimensions.get('window');
+
+  return scaledSize.width < maxWidth;
+};
+
+export const Responsive = (props: ResponsiveProps) => {
+  const { children, minWidth, maxWidth } = props;
+
+  let isAboveMinWidth = true;
+  let isBelowMaxWidth = true;
+
+  if (minWidth) {
+    isAboveMinWidth = isWindowAboveMinWidth(minWidth);
+  }
+
+  if (maxWidth) {
+    isBelowMaxWidth = isWindowBelowMaxWidth(maxWidth);
+  }
+
+  const isRenderProp = typeof children === 'function';
+  const matches = isAboveMinWidth && isBelowMaxWidth;
+
+  // @ts-ignore
+  return isRenderProp ? children({ matches }) : matches ? children : null;
+};

src/components/Helpers/index.ts

@@ -1,4 +1,5 @@
 export { default as ViewMeasure, ViewMeasureProps } from './ViewMeasure';
+export * from './Responsive';
 export {
   default as Hoverable,
   HoverableProps,