two side screen with SectionList and gmap on the right

import React, { Component } from 'react';
import { ActivityIndicator, SectionList } from 'react-native';
import styled from 'styled-components/native';

import { compose, withApollo } from 'react-apollo';
import { connect } from 'react-redux';
import _ from 'underscore';

import BatMap from '../components/map';
import { openFdr } from '../actions/fdr';

import GET_FDR from '../graphql/queries/getFdrById';


const Root = styled.View`
  flex: 1
  flexDirection: row
  backgroundColor: ${props => props.theme.WHITE}
`;

const Left = styled.View`
  width:25%
`

const Wrapper = styled.View`
  flex:1
`

const Right = styled.View`
  width:75%
`

const T = styled.Text`
  color: black
  fontSize:16
`;

const TextHeader = styled.Text`
  color:white
  fontSize:16
  padding:5px
  marginBottom:5px
`;


const initialState = {
  loading: false
}

class AffairesScreen extends Component {
  state = initialState;

  componentWillMount() {
    this._openFdr(this.props.navigation.state.params.id);
  }

  _openFdr = async (id) => {
    this.setState({loading: true})
    const { data : { FeuillesDeRoute: { get } } } = await this.props.client.query({
        query: GET_FDR,
        variables: { id },
    });
    await this.props.openFdr( get );
    this.setState({loading: false })
  }

  _renderItem = ({item}) => <Wrapper><T style={{fontWeight: "700"}}>{item.index} - {item.address.fullname}</T></Wrapper>

  _renderHeader = ({section}) => ( 
    <Wrapper style={{ backgroundColor:'black', flexDirection: "row", paddingTop:3}}>
      <Wrapper style={{alignItems: 'flex-start', flex:8}}>
        <TextHeader style={{ color:'white',fontWeight:'900'}}>{section.client}</TextHeader>
      </Wrapper>
      <Wrapper style={{flexDirection: "row", alignItems: 'center', justifyContent: 'flex-end', flex:4}}>
          {section.urgence ? <TextHeader style={{ borderRadius:4,backgroundColor:"red", color: 'white', marginRight:5, paddingTop:0}}>urgent</TextHeader>: null}{section.hap ? <TextHeader style={{ borderRadius:4,backgroundColor:"red", color: 'white',marginRight:5,paddingTop:0}}>hap</TextHeader> : null}      
      </Wrapper>
    </Wrapper>
  )

  render() {
    if (this.state.loading) {
      return (
        <Wrapper>
          <ActivityIndicator size="large" />
        </Wrapper>
      )
    }

    const {fdr} = this.props;

    const list = fdr.current.affaires.reduce((prev, curr) => {
      const res = {};
      res.hap = curr.hap;
      res.urgence = curr.urgence;
      res.data = _.sortBy(curr.carottages, cr => cr.index)
      res.key = curr.id;
      res.client = curr.chargesAffaires[0].client.name;
      return [...prev, res];
    }, [])

    return (
      <Root>
          <Left>
              <SectionList
                renderItem={this._renderItem}
                renderSectionHeader={this._renderHeader}
                sections={list}
                keyExtractor={item => item.id}
              />
          </Left>
          <Right>
            <BatMap />
          </Right>
      </Root>
    );
  }
}

export default withApollo(compose(
  connect(state => ({user: state.user.info,fdr: state.fdr}), { openFdr })
  )(
  AffairesScreen,
));