React Native Code

AutoLink.js

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import ParsedText from 'react-native-parsed-text';
import {
  TEXT_PURPAL, TEXT_COLOR_BLACK,
} from '../../config/colors';
import { FONT_AVENIR_BOOK } from '../../config/font';

export default class AutoLink extends Component {

  static displayName = 'Example';

  handleHashTagPress(name) {
    // alert(`Hello ${name}`);
  }


  // renderText(matchingString, matches) {
  //   // matches => ["[@michel:5455345]", "@michel", "5455345"]
  //   const pattern = /\[(@[^:]+):([^\]]+)\]/i;
  //   const match = matchingString.match(pattern);
  //   return `^^${match[1]}^^`;
  // }

  render() {
    return (
      <View style={[styles.container, this.props.style]}>
        <ParsedText
          style={styles.text}
          parse={
          [
              // { type: 'url', style: styles.url, onPress: this.handleUrlPress },
              // { type: 'phone', style: styles.phone, onPress: this.handlePhonePress },
              // { type: 'email', style: styles.email, onPress: this.handleEmailPress },
              // { pattern: /Bob|David/, style: styles.name, onPress: this.handleNamePress },
              // { pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText },
              // { pattern: /42/, style: styles.magicNumber },
              { pattern: /#(\w+)/, style: styles.hashTag, onPress: this.handleHashTagPress },
          ]
          }
          childrenProps={{ allowFontScaling: false }}
          numberOfLines={this.props.numberOfLines}
        >
          {this.props.description}
        </ParsedText>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
  },

  url: {
    color: 'red',
    textDecorationLine: 'underline',
  },

  email: {
    textDecorationLine: 'underline',
  },

  text: {
    // color: 'black',
    // fontSize: 15,
    fontFamily: FONT_AVENIR_BOOK,
    fontSize: 14,
    textAlign: 'left',
    color: TEXT_COLOR_BLACK,
  },

  phone: {
    color: 'blue',
    textDecorationLine: 'underline',
  },

  name: {
    color: 'red',
  },

  username: {
    color: 'green',
    fontWeight: 'bold',
  },

  magicNumber: {
    fontSize: 42,
    color: 'pink',
  },

  hashTag: {
    fontStyle: 'normal',
    color: '#3f46b6',
    fontSize: 16,
  },

});

backHandler.js

import React from 'react';
import { BackHandler, Platform } from 'react-native';
import { NavigationActions } from 'react-navigation';

export function backHandler(Component) {
  return class Wrapped extends React.Component {
    componentWillMount() {
      if (Platform.OS === 'android') {
        BackHandler.addEventListener('hardwareBackPress', () => {
          this.props.navigation.dispatch(NavigationActions.back());
          return true;
        });
      }
    }
    render() {
      return <Component {...this.props} />;
    }
  };
}

CircleImage.js

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
} from 'react-native';

import { IMAGE_BG_PURPAL } from '../../config/colors';

const CircleImage = ({ style, source, radius }) => (
  <View
    style={[
      styles.container,
      style,
      {
        height: radius,
        width: radius,
        borderRadius: radius / 2,

      },
    ]}
  >
    <Image
      source={source}
      style={{
        height: radius,
        width: radius,
        borderRadius: radius / 2,
      }}
    />
  </View>
);

export default CircleImage;

const styles = StyleSheet.create({
  container: {
    backgroundColor: IMAGE_BG_PURPAL,
  },
});

GroupDetailCell.js

import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import CardView from 'react-native-cardview';
import MeasureText from 'react-native-measure-text';
import moment from 'moment';
import { connect } from 'react-redux';

import { ToggleButton } from './common';
import ImageButton from './common/ImageButton';
import AutoLink from './common/AutoLink';
import CircleImage from '../components/common/CircleImage';
import { likePost, followPost } from '../actions';

import { IC_REPORT_LIST, IC_COMMENTS, IC_LIKE, IC_LIKE_SELECTED, IC_PLUS } from '../icon';
import {
  TEXT_COLOR_BLACK, IMAGE_BG_PURPAL,
} from '../config/colors';

