nested scrollviews

import React, { Component } from 'react'
import {
  View, Text, TouchableOpacity, StyleSheet, ScrollView, PanResponder,
} from 'react-native'
import PropTypes from 'prop-types'
import FastImage from 'react-native-fast-image'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import IconSimple from 'react-native-vector-icons/SimpleLineIcons'
import { ButtonGroup } from 'react-native-elements'
import AlphabetListView from 'react-native-alphabetlistview'
import constant from '../../utils/constant'
import DetailCell from './DetailCell'
import DetailCellItem from './DetailCellItem'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    paddingHorizontal: 15,
    backgroundColor: constant.backgroundColor,
    position: 'relative',
  },
  top: {
    flexDirection: 'row',
    height: 210,
    paddingTop: 10,
  },
  bottom: {
    flex: 1,
    paddingBottom: 10,
  },
  imgContainer: {
    width: 145,
    height: 189,
    borderColor: `${constant.blackColor}80`,
    borderWidth: 1,
  },
  image: {
    flex: 1,
    width: null,
    height: null,
    backgroundColor: 'transparent',
  },
  desc: {
    flex: 1,
    flexDirection: 'column',
    paddingLeft: 10,
  },
  title: {
    color: constant.greenColor,
    fontSize: 18,
    paddingBottom: 5,
    marginTop: -5,
  },
  text: {
    color: constant.mainColor,
    fontSize: 14,
    paddingVertical: 5,
  },
  textContent: {
    color: constant.contentColor,
  },
  back: {
    color: constant.whiteColor,
    fontSize: 18,
  },
  headerLeftButton: {
    flexDirection: 'row', alignContent: 'center', alignItems: 'center',
  },
  headerLeftIcon: {
    color: constant.whiteColor, padding: 10,
  },
  headerRightIcon1: {
    color: constant.whiteColor, padding: 10, marginLeft: 10,
  },
  headerRightIcon2: {
    color: constant.whiteColor, padding: 10, marginRight: 10,
  },
  containerStyle: {
    height: 40,
    marginLeft: 0,
    marginRight: 0,
    borderRadius: 0,
    marginTop: 0,
    marginBottom: 10,
    borderWidth: 1,
    backgroundColor: constant.backgroundColor,
    borderColor: constant.borderColor,
  },
  innerBorderStyle: {
    color: constant.borderColor,
    width: 1,
  },
  selectedButtonStyle: { backgroundColor: constant.greenColor },
  selectedTextStyle: { color: constant.contentColor },
  textStyle: {
    color: constant.contentColor,
    fontSize: 16,
  },
  description: {
    color: constant.mainColor,
    fontSize: 14,
    lineHeight: 20,
  },
})

