Skip to content

Instantly share code, notes, and snippets.

View Landerson352's full-sized avatar

Lincoln Anderson Landerson352

View GitHub Profile
@Landerson352
Landerson352 / disableFontScaling.js
Created September 15, 2019 16:57
A React Native utility for disabling font scaling.
import { Text } from 'react-native';
const disableFontScaling = () => {
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;
};
export default disableFontScaling;
@Landerson352
Landerson352 / fade.js
Created September 15, 2019 16:56
A utility for fading a hex color (inspired by Less.css).
import Color from 'color';
export default (color, alpha) => Color(color).alpha(alpha).string();
@Landerson352
Landerson352 / formatUSD.js
Created September 15, 2019 16:55
A utility for formatting a USD amount (using numeral plus customizations).
import numeral from 'numeral';
/**
* This function formats a Number into a USD currency
*
* @param {number} amount - A number (or string that can be cast as a number)
* @param {boolean} includeCents - Set to true to include cents in the result
* @return {string} A string formatted in USD currency
*
* @example
@Landerson352
Landerson352 / mixHexColors.js
Created September 15, 2019 16:54
A utility for mixing two hex colors.
const mixHexColors = (color1, color2, weight = 50) => {
function d2h(d) { return d.toString(16); } // convert a decimal value to hex
function h2d(h) { return parseInt(h, 16); } // convert a hex value to decimal
let color = '#';
for (let i = 0; i <= 5; i += 2) { // loop through each of the 3 hex pairs—red, green, and blue
const v1 = h2d(color1.replace('#', '').substr(i, 2)); // extract the current pairs
const v2 = h2d(color2.replace('#', '').substr(i, 2));
@Landerson352
Landerson352 / titleCase.js
Created September 15, 2019 16:53
A utility for transforming a string to "Title Case".
const small = '(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|v[.]?|via|vs[.]?)';
const punctuation = '([!"#$%&\'()*+,./:;<=>?@[\\\\\\]^_`{|}~-]*)';
const titleCase = (title) => {
const parts = [];
const split = /[:.;?!] |(?: |^)["Ò]/g;
let index = 0;
/* eslint-disable no-constant-condition */
while (true) {
@Landerson352
Landerson352 / useRefreshControl.js
Created September 15, 2019 16:51
A React Native hook for handling RefreshControl state & callbacks.
import React, { useRef, useState } from 'react';
import { RefreshControl } from 'react-native';
const useRefreshControl = (refreshesRequested = 1) => {
const refreshesCompleted = useRef(0);
const [isRefreshing, setIsRefreshing] = useState(false);
const handleRefreshStart = () => {
refreshesCompleted.current = 0;
setIsRefreshing(true);
@Landerson352
Landerson352 / withMeasurements.js
Created September 15, 2019 16:50
A React Native HoC for measuring an element.
import React from 'react';
import { compose, lifecycle, withProps, withPropsOnChange, withStateHandlers } from 'recompose';
export default compose(
withProps(() => ({
measureRef: React.createRef(),
})),
withPropsOnChange(['measureRef'], ({ measureRef }) => ({
elementToMeasure: {
ref: measureRef,
@Landerson352
Landerson352 / ScreenView.js
Created September 15, 2019 16:50
A React-Native component to simplify screen layout.
import React, { useContext, useRef } from 'react';
import { KeyboardAvoidingView, StatusBar, StyleSheet, View } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { SafeAreaView } from 'react-navigation';
import withMeasurements from '../utilities/withMeasurements';
import { utils } from '../theme';
import ActivityIndicator from './ActivityIndicator';
export const ScreenViewContext = React.createContext({});
@Landerson352
Landerson352 / FieldGroup.js
Created September 5, 2019 16:31
React Native "Field Group" Component for use w/Formik
import React from 'react';
import { Input } from 'react-native-elements';
import { Field } from 'formik';
import { utils } from '../theme';
import MoneyInput from './MoneyInput';
import PickerSelect from './PickerSelect';
import Text from './Text';
/*
@Landerson352
Landerson352 / useAnimatedValue.js
Last active September 15, 2019 16:52
useAnimatedValue: A hook for animating values in React Native
import { useEffect, useRef } from 'react';
import { Animated } from 'react-native';
// A hook for using react-native's Animated.Value
// Example usages:
//
// const animatedValue = useAnimatedValue(props.value)
//
// const animatedValue = useAnimatedValue(props.value, { method: 'spring' })
//