import {
  FONT_AVENIR_MEDIUM,
} from '../config/font';


class GroupDetailCell extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.postList,
      selectedData: this.props.selectedData,
      numberOfLines: 2,
    };
  }
  onLikePress() {
    let arrayNew = [];
    arrayNew = this.state.data;
    if (arrayNew.is_like === 0) {
      arrayNew.is_like = 1;
      arrayNew.total_vote_count += 1;
    } else {
      arrayNew.is_like = 0;
      arrayNew.total_vote_count -= 1;
    }
    let objParams = {};
    if (this.props.isSearch) {
      objParams = {
        authorization: userLoginData.authorization,
        postId: arrayNew.id,
        like: arrayNew.is_like,
      };
    } else {
      objParams = {
        authorization: this.props.userData.authorization,
        postId: arrayNew.id,
        like: arrayNew.is_like,
      };
    }
    this.props.likePost(objParams);
    this.setState({ data: arrayNew });
  }
  render() {
    const {
          mainView,
      logoImage,
      userPicImage,
      userText,
      desText,
      dotButton,
      logoImage1,
      toggleImage,
           } = styles;
    const { postList, onCommentPress, onReportPress, onLikePress } = this.props;
    const dateCurrent = new Date();
    const dateDisplay = postList.updated_at;

    console.log(`Current ${dateCurrent}`);
    console.log(`UTC ${dateDisplay}`); // 2015-09-13 03:39:27

    const stillUtc = moment.utc(dateDisplay).toDate();
    const local = moment(stillUtc).local().format('YYYY-MM-DD HH:mm:ss');

    console.log(`Local ${local}`);

    const fmtdateCurrent = moment(dateCurrent).format('YYYY-MM-DD HH:mm:ss');

    const diff = moment(fmtdateCurrent).diff(moment(local));
    const d = moment.duration(diff);
    const days = d.get('days');// parseInt(d.asDays());
    const hours = d.get('hours');
    const minutes = d.get('minutes'); // d.get('minutes');
    // hours -= days * 24;

    console.log(`hours ${hours}`);
    console.log(`minutes ${minutes}`);

    let displayDate = '';
    if (fmtdateCurrent > local) {
      if (days === 0) {
        displayDate = `${hours} hours ago`;
        if (hours === 0) {
          displayDate = `${minutes} minutes ago`;
          if (minutes === 0) {
            displayDate = 'minutes ago';
          }
        } else if (hours === 1) {
          displayDate = `${hours} hour ago`;
        }
      } else if (days === 1) {
        displayDate = 'Yesterday';
      } else {
        displayDate = moment(dateDisplay).format('YYYY-MM-DD');
      }
    } else if (fmtdateCurrent === local) {
      console.log('same');
    }
    return (
      <View>
        <CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5}
          style={{
            marginLeft: 7,
            marginRight: 7,
            marginTop: 23,
            backgroundColor: 'white',
          }}
        >
          <View style={mainView}>
            <View
              style={{
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}
            >

              <View
                style={{
                  backgroundColor: 'transparent',
                  flex: 1,
                  paddingLeft: 70,
                }}
              >
                <Text
                  style={[
                    userText, {
                      backgroundColor: 'transparent',
                    }]}
                > {postList.user.name} </Text>

                <Text
                  style={{
                    justifyContent: 'center',
                    textAlign: 'left',
                    fontFamily: FONT_AVENIR_MEDIUM,
                    fontSize: 10,
                    paddingLeft: 3,
                    backgroundColor: 'transparent',

                  }}
                >{displayDate}</Text>
              </View>
              <ImageButton
                source={IC_REPORT_LIST}
                imageStyle={dotButton}
                onPress={onReportPress}
              />
            </View>


            <Image
              style={{
                backgroundColor: IMAGE_BG_PURPAL,
                justifyContent: 'center',
                width: null,
                height: postList.file.length > 0 ? 180 : 0,
                resizeMode: 'cover',
                margin: 10,
                borderRadius: 7,
              }}
              source={{ uri: postList.file.length > 0 ? postList.file : 'static' }}
            />

            <AutoLink description={postList.description} style={desText} />

          </View>

          <View
            style={{
              flexDirection: 'row',
              paddingBottom: 6,
            }}
          >
            <View
              style={{
                // justifyContent: 'flex-start',
                // alignItems: 'center',
                height: 34,
                flexDirection: 'row',
              }}
            >
              <ToggleButton
                style={toggleImage}
                onPress={() => { this.onLikePress(); }}
                selected={IC_LIKE_SELECTED}
                unSelected={IC_LIKE}
                isActive={this.state.data.is_like}
                imageStyle={logoImage1}
              />
              <Text
                style={{
                  justifyContent: 'center',
                  textAlign: 'center',
                  alignSelf: 'center',
                  fontFamily: FONT_AVENIR_MEDIUM,
                  fontSize: 12,

                }}
              >
                {`${postList.total_vote_count} Likes`}</Text>
            </View>

            <ImageButton
              style={{ flex: 1 }}
              source={IC_COMMENTS}
              imageStyle={logoImage}
              onPress={onCommentPress}
              title={`${postList.total_comment_count} Comments`}
              titleStyle={{
                margin: 5,
                justifyContent: 'center',
                textAlign: 'center',
                alignSelf: 'center',
                fontFamily: FONT_AVENIR_MEDIUM,
                fontSize: 12,

              }}
            />
          </View>
        </CardView>

        {postList.user.image === '' ? <CircleImage
          style={userPicImage}
          radius={50}
        /> : <CircleImage
          style={userPicImage}
          source={{ uri: postList.user.image }}
          radius={50}
        />}
      </View>
    );
  }
}

