Skip to content

Instantly share code, notes, and snippets.

View benvium's full-sized avatar

Ben Clayton benvium

  • www.calvium.com
  • Bristol, UK
View GitHub Profile
@benvium
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
const MAXIMUM_FONT_SIZE = 32;
/**
* 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
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
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
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
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
benvium / iterm-display-folder-name-in-tab-bash-profile.sh
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 https://gist.github.com/phette23/5270658, with suggestions from the commments there
#####
addToPromptCommand() {
if [[ ":$PROMPT_COMMAND:" != *":$1:"* ]]; then
PROMPT_COMMAND="${PROMPT_COMMAND:+"$PROMPT_COMMAND:"}$1"
fi
@benvium
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),
}))(Main);
// App root component
class Root extends PureComponent {
@benvium
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
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
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 gradle.properties) make sure the name is artifacts.gradle.
// Then edit gradle.properties to include: `applicationName=MyAppName`
// Then edit module build.gradle, add at the end `apply from: "../artifacts.gradle"`
//
// Adapted slightly from https://www.jayway.com/2015/03/13/producing-better-named-android-apks-with-gradle/
android.applicationVariants.all { variant ->
def appName
//Check if an applicationName property is supplied; if not use the name of the parent project.