Nativebase: Header button onPress not fire sometimes

Created on 24 Jun 2017 · 9Comments · Source: GeekyAnts/NativeBase

Hi! I try to mix a header button and drawer to create something like kitchensink app but in my app header button onPress not fire sometimes. I add two Console.warn for see when it's onPress fire but sometimes it's not fire. Is it a bug or I used drawer in a wrong way?
Can you help me to fix this?

react-native, react and native-base version

"native-base": "^2.1.5",
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",

Expected behaviour

Header button onPress not fire sometimes

Actual behaviour

Steps to reproduce (code snippet or screenshot)

This is my index.android.js:

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './app/';

AppRegistry.registerComponent('MyApp', () => App);

I try open a drawer component when a header button click and use a code like this: (/app/index.js)

import React, { Component } from 'react';
import { View } from 'react-native';
import Home from './home';
import { Container, Content, List, ListItem, Drawer, Text, Header, Title, Button, Left, Right, Body, Icon,
    Separator} from 'native-base';


export default class App extends Component {

    closeDrawer = () => {
        console.warn("close called");
        this.drawer._root.close()
    };
    openDrawer = () => {
        console.warn("open called");
        this.drawer._root.open()
    };

    render () {
        const MenuComponent = (
            <Container>
                <Header>
                    <Left style={{ flex: 1}} />
                    <Body style={{ flex: 1, alignItems: 'center'}}>

                    </Body>
                    <Right style={{flex: 1, flexDirection: 'row-reverse', alignItems: 'center',
                        justifyContent: 'flex-start'}}>
                        <Button transparent>
                            <Icon name='close' onPress={() => this.closeDrawer()}/>
                        </Button>
                        <Title>Menu Items</Title>
                    </Right>
                </Header>
                <Content
                    style={{ flex: 1, backgroundColor: '#fff', top: -1 }}
                >
                    <List>
                        <ListItem>
                            <Text style={{flex: 1, textAlign: 'center'}}>Home</Text>
                        </ListItem>
                        <ListItem>
                            <Text style={{flex: 1, textAlign: 'center'}}>Search</Text>
                        </ListItem>
                        <ListItem>
                            <Text style={{flex: 1, textAlign: 'center'}}>"Exit</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
        const drawerStyles = {
            drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
            main: {paddingRight: 3},
        };


        return (
            <Drawer
                ref={(ref) => { this.drawer = ref; }}
                side="right"
                type="overlay"
                content={MenuComponent}
                tapToClose={true}
                openDrawerOffset={0.4} // 40% gap on the right side of drawer
                panCloseMask={0.2}
                closedDrawerOffset={-3}
                styles={drawerStyles}
                tweenHandler={(ratio) => ({
                    main: { opacity:(2-ratio)/2 }
                })}>
                <Home openDrawer={this.openDrawer.bind(this)}/>
            </Drawer>
        )


    }

}

And this is my Home component: (/app/home.js)

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    StatusBar,
    Image,
    Dimensions
} from 'react-native';

import Swiper from 'react-native-swiper';
import styles from './styles';


import { Grid, Col, Row, Card, Text } from 'react-native-elements';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';

export default class Home extends Component {


    render() {
        return (
            <Container>
                <Header>
                    <Left style={{ flex: 1}} />
                    <Body style={{ flex: 1, alignItems: 'center'}}>
                    </Body>
                    <Right style={{flex: 1, flexDirection: 'row-reverse', alignItems: 'center',
                        justifyContent: 'flex-start'}}>
                        <Button transparent>
                            <Icon name='menu' onPress={this.props.openDrawer}/>
                        </Button>
                        <Title>App Title</Title>
                    </Right>
                </Header>
                <Content>
                    <Swiper style={styles.wrapper} height={240} autoplay={ true }
                            onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
                            dot={<View style={{backgroundColor: '#ffffff', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
                            activeDot={<View style={{backgroundColor: '#ffffff', width: 10, height: 10, borderRadius: 5, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
                            paginationStyle={[styles.overlay, styles.center, {
                                height: 30
                            }]} loop>
                        // render swiper image
                    </Swiper>
                </Content>
                <Footer>
                    <FooterTab>
                        <Button full>
                            <Text>Footer</Text>
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

Screenshot of emulator/device

issue982

Is the bug present in both ios and android or in any one of them?

Any other additional info which would help us debug the issue quicker.

I test it on an android 5.1.1 device (Nexus 7 Tab)

Source

mnlbox

Most helpful comment

@mnlbox You have onPress with Icon component, which should be in Button.
Adding the onPress function in Button instead of Icon will resolve your issue.

shivrajkumar on 29 Jun 2017

👍6 ❤3 😄3

All 9 comments

I update this question and add git animation.

mnlbox on 24 Jun 2017

I think it's related to #847

mnlbox on 25 Jun 2017

@SupriyaKalghatgi are you any suggestion to fix this?

/CC: @sankhadeeproy007

mnlbox on 29 Jun 2017

I think it's related too #662

mnlbox on 29 Jun 2017

@mnlbox You have onPress with Icon component, which should be in Button.
Adding the onPress function in Button instead of Icon will resolve your issue.

shivrajkumar on 29 Jun 2017

👍6 ❤3 😄3

@shivrajkumar oh man it's a silly mistake. 🙈 You save me. 👍
It's fixed now.
Sorry for this issue guys.

mnlbox on 29 Jun 2017

September, 2018, And I still have this issue, a button in the header.
I've already changed the onPress to the button, and still the onPress doesn't fired