const styles = {
  mainView: {
    backgroundColor: 'white',
    // height: 320,
    // margin: 10,
    borderRadius: 10,
  },

  userText: {
    backgroundColor: 'transparent',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    fontFamily: FONT_AVENIR_MEDIUM,
    fontSize: 15,
    textAlign: 'left',
    color: TEXT_COLOR_BLACK,
    fontWeight: '600',
  },

  desText: {
    backgroundColor: 'transparent',
    marginLeft: 5,
    marginTop: 2,
    marginRight: 5,
    marginBottom: 2,
    paddingRight: 4,
    paddingLeft: 4,
  },

  dotButton: {
    justifyContent: 'flex-end',
    width: 50,
    height: 30,
    resizeMode: 'center',
    marginRight: 10,
    backgroundColor: 'transparent',
    position: 'relative',
  },

  userPicImage: {
    justifyContent: 'center',
    left: 20,
    top: 5,
    position: 'absolute',
    overflow: 'hidden',
    // top: 155,
    elevation: 2,
  },


  logoImage: {
    marginLeft: 10,
    justifyContent: 'center',
    alignSelf: 'center',
    width: 20,
    height: 20,
    resizeMode: 'stretch',
  },
  logoImage1: {
    width: 20,
    height: 20,
    resizeMode: 'center',
  },
  toggleImage: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    width: 34,
    height: 34,
  },

};

const mapStateToProps = (state) => {
  const {
    data,
    isFetching,
    error } = state.post;

  return {
    data,
    isFetching,
    error };
};


export default connect(mapStateToProps, {
  likePost, followPost,
})(GroupDetailCell);

GroupDetailScreen.js

import React, { Component } from 'react';
import { View,
  FlatList,
  TouchableOpacity,
  Image,
  Dimensions,
  Text,
  ScrollView, AsyncStorage,
 } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';

import { Header } from '../components/Header';
import GroupDetailCell from '../components/GroupDetailCell';
import { groupList } from '../data/group';
import Report from '../components/common/Report';
import { reportList } from '../data/report';

import { backHandler } from '../utils/HoC';

import ImageButton from '../components/common/ImageButton';
import { TEXT_PURPAL, IMAGE_BG_PURPAL, BUTTON_BG_PURPAL } from '../config/colors';
import { FONT_AVENIR_MEDIUM, FONT_AVENIR_BOOK } from '../config/font';
import { profile } from '../data/profile';
import CircleImage from '../components/common/CircleImage';

