xotahal

      <ColumnChart
        height={200}
        width={300}
        data={data}
        onPress={onPress}
      />

xotahal

// Detail page with a destination shared element
import { SharedElement } from 'react-native-motion';

class DetailPage extends Component {
  render() {
    return (
      <SharedElement sourceId="source">
        <View>{listItemNode}</View>
      </SharedElement>
    );

xotahal

// List items page with source of SharedElement
import { SharedElement } from 'react-native-motion';

class ListPage extends Component {
  render() {
    return (
      <SharedElement id="source">
        <View>{listItemNode}</View>
      </SharedElement>
    );

xotahal

import { TranslateYAndOpacity } from 'react-native-motion';

class ToolbarTitle extends PureComponent {
  render() {
    return (
      <TranslateYAndOpacity duration={250}>
        <View>
          // ...
        </View>
      </TranslateYAndOpacity>

xotahal

class TranslateYAndOpacity extends PureComponent {
  constructor(props) {
    // ...
    this.state = {
      opacityValue: new Animated.Value(opacityMin),
      translateYValue: new Animated.Value(translateYMin),
    };
    // ...
  }
  componentDidMount() {

xotahal

/**
* Removes non alphanumeric characters.
*/
function normalize(phrase) {
    if (!phrase) {
        return '';
    }

    return phrase.replace(/[\W_]/g, '').toLowerCase();
}

xotahal

/**
* Removes non alphanumeric characters.
*/
function normalize(phrase) {
    if (!phrase) {
        return '';
    }

    return phrase.replace(/[\W_]/g, '').toLowerCase();
}

xotahal

/**
* Removes non alphanumeric characters.
*/
function normalize(phrase) {
    if (!phrase) {
        return '';
    }

    return phrase.replace(/[\W_]/g, '').toLowerCase();
}

xotahal

    onPressOut = () => {
        // When user use onPress all animation happens in onPress method. But when user use long
        // press. We displaye background layer in onLongPress and then we need to animate ripple
        // effect that is done here.
        Animated.parallel([
            // Hide opacity background layer, slowly. It has to be done later than ripple
            // effect
            Animated.timing(this.state.opacityBackgroundValue, {
                toValue: 0,
                duration: 500 + diameter,

xotahal

    onLongPress = () => {
        // Animation of long press is slightly different than onPress animation
        Animated.timing(this.state.opacityBackgroundValue, {
            toValue: maxOpacity / 2,
            duration: 700,
        }).start();
    }