Skip to content

Instantly share code, notes, and snippets.

@zoharlevin
zoharlevin / AnimatedText.js
Created January 3, 2018 07:03
Animated Text component which uses onLayout self measurement and animates based on animationRange
import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';
import {withSelfMeasure} from './utils/selfMeasureBehavior';
import {compose} from 'recompose';
import buildTransform from './utils/buildTransform';
const AnimatedText = ({
animationRange,
onLayoutSetMeasurements,
@zoharlevin
zoharlevin / selfMeasureBehavior.js
Created January 3, 2018 07:01
HOCs to measure component position and size with onLayout
import {compose, withState, withProps} from 'recompose';
const withMeasurements = compose(
withState('elementX', 'setX', 0),
withState('elementY', 'setY', 0),
withState('elementWidth', 'setWidth', 0),
withState('elementHeight', 'setHeight', 0)
);
const withOnLayout = withProps(({setX, setY, setWidth, setHeight}) => ({
@zoharlevin
zoharlevin / Demo.js
Created January 2, 2018 15:25
Animated header linked to ScrollView position
import React from 'react';
import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native';
import {compose, withState, withProps} from 'recompose';
import AnimatedHeader from './AnimatedHeader';
import ItemInScroll from './ItemInScroll';
export const scrollRangeForAnimation = 100;
const HeaderPlaceholder = <View style={{flex: 0, height: 200, width: '100%'}} />;