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.

[BUG] List item onPress fired with a loooooong delay (after 3 or 4 second)

See original GitHub issue

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

List item onPress fired with a loooooong delay (after 3 or 4 second)

Actual behaviour

Steps to reproduce (code snippet or screenshot)

This is my SideMenu code:

import React, { Component } from 'react';
import { Image, Text, View} from 'react-native';
import { Container, Content, List, ListItem, Drawer, Header, Title, Button, Left, Right, Body, Icon,
    Separator} from 'native-base';
import styles from '../styles/sideMenu';
import {observer} from 'mobx-react/native';
@observer
export default class SideMenu extends Component {
    constructor(props) {
        super(props);

        this.pressMenuItem = this.pressMenuItem.bind(this);
    }
    pressMenuItem(pageState) {
        this.props.store.pageState = pageState;
    }
    render () {
        const MenuComponent = (
            <Container>
                <Header>
                   ...
                </Header>
                <Content
                    style={{ flex: 1, flexDirection: 'column', backgroundColor: '#fff', top: -1 }}
                >
                    ...
                    <List>
                        <ListItem iconRight style={{marginLeft: 0}} onPress={() => {
                            console.warn("click home");
                            this.pressMenuItem("home")
                        }}>
                            <Right><Icon name="arrow-back" /></Right>
                            <Body><Text style={[styles.englishText, {textAlign: 'center'}]}>Home</Text></Body>
                            <Right><Icon name="home" /></Right>
                        </ListItem>
...
                    </List>

                </Content>
            </Container>
        );
        return (
            <Drawer
                content={MenuComponent}
                tapToClose={true}
                openDrawerOffset={0.4} // 20% gap on the right side of drawer
                closedDrawerOffset={-3}
                panCloseMask={0.90}
                panOpenMask={0.90}
                tweenHandler={(ratio) => ({
                    main: { opacity:(2-ratio)/2 }
                })}>
                { this.props.children }
            </Drawer>
        )
    }
}

Screenshot of emulator/device

menupressdelay Please see delay between when I tap on Home button in SideMenu and when you see console.warn("click home"); output.

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

I don’t know about ios but I’m in Nexus 7 Tab with Android 5.1.1

Issue Analytics

State:
Created 6 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

7reactions

Bundascommented, Mar 11, 2018

@akhil-geekyants What? It maybe solves his problem but it certainly does not solve the bug itself…

2reactions

akhil-gacommented, Nov 8, 2017

@mnlbox FlatList with ListItem

listitem

Top Results From Across the Web

onLongPress (and delayLongPress) triggers immediately #4944

After adding delayLongPress i figured out that it's "stealing" 1000ms from the delay, and I guess the default delay is 1000, so it's...

onPress fires immediately in ListItem when there is a short ...

In Other words, if i do a natural scroll on the list view the first item will trigger on fire. How to delay...

Common bugs in React Native ScrollView and how to fix them

React Native's ScrollView component is ubiquitous, but its implementation can sometimes lead to mistakes. Learn what to look out for here.

The 10 Most Common JavaScript Issues Developers Face

If you need help figuring out why your JavaScript isn't working, consult this list of the 10 most common JavaScript issues from a...

[TileService] Delayed execution of the onClick() code ... - Issue Tracker

In ACTIVE_TILE state, requestListeningState() should be fired right after the user swipes down and the quick settings menu appears, to avoid the delayed...