gistfile1.txt

import React, {
  Component
} from 'react'

import {
  AppRegistry,
  Easing,
  StyleSheet,
  Text,
  Image,
  View,
  TouchableWithoutFeedback
} from 'react-native'

import CircleTransition from './CircleTransition'

export default class Exemples extends Component {
  constructor (props) {
    super(props)
    this.state = {
      oldColor: '#E3E4E5',
      color: 'orange'
    }
    this.handlePress = this.handlePress.bind(this)
  }

  handlePress () {
    this.circleTransition.start(() => {
      this.setState({
        oldColor: this.state.color
      })
    })
  }

  render () {
    let {
      color,
      oldColor
    } = this.state
    
    return (
      <View style={[{
        backgroundColor: oldColor
      },
      styles.container
    ]}>
    <Image
      style={styles.image}
      source={{
        uri: 'https://facebook.github.io/react/img/logo_og.png'
      }}
    />
    <TouchableWithoutFeedback style={styles.touchable} onPress={this.handlePress}>
      <View>
        <Text style={styles.position}>Hello World</Text>
      </View>
    </TouchableWithoutFeedback>
    <CircleTransition
      ref={(circle) => { this.circleTransition = circle }}
      color={color}
      expand
      position={'center'}
    />
  </View>
  )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    zIndex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  image: {
    marginTop: 100,
    width: 100,
    zIndex: 101,
    height: 100
  },
  position: {
    flex: 1,
    top: 320,
    fontSize: 25,
    alignSelf: 'center',
    fontWeight: '400',
    textAlign: 'center',
    color: '#253039'
  },
  touchable: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  }
})