Skip to content

Instantly share code, notes, and snippets.

View EvanBacon's full-sized avatar
🥓
Markdown developer

Evan Bacon EvanBacon

🥓
Markdown developer
4.1k followers · 89 following
View GitHub Profile
@EvanBacon
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

@EvanBacon
EvanBacon / withVideoImportSupport.js
Created October 13, 2022 19:26
An Expo Config Plugin that enables opening any video file type in your iOS app
// https://gist.github.com/EvanBacon/98858a341e2da209587455bbad465931
const includesEverything = {
CFBundleDocumentTypes: [
{
CFBundleTypeExtensions: ["*"],
CFBundleTypeName: "All files",
CFBundleTypeOSTypes: ["*"],
},
{
CFBundleTypeExtensions: ["mov"],
@EvanBacon
EvanBacon / 🧽.gif
Last active February 6, 2024 08:40
🥓
🧽.gif
@EvanBacon
EvanBacon / audioFormData.js
Created February 17, 2019 06:54
Upload audio data from React Native
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}`,
@EvanBacon
EvanBacon / RootViewBackgroundColor.tsx
Created December 10, 2021 21:44
A stack based Expo component for setting the background color of the root view. Useful for changing the background color on certain screens or inside of native modals. Updates based on Appearance and AppState.
import * as SystemUI from 'expo-system-ui';
import * as React from 'react';
import { Appearance, AppState, AppStateStatus, ColorSchemeName, ColorValue } from 'react-native';
type ThemedColorValue = { light: ColorValue, dark: ColorValue };
type Props = { backgroundColor: ColorValue | ThemedColorValue }
const propsStack: Props[] = [];
@EvanBacon
EvanBacon / apple-touch-startup-image.html
Created April 17, 2019 07:10
An example of full iOS PWA startup image (splash screen) support.
<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"
@EvanBacon
EvanBacon / dismiss-completed-gh-notifications.js
Last active July 15, 2023 05:08
Select and dismiss GH notifications for merged and closed issues/PRs. https://twitter.com/Baconbrix/status/1679925775162548224?s=20
[...document.querySelectorAll('.notifications-list-item:has(.octicon-git-merge)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-skip)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-issue-closed)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-discussion-closed)'), ...document.querySelectorAll('.notifications-list-item:has(.octicon-git-pull-request-closed)')].forEach(el => el.querySelector('input').click()); setTimeout(() => document.querySelector('button[type="submit"][role="menuitem"][title="Done"].btn').click(), 200)
@EvanBacon
EvanBacon / Info.plist.json
Last active May 15, 2023 08:53
[Expo Config Plugins] JSON version of CFBundleDocumentTypes, UTExportedTypeDeclarations, UTImportedTypeDeclarations from VLC app Info.plist -- good for importing different file formats into your app
{
"CFBundleDocumentTypes": [
{
"CFBundleTypeName": "Folder",
"CFBundleTypeRole": "Viewer",
"LSItemContentTypes": [
"public.folder"
]
},
{
@EvanBacon
EvanBacon / expo-vscode-settings.json
Created February 14, 2023 18:33
Expo file nesting patterns. Ensure all related extensions are nested inside of the default file.
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map",
"*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(capture).test.web.ts, $(capture).test.web.tsx, $(capture).test.android.ts, $(capture).test.android.tsx, ${capture}.native.tsx, ${capture}.ios.tsx, ${capture}.android.tsx, ${capture}.web.tsx, ${capture}.native.ts, ${capture}.ios.ts, ${capture}.android.ts, ${capture}.web.ts, ${capture}.native.js, ${capture}.ios.js, ${capture}.android.js, ${capture}.web.js, ${capture}.native.jsx, ${capture}.ios.jsx, ${capture}.android.jsx, ${capture}.web.jsx",
"*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(captur
@EvanBacon
EvanBacon / metro-transformer.js
Created December 22, 2021 20:31
Using Realm with Expo Metro config "Exotic" bundling.
const { createExoticTransformer } = require("@expo/metro-config/transformer");
module.exports = createExoticTransformer({
// Add realm packages to the list of modules to transpile locally.
transpileModules: ["@realm/", "realm"],
});