Skip to content

Instantly share code, notes, and snippets.

View benvium's full-sized avatar

Ben Clayton benvium

  • Bristol, UK
View GitHub Profile
benvium / TextA11y.tsx
Created December 15, 2023 14:42
React Native <Text/> wrapper for accessibility font sizes with automatically-calculated maximum font size
// Maximum font size. Note For WCAG we should support at least 200% default font scale
* Use to calculate a maxFontSizeMultiplier for Text components to ensure
* the text size doesn't go beyond MAXIMUM_FONT_SIZE.
* Pass the style or a fixed number.
* If the original size is already bigger than 32, then the size will be unchanged.
export function getMaxFontSizeMultiplier(params: number | StyleProp<TextStyle>) {
benvium / useReducedMotion.tsx
Last active December 2, 2023 09:32
useReducedMotion hook - get if user has requested Prefers reduced motion (iOS) or Remove animations (Android). Live updates values
import {AccessibilityInfo} from 'react-native';
import {createContext, PropsWithChildren, useContext, useEffect, useState} from 'react';
type AccessibilitySettingsT = {
isReduceMotionEnabled: boolean;
const ReducedMotionContext = createContext<AccessibilitySettingsT>({isReduceMotionEnabled: false});
benvium / ios-xcassets-parser.ts
Created October 9, 2023 09:00
Xcode .xcassets color parser. Exports xcassets-format colors into a single hex format, with separate light and dark mode values.
import fs from 'fs';
import * as path from 'path';
import * as z from 'zod';
// Outputs all xcassets-format colors into hex format, with separate light and dark mode values.
// IMPORTANT: this only covers a couple of the color formats Xcode uses, and may not properly handle color spaces etc.
// Usage:
benvium / styled-components-typescript-samples.tsx
Created March 8, 2019 08:49
Using TypeScript with styled-components 4.1.1 for attrs and styled
import styled from 'styled-components'; // 4.1.1
import * as React from "react";
type SizeProp = { size: number };
const A = styled.div<SizeProp>`
height: ${props => props.size}px;
const Ac = () => <A size={99} />;
benvium / flowType.js
Last active February 22, 2018 15:10
Calvium Tech Session 22/2/2018 - FlowType
/* @flow */
import React, {PureComponent} from 'react';
import type {Node} from 'react'; // Here's how to import the FlowType for Node (rendered react classes or null)
// Simple Component with Flow
type PropsType = {
a: string,
b: number,
benvium /
Last active February 15, 2018 14:11
iTerm - Display the current folder name at the top of tabs, and update when changing directory.
# iTerm - Display the current folder name at the top of tabs, and update when changing directory.
# Based on, with suggestions from the commments there
addToPromptCommand() {
if [[ ":$PROMPT_COMMAND:" != *":$1:"* ]]; then
benvium / Main.js
Created February 12, 2018 08:43
react-navigation: selection of different routes based on whether the user is logged in or out, via redux
import {rootNavigatorSelector} from './navigation/router';
import Store from './redux/store';
// Connect `rootNavigatorSelector` to redux.
const ConnectedMain = connect(state => ({
Layout: rootNavigatorSelector(state),
// App root component
class Root extends PureComponent {
benvium / ConfigureStore.js
Created May 31, 2016 17:41
React Native ConfigureStore including AutoRehydrate
* Creates and configures the Redux Store
import {createStore, applyMiddleware, compose} from 'redux';
import thunkMiddleware from 'redux-thunk'; // useful for networking actions
import createLogger from 'redux-logger'; // log out each action
import {persistStore, autoRehydrate} from 'redux-persist';
import rootReducer from './reducers'; // this combines all reducers into one
import {AsyncStorage} from 'react-native';
import Console from '../Console';
benvium / Root.js
Created April 29, 2016 16:17
Use same root component for android and iOS
// Your main root component
import React, {Component} from 'react-native';
export class Root extends Component {
benvium / artifacts.gradle.txt
Created April 21, 2016 14:03
Gradle code to make APK files have a sensible format
// Makes the APKs we build be called AppName-release-buildVariant-1.2.3_4.apk
// To use, add this file to the root of your project (next to make sure the name is artifacts.gradle.
// Then edit to include: `applicationName=MyAppName`
// Then edit module build.gradle, add at the end `apply from: "../artifacts.gradle"`
// Adapted slightly from
android.applicationVariants.all { variant ->
def appName
//Check if an applicationName property is supplied; if not use the name of the parent project.