renderItem({item}) {
        return (
            <Post
                data={item}
                onPressLike={this.onLikePost}
                addLike={this.props.addLikesPost}
                email={this.props.email}
                postComment={this.props.postComment}
                removeLike={this.props.removeLikesPost}
                fullName={this.props.firstname + ' ' + this.props.lastname}
            />
        );
    }
                     <AnimatedFlatList
                                extraData={this.state}
                                data={_.values(this.props.posts)}
                                renderItem={this.renderItem.bind(this)}
                                keyExtractor={(item) => {
                                    // console.log("Item", item.value.id);
                                    return item.value.socialHash + "";
                                    }}
                                backgroundColor='#edeaea'
                                style={{ paddingBottom: 7,  }}

                            />

class Post extends Component {
    constructor(props) {
        super(props);
        this.child = React.createRef();
        this.state = {
            title: '',
            post: '',
            likes: 0,
            userLiked: 0,
            first_name: '',
            last_name: '',
            timestamp: null,
            socialHash: 0,
            comments: null,
            id: null,
            isVisible: false,
            displayComments: false,
            typedComment: '',
            commentsText: '',
        };
    }

    onCommentPress() {
        this.props.data.value.comments[0].comments.push({
            poster: this.props.fullName,
            comment: this.state.typedComment,
            key: Math.random() * 10 + "",
            time_stamp: new Date()
        })
        this.setState({ commentsText: this.state.typedComment });
    }


    render() {
        return (
                <View >
                        <Text>{this.state.typedComment}</Text>
                        <View>
                                <Input
                                onChangeText={(typedComment) => {
                                    console.log("Changing Input", typedComment);
                                    this.setState({ typedComment });
                                }}
                                placeholder='Write a comment...'
                                />
                            <Button
                                onPress={this.onCommentPress.bind(this)}>
                                <Icon name={"paper-plane"} size={20} />
                            </Button>

                        </View>
            </View>
            );
        }
    }


const mapStateToProps = (state) => {
    const { commentText } = state.misc;
    return {
        commentText
    };
};

// This helps us to bind our dispatch function to props
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      ...Games
    },
    dispatch
  );

export default connect(mapStateToProps, mapDispatchToProps)(Post);