Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

React native TouchableOpacity and Pressable responding really slowly

$
0
0

I have a mapped list of Text in TouchableOpacity components in a react-native Modal displayed like this:

<ModalLayout        showModal={active}        toggleShowModal={toggleActive}        title={'Select '+ label}        size="md"><View>          {options?.map((option: string) => (<TouchableOpacity              key={option}              onPress={() => selectOption(option)}              className="py-2 my-1"><Text className={text}>{option}</Text></TouchableOpacity>          ))}</View></ModalLayout>

IGNORE THE className atrributes, they are from nativewind; this is react native, not react.

Might be irrelevant, but the The modal layout's code looks like this:

<Modal      visible={showModal}      animationType="slide"      onRequestClose={toggleShowModal}      transparent={true}      onTouchStart={toggleShowModal}><TouchableWithoutFeedback onPress={toggleShowModal}><View className="flex-1 bg-black/40"><TouchableWithoutFeedback onPress={() => null}><View              className={`overflow-hidden ${                dark ? 'bg-[#efefef]' : 'bg-white'              } ${size === 'lg'&& 'flex-1'} ${                size === 'md'&& !hAuto && 'flex-[0.94]'              } ${size === 'sm'&& 'h-auto'} shadow-2xl ${                size === 'sm' ? 'my-auto mx-5' : 'mt-auto'              } ${size === 'md'&& 'rounded-t-3xl'} ${                size === 'sm'&& 'rounded-xl'              } ${hAuto && 'h-auto'}`}              style={styles.elevation}><View                className={`py-3 px-3 ${                  title && 'border-b'                } border-gray-300 bg-white flex-row items-center`}><TouchableOpacity                  className="bg-white rounded-full p-1"                  onPress={toggleShowModal}><XMarkIcon color="black" size={20} /></TouchableOpacity><Text                  className={`${text} font-bold flex-[0.87] py-1 text-center`}>                  {title}</Text></View>              {noScroll ? (<View className={`flex-1 ${!noPadding ? 'py-5 mx-3' : ''}`}>                  {children}</View>              ) : (<ScrollView className={` ${!noPadding ? 'py-5' : ''}`}><View className={`${!noPadding ? 'mx-3' : ''}`}>                    {children}</View></ScrollView>              )}              {bottomElement && (<View className="p-3 border-t border-gray-300">                  {bottomElement}</View>              )}</View></TouchableWithoutFeedback></View></TouchableWithoutFeedback><Toast /></Modal>

The onPress handler delays for an awfully long time and I'm not sure what I can do about it. I tried adding the following snippet in the entry file:

import {TouchableOpacity} from 'react-native';TouchableOpacity.defaultProps = {  ...(TouchableOpacity.defaultProps || {}),  delayPressIn: 0,};

But it still delays for way longer than it should.


Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>