tab3.js

import React, { Component } from 'react'
import {
  Text,
  View,
  Dimensions,
  ListView,
  ScrollView,
  TouchableHighlight
} from 'react-native'

import { StackNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

const win = Dimensions.get('window')


const URL = 'https://api.backendless.com/F9B3E486-9DA0-E127-FF44-208D03827200/8B9A3030-C8BB-1149-FFCB-26E84A927F00/files/media/leela/description.json'

class Detail extends Component {
  static navigationOptions = ({ navigation }) => ({
      title: `${navigation.state.params.user.name}`,
      headerStyle: {
        backgroundColor: '#fff',
      },
      headerTintColor: '#DBD7D2',
  })

  render() {
   const { bioStyle, container  } = styles
   const { bio } = this.props.navigation.state.params.user

    return (
      <ScrollView style={container}>
        <Text style={bioStyle}>{bio}</Text>
      </ScrollView>
    )
  }
}


class List extends Component {
  static navigationOptions = {
    title: 'Описание планов',
  }

  constructor(props){
    super(props)
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      userDataSource: ds
    }
  }

  componentDidMount() {
    this.fetchData().done()
  }

  async fetchData() {
    const response = await fetch(URL)
    const ds = await response.json()
    this.setState({
      userDataSource: this.state.userDataSource.cloneWithRows(ds)
    })
  }

  renderRow(user) {
    const { titleContainer, chevron, posterText } = styles
    const { name } = user
   
    return (
      <TouchableHighlight onPress={() => this.navigate('Child', { user: user })} >
        <View>
         <View style={titleContainer}>
          <Text style={posterText}>{name}</Text>
         <Icon style={chevron} name="chevron-right" size={30} color="#DBD7D2" />
         </View>
        </View>
      </TouchableHighlight>
    )
  }

  render() {
    const { container } = styles
    const { navigate } = this.props.navigation
    this.navigate = navigate
    return (
      <View style={container}>
        <ListView
          dataSource={this.state.userDataSource}
          renderRow={this.renderRow.bind(this)}
        />
      </View>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: '#fff'
 },
  iconContainerStyle: {
    alignSelf: 'stretch',
    width: win.width,
    height: win.width
 },
  nameText: {
    paddingTop: 10,
    fontFamily: 'AppleSDGothicNeo-Light',
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#000',
    fontWeight: '100',
    fontSize: 18,
    paddingTop: 20,
    marginLeft: 20,
  },
  professionText: {
    fontFamily: 'AppleSDGothicNeo-Light',
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#000',
    fontWeight: '100',
    fontSize: 16,
    marginLeft: 20,
  },
  bioStyle: {
    fontFamily: 'AppleSDGothicNeo-Light',
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#474747',
    fontSize: 15,
    fontWeight: '100',
    padding: 20 
  },
  titleContainer: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    height: 50,
  },
  posterText: {
    fontFamily: 'AppleSDGothicNeo-Light',
    fontWeight: '100',
    marginLeft: 20,
    paddingTop: 15,
    color: '#000',
    fontSize: 15,
  },
  chevron: {
    alignSelf: 'flex-end',
    justifyContent: 'center',
    paddingTop: 20,
    marginRight: 15 
  }
}

export default Tab3 = StackNavigator({
  Parent: { screen: List },
  Child: { screen: Detail }
}, {
  navigationOptions: {
    headerStyle: {
      backgroundColor: '#fff'
    },
    headerTitleStyle: {
      fontFamily: 'AppleSDGothicNeo-Light',
      paddingTop: 3,
      fontSize: 16,
      fontWeight: '100',
      color: '#000'
    },
    headerTintColor: '#000',
    headerBackTitleStyle: {
      color: '#fff'
    },
  }
})