/* @flow */
import React, { Component, PropTypes } from 'react';
import { autobind } from 'core-decorators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import BleManager from 'react-native-ble-manager';
import Snackbar from 'react-native-android-snackbar';

import { TouchableOpacity, View, Dimensions, BackAndroid, StyleSheet } from 'react-native';
import { Container, Header, Title, InputGroup, List, ListItem, Text, Input, Icon, Content, Footer, FooterTab, Button } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';

import { disconnectCurrentPeripheral } from '../../data/reducers/peripheral';
import { setCurrentCharacteristic } from '../../data/reducers/view';

const { width: windowWidth } = Dimensions.get('window');

const drawerStyles = {
  shadowColor: '#000',
  shadowOpacity: 0.8,
  shadowRadius: 3,
  backgroundColor: '#000',
};

const styles = StyleSheet.create({
});

function mapStateToProps(state) {
  const data = state.peripheral.getIn(['data']);
  return {
    data,
    name: data.name,
    id: data.id,
    characteristics: data.characteristics,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ disconnectCurrentPeripheral, setCurrentCharacteristic }, dispatch);
}

@connect(mapStateToProps, mapDispatchToProps)
export default class PeripheralDetail extends Component {
  static contextTypes = { router: PropTypes.object };
  static propTypes = {
    disconnectCurrentPeripheral: PropTypes.func.isRequired,
    name: PropTypes.string,
    id: PropTypes.string,
  };

  state = {
    showDetail: false,
  }

  componentDidMount() {
    BackAndroid.addEventListener('hardwareBackPress', this.handleBack);
  }

  @autobind
  handleBack() {
    this.context.router.transitionTo('/');
    this.props.disconnectCurrentPeripheral();
    BackAndroid.addEventListener('hardwareBackPress', () => true);
    return true;
  }

  render() {
    const navigationView = (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
      </View>
    );
    return (
      <Container>
        <Header style={{ width: windowWidth }}>
          <Button onPress={this.handleBack} transparent>
            <Icon name="ios-arrow-back" />
          </Button>
          <Title>{this.props.name}</Title>
          <Button transparent>
            <Icon name="ios-menu" />
          </Button>
        </Header>

        <Content>
          <List
            dataArray={this.props.characteristics}
            renderRow={item =>
              <ListItem>
                <Text >
                  service: {item.service}
                </Text>
                <Text note>
                  characteristic: {item.characteristic}
                </Text>
              </ListItem>
            }
          />

          {
            this.state.showDetail
            ? <Text style={styles.summary}>{JSON.stringify(this.props.data, null, '  ')}</Text>
            : <View />
          }
        </Content>
      </Container>
    );
  }
}

@@ -1990,16 +1990,17 @@
 style=%7B%7B
+ 
 flex: 1,
@@ -2023,16 +2023,17 @@
 : '#fff'
+ 
 %7D%7D%3E%0A    
@@ -2050,16 +2050,17 @@
 style=%7B%7B
+ 
 margin: 
@@ -2094,16 +2094,17 @@
 : 'left'
+ 
 %7D%7D%3EI'm i
@@ -2404,16 +2404,86 @@
  %3CButton
+ onPress=%7B() =%3E this.setState(%7B showDetail: !this.state.showDetail %7D)%7D
  transpa
@@ -2516,16 +2516,19 @@
 me=%22
-ios-menu
+md-document
 %22 /%3E

Add tougle deatil