import {
  IC_PLUS,
  IC_PROFILE_IMAGE_BG_GRAY_WHOLE,
 } from '../icon';
import { getGroupList, report } from '../actions';

const { height, width } = Dimensions.get('window');

let userLoginData = {};
class GroupDetailScreen extends backHandler(Component) {

  static navigationOptions = ({ navigation }) => ({
    header: (
      <Header
        title="Group Detail"
        onBack={() => { navigation.dispatch(NavigationActions.back()); }}
      />),
  });

  state ={
    modalVisible: false,
    seletData: [],
    numberOfLines: 2,
    arrPostData: [],
    isLoadMore: false,
    offset: 0,
  }
  componentDidMount() {
    // setInterval(() => {
    //   this.setState({
    //     isRefresh: !this.state.isRefresh,
    //   });
    // }, 3000);
    try {
      AsyncStorage.getItem('userLogin').then((value) => {
        userLoginData = JSON.parse(value);
        // alert(JSON.stringify(userLoginData));
        this.props.getGroupList({
          authorization: userLoginData.authorization,
          id: userLoginData.id,
          offset: this.state.offset,
        });
      }).done();
    } catch (error) {
      // Error retrieving data
    }
  }

  onPressPostGroup() {
    this.props.navigation.navigate('GroupPostScreen');
  }

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  commentPress(item) {
    // this.props.navigation.navigate('CommentScreen');
    this.props.navigation.navigate('CommentScreen', { item, loginData: userLoginData, type: '4' });
  }

  reportPress(item) {
    console.log(item);
    this.state = { ...this.state, seletData: item };
    this.setModalVisible(true);
  }

  likePress(item) {
    alert('like');
  }

  onPressReadMore() {
    if (this.state.numberOfLines === 2) {
      this.setState({ numberOfLines: 0 });
    } else {
      this.setState({ numberOfLines: 2 });
    }
  }
  renderReportDialog() {
    return (
      <Report
        visible={this.state.modalVisible}
        onPressCancel={() => { this.setModalVisible(false); }}
        onPressReport={(data) => {
          // alert(JSON.stringify(data));
          // console.log(JSON.stringify(data));
          let dataGet = {};
          for (let i = 0; i < data.length; i += 1) {
            const isReport = data[i].reportChecked;
            if (isReport === true) {
              dataGet = data[i];
              break;
            }
          }
          const reportData = {
            authorization: userLoginData.authorization,
            postId: this.state.seletData.id,
            reportId: dataGet.id,
          };
          // alert(JSON.stringify(reportData));
          this.setModalVisible(false);
          this.props.report(reportData);
          this.setModalVisible(false);
        }}
      />);
  }

  renderItem({ item }) {
    return (
      <GroupDetailCell
        key={item.id}
        postList={item}
        userData={userLoginData}
        onCommentPress={() => { this.commentPress(item); }}
        onReportPress={() => { this.reportPress(item); }}
        onLikePress={() => { this.likePress(item); }}
      />
    );
  }

  renderCoverPicDisplay(data) {
    return (
      <View
        style={{
          backgroundColor: 'transparent',
          justifyContent: 'center',
          alignItems: 'center',
          height: 159,
          marginBottom: 50,
        }}
      >
        <View
          style={{
            backgroundColor: 'transparent',
            height: 50,
            width: width - 24,
            position: 'absolute',
            bottom: 0,
            marginLeft: 10,
            marginRight: 10,
          }}

        />
        {data.cover_image === '' ? <Image
          style={{
            backgroundColor: IMAGE_BG_PURPAL,
            resizeMode: 'stretch',
            width: '100%',
            height: '100%',
          }}
        /> : <Image
          source={{ uri: data.cover_image }}
          style={{
            backgroundColor: IMAGE_BG_PURPAL,
            resizeMode: 'stretch',
            width: '100%',
            height: '100%',
          }}
        />}
        <Image
          source={IC_PROFILE_IMAGE_BG_GRAY_WHOLE}
          style={{
            width: '100%',
            position: 'absolute',
            bottom: 0,
          }}
        />

      </View>

    );
  }

