Skip to content

Instantly share code, notes, and snippets.

import React, {Component} from 'react';
import {
TouchableOpacity,
Text,
View,
Image,
Animated,
PanResponder,
StyleSheet,
ScrollView,
@hanipcode
hanipcode / menu.js
Created January 10, 2018 04:06
menu animation react native
import React from 'react';
import { View, Image, Text, Animated, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import assets from '../assets';
import styles from '../styles';
class HomeTabBar extends React.Component {
constructor(props) {
super(props);
this.state = {
@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%'}} />;
@MicroBenz
MicroBenz / demo-final.js
Last active January 21, 2018 17:13
Recompose
import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent, withProps, withState } from 'recompose';
import { loadCampers } from 'redux/campers/actions';
const enhance = compose(
connect(
state => ({
campers: state.campers.lists
@MicroBenz
MicroBenz / demo-5.js
Created December 3, 2017 16:40
Recompose
import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent, withProps } from 'recompose';
import { loadCampers } from 'redux/campers/actions';
const enhance = compose(
connect(
state => ({
campers: state.campers.lists
@MicroBenz
MicroBenz / demo-4.js
Created December 3, 2017 16:34
Recompose
import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent } from 'recompose';
import { loadCampers } from 'redux/campers/actions';
const enhance = compose(
connect(
state => ({
campers: state.campers.lists,
@MicroBenz
MicroBenz / demo-2.js
Created December 3, 2017 16:25
Recompose
import React from 'react';
import { conenct } from 'react-redux';
import { compose } from 'recompose';
const enhance = compose(
connect(
state => ({
campers: state.campers.lists
})
)
@padupuy
padupuy / swiper.js
Created October 18, 2017 07:50
React Native Swiper
import React, { Component } from 'react';
import { StyleSheet, FlatList, Dimensions, View } from 'react-native';
import styled from 'styled-components/native';
const SCREEN_WIDTH = Dimensions.get('window').width;
const width = SCREEN_WIDTH;
const InactiveDot = styled.View`
background-color: ${props => props.theme.slider.inactive.backgroundColor};
width: 8;
import React, { PureComponent } from 'react';
import { View, Animated, Dimensions, Platform } from 'react-native';
import Interactable from 'react-native-interactable';
import { compose, mapProps } from 'recompose';
const { width } = Dimensions.get('window');
/* eslint-disable */
/*
* Origin state