class Detail extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity style={styles.headerLeftButton} onPress={() => { navigation.goBack() }}>
        <IconSimple name="arrow-left" size={25} style={styles.headerLeftIcon} />
        <Text style={styles.back}>BACK</Text>
      </TouchableOpacity>
    ),
    headerRight: (
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <TouchableOpacity onPress={() => { }}>
          <Icon name="star-outline" size={25} style={styles.headerRightIcon1} />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => { }}>
          <Icon name="download" size={25} style={styles.headerRightIcon2} />
        </TouchableOpacity>
      </View>
    ),
    headerTitleContainerStyle: {
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginLeft: -25,
      marginRight: 35,
    },
  });

  static propTypes = {
    navigation: PropTypes.object,
  }

  static defaultProps = {
    navigation: {},
  }

  constructor(props) {
    super(props)
    this.state = {
      selectedIndex: 0,
      dataTest: {
        A: ['some', 'entries', 'are here'],
        B: ['some', 'entries', 'are here'],
        C: ['some', 'entries', 'are here'],
        D: ['some', 'entries', 'are here'],
        E: ['some', 'entries', 'are here'],
        F: ['some', 'entries', 'are here'],
        G: ['some', 'entries', 'are here'],
        H: ['some', 'entries', 'are here'],
        I: ['some', 'entries', 'are here'],
        J: ['some', 'entries', 'are here'],
        K: ['some', 'entries', 'are here'],
        L: ['some', 'entries', 'are here'],
        M: ['some', 'entries', 'are here'],
        N: ['some', 'entries', 'are here'],
        O: ['some', 'entries', 'are here'],
        P: ['some', 'entries', 'are here'],
        Q: ['some', 'entries', 'are here'],
        R: ['some', 'entries', 'are here'],
        S: ['some', 'entries', 'are here'],
        T: ['some', 'entries', 'are here'],
        U: ['some', 'entries', 'are here'],
        V: ['some', 'entries', 'are here'],
        W: ['some', 'entries', 'are here'],
        X: ['some', 'entries', 'are here'],
        Y: ['some', 'entries', 'are here'],
        Z: ['some', 'entries', 'are here'],
      },
    }
  }

  updateIndex = (selectedIndex) => {
    this.setState({ selectedIndex })
  }

  renderImage = (img) => {
    if (img !== '') {
      return (
        <FastImage
          style={styles.image}
          source={{
            uri: img,
            priority: FastImage.priority.high,
          }}
          resizeMode={FastImage.resizeMode.stretch}
        />)
    }
    return null
  }

  renderInfo = (label, list) => {
    if (list.length > 0) {
      return (
        <Text style={styles.text}>
          {label}
          <Text style={styles.textContent}>{list.join(', ')}</Text>
        </Text>
      )
    }
    return null
  }

  renderContent = (data) => {
    const { selectedIndex } = this.state
    if (selectedIndex === 0) {
      return (
        <ScrollView>
          <Text style={styles.description}>{data.desc}</Text>
        </ScrollView>
      )
    }
    if (selectedIndex === 1) {
      const dataSource = data.getChapter()
      console.log(`data: ${JSON.stringify(dataSource)}`)
      return (
        <AlphabetListView
          data={this.state.dataTest}
          cell={DetailCell}
          cellHeight={40}
          sectionListItem={DetailCellItem}
          sectionHeader={DetailCellItem}
          sectionHeaderHeight={22.5}
          // {...this._panResponder.panHandlers}
          // onScrollEndDrag={() => this.fScroll.setNativeProps({ scrollEnabled: true })}
          // onScroll={this.handleInsideScroll}
        />
      )
    }
    if (selectedIndex === 2) {
      return <Text>Related</Text>
    }
    return null
  }

  render() {
    const { data } = this.props.navigation.state.params
    const buttons = ['Description', 'Chapters', 'Related']
    const { selectedIndex } = this.state
    return (
      <ScrollView
        ref={(e) => { this.fScroll = e }}
        style={styles.container}
        stickyHeaderIndices={[1]}
        // nestedScrollEnabled
        // onScroll={this.handleScroll}
      >
        <View style={styles.top}>
          <View style={styles.imgContainer}>
            {this.renderImage(data.img)}
          </View>
          <View style={styles.desc}>
            <Text style={styles.title}>{ data.title }</Text>
            {this.renderInfo('Authors: ', data.author)}
            {this.renderInfo('Genres: ', data.genre)}
            <Text style={styles.text}>
              {'Chapters: '}
              <Text style={styles.textContent}>{data.chapter.length}</Text>
            </Text>
            <Text style={styles.text}>
              {'Status: '}
              <Text style={styles.textContent}>{data.status}</Text>
            </Text>
          </View>
        </View>
        <ButtonGroup
          onPress={this.updateIndex}
          selectedIndex={selectedIndex}
          buttons={buttons}
          containerBorderRadius={0}
          containerStyle={styles.containerStyle}
          innerBorderStyle={styles.innerBorderStyle}
          selectedButtonStyle={styles.selectedButtonStyle}
          selectedTextStyle={styles.selectedTextStyle}
          textStyle={styles.textStyle}
        />
        <View style={styles.bottom}>
          {this.renderContent(data)}
        </View>
      </ScrollView>
    )
  }
}
export default Detail