Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header button onPress not fire sometimes

See original GitHub issue

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)

Issue Analytics

State:
Created 6 years ago
Comments:9 (1 by maintainers)

Top GitHub Comments

12reactions

shivrajkumarcommented, Jun 29, 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.

1reaction

hebbiancommented, Sep 10, 2018

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