React-native-gifted-chat: maxHeight incorrect

[maxs15]

Hey @FaridSafi !

Awesome job on this chat ! 👏

I'm having an issue with the size of the chat, the Input is taking most of the screen sometimes (Screenshot below).

After investigating it looks like the height returned by onLayout is 0 here.
The correct height is returned on a second call of onLayout, I've managed to fix the issue just by adding if (layout.height <= 0) return; that way the correct height will be used on the next call.

Are you aware of this issue ? Does it seem like the right way to fix it ?
I can push you a PR with the fix if you want to 👍

Thanks

[FaridSafi]

Hello, did you wrap the Chat inside a flex: 1 container ?

[maxs15]

Yes I did (Using RN 0.30)

[FaridSafi]

Can you try to remove this condition please https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/GiftedChat.js#L414
So it will reset height on iOS too

[maxs15]

It works but the screen is kind of flickering..
Better get the height before the initialization in my opinion

[FaridSafi]

I will try to find another workaround for the next release
Can I ask you a code example to reproduce this issue ?

[maxs15]

There is just a basic <GiftedChat user={this.props.user} locale={locale} messages={this.props.messages}/> in my view.
But I'm using react-native-navigation to manage navigation between my views.
It may be the cause of the layout recalculation.. but I think it's a good thing to handle the case where the layout would change because the chat becomes unusable otherwise

[emirdeliz]

+1

[FaridSafi]

@emirdeliz are you using react-native-navigation?

[emirdeliz]

@FaridSafi I'm using emulator (iphone 4s)

[emirdeliz]

I'm using nativebase too.

My code is

import React, { Component, PropTypes } from 'react'
import { Container, Content, Header, Title, Button, Icon,
    Text, List, ListItem, View } from 'native-base'

import { GiftedChat } from 'react-native-gifted-chat'

export default class Home extends Component {

    constructor(props) {
        super(props)

        this.state = { messages: [] };
        this.onSend = this.onSend.bind(this);
    }
    componentWillMount() {
        this.setState({
            messages: [
                {
                    _id: 1,
                    text: 'Hello developer',
                    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
                    user: {
                        _id: 2,
                        name: 'React Native',
                        avatar: 'https://facebook.github.io/react/img/logo_og.png',
                    },
                },
            ],
        });
    }
    onSend(messages = []) {
        this.setState((previousState) => {
            return {
                messages: GiftedChat.append(previousState.messages, messages),
            };
        });
    }

    render() {
        return (
            <Container>
                <Header>
                    <Button transparent onPress={ () => this.props.navigate.pop() }>
                         <Icon name="ios-arrow-back" />
                    </Button>
                    <Title>{ this.props.professional.name }</Title>
                </Header>
                <Content>
                    <GiftedChat  messages={this.state.messages}
                        onSend={this.onSend}
                        user={{
                          _id: 1,
                        }}
                      />
                </Content>
            </Container>
        );
    }
}

[emirdeliz]

I fix my problem with this

<Container>
    <Header>
        <Button transparent onPress={ () => this.props.navigate.pop() }>
             <Icon name="ios-arrow-back" />
        </Button>
        <Title>{ this.props.professional.name }</Title>
    </Header>
    <View>
        <GiftedChat messages={ this.state.messages } renderActions={ this.buildCustomActions }
            onSend={ this.onSend } user={{ _id: 1}} />
    </View>
</Container>

The cause of problem is tag Content

[zhouanbo]

I had the exact same issue as @maxs15, fixed the issue by following his suggestions. Thanks!