Nativebase: refreshControl in tab

Created on 16 Aug 2017 · 13Comments · Source: GeekyAnts/NativeBase

Hello, after add package (zo0r/react-native-push-notification or facebook/react-native-fbsdk) loading wheel hangs on the swipe
Version

"dependencies": {
        "native-base": "^2.3.1",
        "react": "16.0.0-alpha.12",
        "react-native": "0.47.1",
        "react-native-push-notification": "^3.0.0"
    }

Code page

import React, { Component } from 'react';
import { AppRegistry, RefreshControl } from 'react-native'
import { Container, Header, Content, Tab, Tabs } from 'native-base';
export default class AwesomeNativeBase extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false
        };
    }
    updateContent() {
        this.setState({refreshing:true});
        setTimeout(()=>{
            this.setState({refreshing:false});
        },2000);
    }
    render() {
        return (
            <Container>
                <Header hasTabs />
                <Tabs initialPage={1}>
                    <Tab heading="Tab1">
                        <Content refreshControl={<RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={()=>{this.updateContent()}}/>
                        }>
                        </Content>
                    </Tab>
                    <Tab heading="Tab2">
                        <Content refreshControl={<RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={()=>{this.updateContent()}}/>
                        }>
                        </Content>
                    </Tab>
                    <Tab heading="Tab3">
                        <Content refreshControl={<RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={()=>{this.updateContent()}}/>
                        }>
                        </Content>
                    </Tab>
                </Tabs>
            </Container>
        );
    }
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

tab_bah

awaiting response

Source

Martin25699

Most helpful comment

@lmichailian the only fix is using react-native-tab-view

sitompul on 12 Mar 2018

👍2 👎1

All 13 comments

It's because you drag the tab into another tab while pulling the refresh trigger down. My workaround is to disable the sliding part or if you insist of doing the sliding refresh, you must check react-native-tab-view.

sitompul on 18 Aug 2017

@Martin25699 As @sitompul said, you are trying to change the Tabs while the refresh is triggered of one page, and both the Tabs have their own refresh functions. You can either lock the swipe functionality or use onChangeTab prop function and page prop to detect and trigger the refresh of the changed tab on swipe

shivrajkumar on 11 Sep 2017

@shivrajkumar this problem does not occur if these packages are not installed (zo0r / react-native-push-notification or facebook / react-native-fbsdk), as I wrote above. Can error somewhere else?

Martin25699 on 22 Sep 2017

@Martin25699 Do you have any handles of those packages being called while changing the tab?

shivrajkumar on 28 Sep 2017

@shivrajkumar No, these packages are only connected to the project, and made react-native link. In this example, they are not needed, but are needed on the project, where the error is repeated.

Martin25699 on 6 Oct 2017

@Martin25699 tried your example without react-native-push-notification. Did not feel like the issue is with the package. You can try shivraj's suggestion. Let us know if you face any issues.

akhil-geekyants on 10 Nov 2017

Closing the issue due to no response

akhil-geekyants on 20 Nov 2017

Same issue. I do not have react-native-push-notification nor react-native-fbsdk packages.
It's impossible to have refreshcontrol with tabs.. Each time you try to to pull to refresh you automatically swipe :-(