content: import React, { Component } from 'react';
  import {
      ScrollView,
      TouchableOpacity,
      StyleSheet,
      Image,
      Text,
      View,
      ScrolView
  } from 'react-native';
  import { SharedElementTransition } from 'react-native-navigation';
  import * as Animatable from 'react-native-animatable';
  
  const FADE_DURATION = 500;
  const SHOW_DURATION = 500;
  const HIDE_DURATION = 500;
  
  const ICON_MARGIN = 24;
  
  class Profiles extends Component {
  
      constructor(props) {
          super(props);
          this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
          this.state = {
              animationType: 'fadeIn'
          }
      }
  
      componentDidMount() {
          if (__STRESS_TEST__) {
              setTimeout(() => {
                  this.setState({
                      animationType: 'fadeOut'
                  });
                  this.props.navigator.pop();
              }, 650);
          }
      }
  
      onNavigatorEvent(event) {
          if (event.id === 'backPress') {
              this.setState({
                  animationType: 'fadeOut'
              });
              this.props.navigator.pop();
          }
      }
  
      _renderHeader() {
          return (
              <Animatable.View
                  animation={this.state.animationType}
                  duration={FADE_DURATION}
                  style={[styles.header, { backgroundColor: this.props.primaryColor }]}
                  useNativeDriver={true}
              >
                  <View style={{ height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white' }} />
                  <View style={{ flex: 1, flexDirection: 'row' }}>
                      {this._renderIcon()}
                      {this._renderTitle()}
                  </View>
              </Animatable.View>
          );
      }
  
      _renderTitle() {
          return (
              <View style={{ alignSelf: 'flex-end' }}>
                  <SharedElementTransition
                      style={styles.titleContainer}
                      sharedElementId={this.props.sharedTitleId}
                      showDuration={SHOW_DURATION}
                      hideDuration={HIDE_DURATION}
                      showInterpolation={
                          {
                              type: 'path',
                              controlX1: '0.5',
                              controlY1: '1',
                              controlX2: '0',
                              controlY2: '0.5',
                              easing: 'FastOutSlowIn'
                          }
                      }
                      hideInterpolation={
                          {
                              type: 'path',
                              controlX1: '0.5',
                              controlY1: '0',
                              controlX2: '1',
                              controlY2: '0.5',
                              easing: 'FastOutSlowIn'
                          }
                      }
                  >
                      <Text style={[styles.title, { color: this.props.titleColor }]}>{this.props.title}</Text>
                  </SharedElementTransition>
              </View>
          );
      }
  
      _renderContent() {
          return (
              <Animatable.View
                  animation={this.state.animationType}
                  duration={FADE_DURATION}
                  style={styles.body}
                  useNativeDriver={true}>
                  <View
                      style={styles.list}
                      initialListSize={20}>
                      {this._genRows()}
                  </View>
              </Animatable.View>
          );
      }
  
      _genRows() {
          const children = [];
          for (let ii = 0; ii < 30; ii++) {
              children.push(
                  <Text>{'row ' + ii}</Text>
              );
          }
          return children;
      }
  
      _renderIcon() {
          return (
              <SharedElementTransition
                  sharedElementId={this.props.sharedIconId}
                  style={styles.iconContainer}
                  showDuration={SHOW_DURATION}
                  hideDuration={HIDE_DURATION}
                  showInterpolation={
                      {
                          type: 'path',
                          controlX1: '0.5',
                          controlY1: '1',
                          controlX2: '0',
                          controlY2: '0.5',
                          easing: 'FastOutSlowIn'
                      }
                  }
                  hideInterpolation={
                      {
                          type: 'path',
                          controlX1: '0.5',
                          controlY1: '0',
                          controlX2: '1',
                          controlY2: '0.5',
                          easing: 'FastOutSlowIn'
                      }
                  }
              >
                  <Image
                      source={this.props.icon}
                      style={styles.heroIcon}
                      fadeDuration={0}
                  />
              </SharedElementTransition>
          );
      }
  
      render() {
          return (
              <ScrollView style={[styles.container]}>
                  {this._renderHeader()}
                  {this._renderContent()}
              </ScrollView>
          );
      }
  
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          flexDirection: 'column',
          backgroundColor: 'transparent'
      },
      header: {
          height: 110,
          flexDirection: 'column-reverse'
      },
      titleContainer: {
          marginLeft: ICON_MARGIN + 90 + +16,
          marginBottom: 8
      },
      title: {
          fontSize: 23,
      },
      iconContainer: {
          position: 'absolute',
          bottom: -ICON_MARGIN,
          left: ICON_MARGIN
      },
      heroIcon: {
          width: 90,
          height: 90,
          resizeMode: 'contain'
      },
      body: {
          flex: 4,
          backgroundColor: 'white',
      },
      list: {
          marginTop: 16,
          marginHorizontal: 8
      }
  });
  
  export default Profiles;
  