  renderProfilePic(data) {
    return (
      <View
        style={{
          top: 159 - 35,
          position: 'absolute',
          alignSelf: 'center',
          backgroundColor: 'transparent',
        }}
      >
        <View >
          <View
            style={{
              height: 35,
              width: width - 24,
              backgroundColor: 'transparent',
              top: 35,
            }}
          />

          {data.image === '' ? <CircleImage
            style={{
              position: 'absolute',
              alignSelf: 'center',
            }}
            radius={70}
          /> : <CircleImage
            style={{
              position: 'absolute',
              alignSelf: 'center',
            }}
            source={{ uri: data.image }}
            radius={70}
          />}
        </View>

        <View
          style={[{
            backgroundColor: 'transparent',
            justifyContent: 'center',
            alignItems: 'center',
            marginRight: 10,
            marginLeft: 10,
            marginTop: 35,
          }, styles.shadowStyle]}
        >
          <Text
            style={styles.textStyle}
          >{data.title}</Text>

          <Text
            style={styles.textStyle}
          >{`${data.total_members_count} Members`}</Text>
        </View>
      </View>

    );
  }
  renderList() {
    return (
      <View
        style={{
          height,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'transparent',
          alignSelf: 'center',
        }}
      ><Text
        style={{
          fontFamily: FONT_AVENIR_MEDIUM,
          fontSize: 20,
          color: BUTTON_BG_PURPAL,
        }}
      >There is no data available.</Text>
      </View>
    );
  }
  render() {
    const roundedCornerSize = 50;
    const content = {
      data: this.props.data,
      isFetching: this.props.isFetching,
      error: this.props.error,
      loadMoreGroup: this.props.loadMoreGroup,
    };
    // if (content.isFetching) {
    //   this.state = { ...this.state, isLoading: true };
    // } else {
    //   this.state = { ...this.state, isLoading: false };
    // }
    // this.state = { ...this.state, isLoadMore: content.loadMoreGroup };
    // alert(this.state.isLoadMore);
    // console.log(`Data ${JSON.stringify(content.data.posts)}`);
    if (content.data.length !== 0) {
      const dataGroup = content.data.posts;
      // console.log(`Type Of ${typeof (dataGroup)}`);
      // console.log(`Array or not ${dataGroup instanceof Array}`);
      const chartArrayFilter = [];
      let key;
      for (key in dataGroup) {
        // console.log(`Parse Data  ${JSON.stringify(key)}`);
        // console.log(`Parse Data  ${JSON.stringify(dataGroup[key])}`);
        chartArrayFilter.push(dataGroup[key]);
      }
      console.log(`chartArrayFilter Data  ${JSON.stringify(chartArrayFilter)}`);
      console.log(`chartArrayFilter Data length ${chartArrayFilter.length}`);
      console.log(`Parse Data  ${JSON.stringify(chartArrayFilter)}`);
      console.log(`arrPostData length ${this.state.arrPostData.length}`);
      if (chartArrayFilter.length !== 0) {
        console.log('not equal');
        const arrayvar = this.state.arrPostData.slice();
        for (let i = 0; i < chartArrayFilter.length; i += 1) {
          arrayvar.push(chartArrayFilter[i]);
        }
        this.state = { ...this.state, arrPostData: arrayvar };
      } else if (chartArrayFilter.length === 0) {
        console.log('equal');
        if (this.state.arrPostData.length === 0) {
          console.log('arrPostData equal');
          this.state = { ...this.state, arrPostData: chartArrayFilter };
        }
      }
      console.log(`Group Data length ${JSON.stringify(this.state.arrPostData)}`);
    }

    return (

      <View
        style={{
          flex: 1,
        }}
      >

        { this.renderReportDialog() }

        {this.state.arrPostData.length === 0 ? <View
          style={{
            height,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'transparent',
            alignSelf: 'center',
          }}
        ><Text
          style={{
            fontFamily: FONT_AVENIR_MEDIUM,
            fontSize: 20,
            color: BUTTON_BG_PURPAL,
          }}
        >There is no group available.</Text>
        </View> : <ScrollView
          showsVerticalScrollIndicator={false}
          style={{
            flex: 1,
          }}
          onMomentumScrollEnd={() => {
            // alert(this.state.isLoadMore);
            console.log('scroll end');
            if (this.state.isLoadMore) {
              this.state.offset = this.state.offset + 1;
              this.props.getGroupList({
                authorization: userLoginData.authorization,
                id: userLoginData.id,
                offset: this.state.offset,
              });
            }
          }}
        >

          {this.renderCoverPicDisplay(content.data)}
          {this.renderProfilePic(content.data)}
          <View
            style={{
              marginTop: 30,
              marginLeft: 10,
              marginRight: 10,
            }}
          >
            <Text
              style={{
                fontFamily: FONT_AVENIR_BOOK,
                fontSize: 15,
                color: TEXT_PURPAL,
                textAlign: 'justify',
              }}
              numberOfLines={this.state.numberOfLines}
            >
              {content.data.description}
            </Text>

            <TouchableOpacity
              style={{
                height: 20,
                backgroundColor: 'transparent',
                alignItems: 'flex-end',
                justifyContent: 'center',

              }}
              onPress={this.onPressReadMore.bind(this)}
            >
              <View
                style={{
                  marginRight: 10,
                  marginBottom: 0,
                  flexDirection: 'row',
                }}
              >
                <Text style={styles.replyStyle}>
                  {this.state.numberOfLines === 2 ? 'Read More' : 'Read Less...'}
                </Text>
              </View>
            </TouchableOpacity>
          </View>
          <FlatList
            style={{
              paddingTop: 5,
              flex: 1,
            }}
            scrollEnabled={false}
            data={this.state.arrPostData}
            ListEmptyComponent={this.renderList.bind(this)}
            renderItem={this.renderItem.bind(this)}
            ListFooterComponent={this.renderFooter}
            onMomentumScrollEnd={() => {
              alert(this.state.isLoadMore);
              console.log('scroll end');
              // if (this.state.isLoadMore) {
              //   this.state.offset = this.state.offset + 1;
              //   this.props.getGroupList({
              //     authorization: userLoginData.authorization,
              //     id: userLoginData.id,
              //     offset: this.state.offset,
              //   });
              // }
            }}
            keyExtractor={(item, index) => index}
          />
        </ScrollView>}


        <TouchableOpacity
          style={{
            alignContent: 'center',
            position: 'absolute',
            height: roundedCornerSize,
            width: roundedCornerSize,
            borderRadius: roundedCornerSize / 2,
            backgroundColor: TEXT_PURPAL,
            // left: width - roundedCornerSize - 30,
            // top: height - ((roundedCornerSize * 2) + 30),
            right: 30,
            bottom: 30,
          // marginTop: (width - 40),
          }}
          onPress={this.onPressPostGroup.bind(this)}
        >


          <View
            style={{ height: roundedCornerSize,
              width: roundedCornerSize,
              backgroundColor: 'transparent',
              alignContent: 'center',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Text
              style={{ backgroundColor: 'transparent',
                justifyContent: 'center',
                alignItems: 'center',
                fontFamily: 'Avenir Medium',
                fontSize: 30,
                textAlign: 'center',
                color: 'white' }}
            >+</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = {
  imageStyle: {
    width: 35,
    height: 35,
  },
  textStyle: {
    fontSize: 15,
    color: TEXT_PURPAL,
    fontFamily: FONT_AVENIR_MEDIUM,
    fontWeight: 'bold',
  },
  replyStyle: {
    fontFamily: FONT_AVENIR_BOOK,
    fontSize: 13,
    fontWeight: '500',
    color: 'black',
  },
  bioStyle: {
    justifyContent: 'flex-start',
    alignSelf: 'flex-start',
    margin: 10,
    fontSize: 15,
    fontFamily: FONT_AVENIR_BOOK,
    textAlign: 'justify',
  },
  textCreditStyle: {
    marginLeft: 10,
    fontSize: 15,
    fontFamily: FONT_AVENIR_BOOK,
    textAlign: 'right',
  },
  textCreditStaticStyle: {
    justifyContent: 'flex-start',
    alignSelf: 'flex-start',
    marginLeft: 10,
    fontSize: 15,
    marginTop: 10,
    fontFamily: FONT_AVENIR_BOOK,
  },
  box: {
    width: '80%',
    backgroundColor: 'white',
  },
  buttonTextStyle: { fontFamily: FONT_AVENIR_BOOK, fontSize: 15 },
  buttonHeightStyle: { height: 35 },
  shadowStyle: {
      // shadowColor: '#000000',

  },
};
const mapStateToProps = (state) => {
  const { data, isFetching, loadMoreGroup } = state.group;
  return { data, isFetching, loadMoreGroup };
};

export default connect(mapStateToProps, {
  getGroupList, report,
})(GroupDetailScreen);
/* <TouchableOpacity
  style={{
    alignContent: 'center',
    position: 'absolute',
    height: roundedCornerSize,
    width: roundedCornerSize,
    borderRadius: roundedCornerSize / 2,
    backgroundColor: 'white',
    right: 30,
    bottom: 30,
  }}
  onPress={this.onPressPostGroup.bind(this)}
>

  <Image
    source={IC_PLUS}
    style={{ height: roundedCornerSize,
      width: roundedCornerSize }}
  />
</TouchableOpacity> */

Header.js

import React from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Platform,
} from 'react-native';
import { BG_HEADER, IC_BACK } from '../icon';
import { HEIGHT_HEADER } from '../config/dimen';

// const { width } = Dimensions.get('window');
const HeaderButton = ({ title, onPress }) => (
  <TouchableOpacity
    onPress={onPress}
    style={[styles.buttonStyle]}
  >
    <Text style={[styles.textStyle]}>
      {title}
    </Text>
  </TouchableOpacity>
);

const HeaderButtonImage = ({ onPress, source }) => (
  <TouchableOpacity
    onPress={onPress}
    style={[styles.buttonStyle]}
  >
    <Image
      source={source}
      style={{
        width: 20,
        height: 20,
        resizeMode: 'center',
        alignSelf: 'center',
      }}
    />
  </TouchableOpacity>
);

const Header = props => (
  <View>
    <Image
      style={{
        height: HEIGHT_HEADER + (Platform.OS === 'ios' ? 14 : 0),
        width: '100%',
        position: 'absolute',
        // backgroundColor: 'pink',
      }}
      resizeMode="stretch"
      source={BG_HEADER}
    />
    { Platform.OS === 'ios' ? <View style={{ height: 20 }} /> : null}
    <View style={styles.containerStyle} >
      <Text
        style={{
          justifyContent: 'center',
          backgroundColor: 'transparent',
          alignSelf: 'center',
          fontFamily: 'Avenir Medium',
          fontSize: 20,
          fontWeight: '600',
          color: 'white',
          textAlign: 'center',
          position: 'absolute',
          width: props.width,
        }}
        numberOfLines={1}
      >{props.title}</Text>

      <TouchableOpacity
        style={[{
          width: 48,
          height: 48,
          backgroundColor: 'transparent',
          justifyContent: 'center',
          alignItems: 'center',
          alignSelf: 'flex-start',
        }]}
        onPress={props.onBack}
      >
        {props.isBackHide === true ? null : <Image
          source={IC_BACK}
          style={{ width: 20, height: 20, resizeMode: 'center' }}
        />}
      </TouchableOpacity>

      <View
        style={{ alignSelf: 'flex-end',
          position: 'absolute',
          backgroundColor: 'transparent',
        }}
      >
        {props.children}
      </View>
    </View>
  </View>
  );

const styles = {
  containerStyle: {
    height: Platform.OS === 'ios' ? 44 : HEIGHT_HEADER,
    // flex: 1,
    // flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  textStyle: {
    alignSelf: 'center',
    fontSize: 20,
    color: 'white',
    fontFamily: 'Avenir Medium',
  },
  buttonStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 10,
    marginRight: 10,
    height: 48,
    width: 48,
    alignSelf: 'center',
  },
};

export { Header, HeaderButton, HeaderButtonImage };