⚓️ Added hooks

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["expo"]
+}

.gitignore

@@ -0,0 +1,6 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+dist/
+.vscode
+yarn-error.log

.npmignore

@@ -0,0 +1,6 @@
+.DS_Store
+npm-debug.log
+/example
+/node_modules
+/__tests__
+.vscode

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxBracketSameLine": true,
+  "trailingComma": "es5"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-present, 650 Industries, Inc. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,168 @@
+# react-native-web-hooks
+
+Hooks for implementing complex functionality in React Native for web and Expo.
+
+## Installation
+
+```bash
+yarn add react-native-web-hooks
+
+or
+
+npm install --save react-native-web-hooks
+```
+
+### Usage - Hooks
+
+Import the library into your JavaScript file:
+
+```js
+import {
+  useDimensions,
+  useActive,
+  useFocus,
+  useHover,
+  useREM,
+  useScaledSize,
+} from 'react-native-web-hooks';
+```
+
+**Get REM size**
+
+Use these in place of rem font sizes like: `font-size: 1.3rem`
+
+```jsx
+const fontSize = useREM(1.3);
+
+return <Text style={{ fontSize }} />;
+```
+
+**Get scaled font size**
+
+These change based on the width of the screen.
+
+```jsx
+const fontSize = useScaledSize(1.5);
+
+return <Text style={{ fontSize }} />;
+```
+
+**Get dimensions**
+
+Note that `fontScale` is hard-coded to `1` on the `react-native-web` side and shouldn't be used to calculate dynamic font sizes.
+
+```jsx
+const {
+  window: { width, height, fontScale, scale },
+  screen,
+} = useDimensions();
+```
+
+**Create pseudo class styles**
+
+These will be replaced by **React Flare** when it's released.
+
+```jsx
+import { useRef } from 'react';
+import { StyleSheet, Linking, Text, Platform } from 'react-native';
+
+import { useHover, useFocus, useActive } from './src';
+
+function Link({ children, href = '#' }) {
+  const ref = useRef(null);
+
+  const { isHovered } = useHover(ref);
+  const { isFocused } = useFocus(ref);
+  const { isActive } = useActive(ref);
+
+  return (
+    <Text
+      accessibilityRole="link"
+      href={href}
+      draggable={false}
+      onPress={() => Linking.openURL(href)}
+      tabIndex={0}
+      ref={ref}
+      style={[
+        styles.text,
+        isHovered && styles.hover,
+        isFocused && styles.focused,
+        isActive && styles.active,
+      ]}>
+      {children}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    ...Platform.select({
+      web: {
+        cursor: 'pointer',
+        outlineStyle: 'none',
+        borderBottomWidth: 1,
+        borderBottomColor: 'transparent',
+        transitionDuration: '200ms',
+      },
+      default: {},
+    }),
+  },
+  active: {
+    color: 'blue',
+    borderBottomColor: 'blue',
+    opacity: 1.0,
+  },
+  hover: {
+    opacity: 0.6,
+  },
+  focused: {
+    borderBottomColor: 'black',
+  },
+});
+```
+
+### Usage - Render Props
+
+Import the library into your JavaScript file:
+
+```js
+import { Hoverable, Resizable } from 'react-native-web-hooks';
+```
+
+You can wrap a function or a component.
+
+```tsx
+import React, { Component } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { Hoverable } from 'react-native-web-hooks';
+
+const createLogger = (...msg) => () => {
+  console.log(...msg);
+};
+
+class App extends Component {
+  render() {
+    return (
+      <View>
+        <Hoverable onHoverIn={createLogger('start hover')} onHoverOut={createLogger('end hover')}>
+          {isHovered => (
+            <TouchableOpacity accessible style={{ backgroundColor: isHovered ? '#333' : '#fff' }}>
+              <Text>Welcome to React</Text>}
+            </TouchableOpacity>
+          )}
+        </Hoverable>
+      </View>
+    );
+  }
+}
+```
+
+Observe window resize events.
+
+```tsx
+return (
+  <Resizable>
+    {layout => <View style={{ width: layout.width / 2, height: layout.width / 2 }} />}
+  </Resizable>
+);
+```

example/.gitignore

@@ -0,0 +1,11 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+src/*

example/.watchmanconfig

@@ -0,0 +1 @@
+{}

example/App.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { StyleSheet, Linking, Text, Platform, View } from 'react-native';
+
+import * as Pseudo from './src';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Link>Link #1</Link>
+      <Link>Link #2</Link>
+      <Link>Link #3</Link>
+      <Link>Link #4</Link>
+      <Link>Link #5</Link>
+    </View>
+  );
+}
+
+function Link({ children, href = '#' }) {
+  const ref = React.useRef(null);
+
+  const { isHovered } = Pseudo.useHover(ref);
+  const { isFocused } = Pseudo.useFocus(ref);
+  const { isActive } = Pseudo.useActive(ref);
+
+  return (
+    <View style={styles.container}>
+      <Text
+        accessibilityRole="link"
+        href={href}
+        draggable={false}
+        onPress={() => Linking.openURL(href)}
+        tabIndex={0}
+        ref={ref}
+        style={[
+          styles.text,
+          isHovered && styles.hover,
+          isFocused && styles.focused,
+          isActive && styles.active,
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    ...Platform.select({
+      web: {
+        cursor: 'pointer',
+        outlineStyle: 'none',
+        borderBottomWidth: 1,
+        borderBottomColor: 'transparent',
+        transitionDuration: '200ms',
+      },
+      default: {},
+    }),
+  },
+  active: {
+    color: 'blue',
+    borderBottomColor: 'blue',
+    opacity: 1.0,
+  },
+  hover: {
+    opacity: 0.6,
+  },
+  focused: {
+    borderBottomColor: 'black',
+  },
+});

example/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "privacy": "public",
+    "sdkVersion": "33.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

example/package.json

@@ -0,0 +1,21 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^33.0.0",
+    "react": "16.8.3",
+    "react-dom": "^16.8.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-web": "^0.11.4"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.1.1"
+  },
+  "private": true
+}