Skip to content

Instantly share code, notes, and snippets.

🐈
Codes with cats

Paul Armstrong paularmstrong

🐈
Codes with cats
  • Twitter
  • Bend, OR
Block or report user

Report or block paularmstrong

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View lifecycle.js
export default function(target) {
const originalMethods = {
UNSAFE_componentWillMount: target.prototype.UNSAFE_componentWillMount || noop,
componentDidMount: target.prototype.componentDidMount || noop,
UNSAFE_componentWillUpdate: target.prototype.UNSAFE_componentWillUpdate || noop,
componentDidUpdate: target.prototype.componentDidUpdate || noop,
componentWillUnmount: target.prototype.componentWillUnmount || noop
};
View Ripple.tsx
/**
* Copyright (c) 2019 Paul Armstrong
*/
import * as Theme from '../theme';
import React from 'react';
import { StyleProp, StyleSheet, TouchableOpacity, TouchableOpacityProps, View, ViewStyle } from 'react-native';
interface Props {
children: React.ReactElement;
disabled?: boolean;
View Tooltip.test.tsx
/**
* Copyright (c) 2019 Paul Armstrong
*/
import React from 'react';
import { render } from 'react-testing-library';
import Tooltip from '../Tooltip';
import { Dimensions, MeasureOnSuccessCallback, View } from 'react-native';
describe('Tooltip', () => {
let viewRef;
View gist:8046f925665df347bc42f92ba68ab6c5
export default function(target) {
const originalMethods = {
UNSAFE_componentWillMount: target.prototype.UNSAFE_componentWillMount || noop,
componentDidMount: target.prototype.componentDidMount || noop,
UNSAFE_componentWillUpdate: target.prototype.UNSAFE_componentWillUpdate || noop,
componentDidUpdate: target.prototype.componentDidUpdate || noop,
componentWillUnmount: target.prototype.componentWillUnmount || noop
};
target.prototype.UNSAFE_componentWillMount = function(...args) {
@paularmstrong
paularmstrong / react-native-web_v0.x.x.js
Last active Nov 6, 2018
Ensure you add `module.name_mapper='^react-native$' -> 'react-native-web'` to your `.flowconfig` options
View react-native-web_v0.x.x.js
// @flow
// flow-typed signature: aa279642a4cb992a390fedc5acdc896d
// flow-typed version: react-native_v0.5.0/flow_v0.65.0
type RNW$Dimension = {| fontScale: number, height: number, scale: number, width: number |};
type RNW$DimensionsObject = {| window: RNW$Dimension, screen: RNW$Dimension |};
type RNW$StyleObject = { [key: string]: * };
type RNW$Style = mixed;
type RNW$Styles = RNW$StyleObject | RNW$Style | Array<RNW$Styles>;
@paularmstrong
paularmstrong / what-forces-layout.md
Created Aug 8, 2017 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View HeartIcon-old.jsx
const HeartIcon = (props) => React.createElement('svg', {
...props,
dangerouslySetInnerHTML: { __html: '<g><path d="M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z"></path></g>' },
viewBox: '0 0 54 72'
});
View HeartIcon.jsx
const HeartIcon = (props = {}) => (
<svg {...props} viewBox='0 0 ${width} ${height}'>
<g><path d='M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z'></path></g>
</svg>
);
View webpack.config.js
const plugins = [
// extract vendor and webpack's module manifest
new webpack.optimize.CommonsChunkPlugin({
names: [ 'vendor', 'manifest' ],
minChunks: Infinity
}),
// extract common modules from all the chunks (requires no 'name' property)
new webpack.optimize.CommonsChunkPlugin({
async: true,
children: true,
View deferComponentRender.js
import hoistStatics from 'hoist-non-react-statics';
import React from 'react';
/**
* Allows two animation frames to complete to allow other components to update
* and re-render before mounting and rendering an expensive `WrappedComponent`.
*/
export default function deferComponentRender(WrappedComponent) {
class DeferredRenderWrapper extends React.Component {
constructor(props, context) {
You can’t perform that action at this time.