Evan Bacon EvanBacon

## A-look-at-Hooks.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              10 stars
            
          
                EvanBacon
                / A-look-at-Hooks.md
            
            
              Created
              June 18, 2019 22:46
            
              
                A look at some different approaches to using hooks for pseudo classes.
              
          
    Many ways to useHooks

When I try to learn something, I search around for the optimal approach. In the case of hooks I found two reasonable approaches and one approach that only makes sense in some use-cases. Below I've documented all of them.
Use Case (useCase 😘)

I want to change the style of a text element when the user is clicking down on it. Because this is React Native for web, there are no CSS pseudo classes, so I need to manage all of the state myself. Because classes like active, focus, hover, and visited could be commonly used the API must be very self-contained.
... and I want people to like me, so I'm using hooks (the old implementation used render props).
Spread props


## apple-touch-startup-image.html
<html>
  <head>
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Expo" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"

## audioFormData.js
async function uploadAudioAsync(uri) {
  console.log("Uploading " + uri);
  let apiUrl = 'http://YOUR_SERVER_HERE/upload';
  let uriParts = uri.split('.');
  let fileType = uriParts[uriParts.length - 1];

  let formData = new FormData();
  formData.append('file', {
    uri,
    name: `recording.${fileType}`,

## ReactNativeSimpleStyledMap.jsx
import React from 'react';
// import
import { MapView } from 'expo';

export default BaseMap = ({ children, ...props }) => (
    <MapView
        {...props}
    >
        <MapView.UrlTile
            /**

## output.sh
GoogleAuthDemo $ exp build:ios -c
We've built a brand new CLI for Expo!
Expo CLI is a drop in replacement for exp.
Install: npm install -g expo-cli
Use: expo --help
Read more: https://blog.expo.io/expo-cli-2-0-released-a7a9c250e99c
[13:05:12] Making sure project is set up correctly...
[13:05:13] Your project looks good!
[13:05:13] Checking if current build exists...

## Instagram_App.js
// Import React Navigation
import {
  createBottomTabNavigator,
  createStackNavigator,
} from 'react-navigation';

import tabBarIcon from './utils/tabBarIcon';
// Import the screens
import FeedScreen from './screens/FeedScreen';
import NewPostScreen from './screens/NewPostScreen';

## App.js
import Expo from 'expo';
import * as ExpoPixi from 'expo-pixi';
import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default class App extends Component {
  state = {
    strokeColor: Math.random() * 0xffffff,
    strokeWidth: Math.random() * 30 + 10,
  };

## scaleLongestSideToSize.js
const scaleLongestSideToSize = (mesh, size) => {
  const { x: width, y: height, z: depth } = new THREE.Box3().setFromObject(mesh).getSize();
  const longest = Math.max(width, Math.max(height, depth));
  const scale = size / longest;
  mesh.scale.set(scale, scale, scale);
}
export default scaleLongestSideToSize;

## alignMesh.js
const alignMesh = (mesh, axis = { x: 0.5, y: 0.5, z: 0.5 }) => {
  axis = axis || {};
  const box = new THREE.Box3().setFromObject(mesh);

  const size = box.getSize();
  const { max } = box;
  const min = { x: -box.min.x, y: -box.min.y, z: -box.min.z };

  Object.keys(axis).map(key => {
    const scale = axis[key];
	<html>
	<head>
	<meta name="mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="apple-mobile-web-app-title" content="Expo" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
	<link
	rel="apple-touch-icon"
	sizes="180x180"
	async function uploadAudioAsync(uri) {
	console.log("Uploading " + uri);
	let apiUrl = 'http://YOUR_SERVER_HERE/upload';
	let uriParts = uri.split('.');
	let fileType = uriParts[uriParts.length - 1];

	let formData = new FormData();
	formData.append('file', {
	uri,
	name: `recording.${fileType}`,
	import React from 'react';
	// import
	import { MapView } from 'expo';

	export default BaseMap = ({ children, ...props }) => (
	<MapView
	{...props}
	>
	<MapView.UrlTile
	/**
	GoogleAuthDemo $ exp build:ios -c
	We've built a brand new CLI for Expo!
	Expo CLI is a drop in replacement for exp.
	Install: npm install -g expo-cli
	Use: expo --help
	Read more: https://blog.expo.io/expo-cli-2-0-released-a7a9c250e99c
	[13:05:12] Making sure project is set up correctly...
	[13:05:13] Your project looks good!
	[13:05:13] Checking if current build exists...
	// Import React Navigation
	import {
	createBottomTabNavigator,
	createStackNavigator,
	} from 'react-navigation';

	import tabBarIcon from './utils/tabBarIcon';
	// Import the screens
	import FeedScreen from './screens/FeedScreen';
	import NewPostScreen from './screens/NewPostScreen';
	import Expo from 'expo';
	import * as ExpoPixi from 'expo-pixi';
	import React, { Component } from 'react';
	import { Image, StyleSheet, View } from 'react-native';

	export default class App extends Component {
	state = {
	strokeColor: Math.random() * 0xffffff,
	strokeWidth: Math.random() * 30 + 10,
	};
	const scaleLongestSideToSize = (mesh, size) => {
	const { x: width, y: height, z: depth } = new THREE.Box3().setFromObject(mesh).getSize();
	const longest = Math.max(width, Math.max(height, depth));
	const scale = size / longest;
	mesh.scale.set(scale, scale, scale);
	}
	export default scaleLongestSideToSize;
	const alignMesh = (mesh, axis = { x: 0.5, y: 0.5, z: 0.5 }) => {
	axis = axis \|\| {};
	const box = new THREE.Box3().setFromObject(mesh);

	const size = box.getSize();
	const { max } = box;
	const min = { x: -box.min.x, y: -box.min.y, z: -box.min.z };

	Object.keys(axis).map(key => {
	const scale = axis[key];