Nativebase: Sometimes tab views don't display until they are scrolled

[booboothefool]

[sankhadeeproy007]

Hi, can you narrow down your test cases and let us know the specific code which is causing this effect?

[booboothefool]

Looks like this might be a React Native ListView issue: https://github.com/facebook/react-native/issues/8607, however the ListView always works when I remove the tabs.

class ConversationsTab extends Component {

    constructor(props) {
        super();
    }

    renderRow(conversation) {
        return (
            <TouchableHighlight onPress={() => {this.props.navigator.push(Routes.getConversationRoute(conversation));}}>
                <View>
                    <Card>
                        <CardItem>

                            <Thumbnail source={require('../../images/avatar-placeholder.png')} />
                            <Text>{_.reject(conversation._participants, (p) => p === Meteor.userId()).map(p => Meteor.collection('users').findOne({_id: p}).username).join(' ')}</Text>
                            <Text note>{conversation.lastMessage ? conversation.lastMessage.body : null}</Text>

                        </CardItem>
                    </Card>
                </View>
            </TouchableHighlight>
        );
    }

    render() {
        return (
            <MeteorComplexListView style={{flex:1}}
                key='_id'
                elements={() => this.props.conversations}
                renderRow={this.renderRow.bind(this)}
            />
        );
    }
}

class Messages extends Component {

    constructor(props) {
        super();
    }

    render() {
        return (
            <Container theme={myTheme}>
                <View style={{flex: 1}}>

                    <Tabs>
                        <ConversationsTab tabLabel="Direct"
                            navigator={this.props.navigator}
                            conversations={this.props.conversations.filter(c => c._participants.length === 2)}
                        />

                        <ConversationsTab tabLabel="Group"
                            navigator={this.props.navigator}
                            conversations={this.props.conversations.filter(c => c._participants.length > 2)}
                        />
                    </Tabs>

                </View>
                <Content></Content>
            </Container>
        );
    }
}

[booboothefool]

To confirm, yes this is a React Native <ListView> issue (MeteorListView is based off that). Although I don't understand it, the quick fix seems to be to put removeClippedSubviews={false} on the ListView/MeteorListView e.g.

<ListView
    ...
    removeClippedSubviews={false}
/>

Native Base tabs working great! 👍

[wzf]

in my case, " removeClippedSubviews={false} " can not do well. At last i did find 8607 . Just replace RCTView with 8607.