Quantcast
Channel: Active questions tagged touchablewithoutfeedback - Stack Overflow
Viewing all articles
Browse latest Browse all 47

ScrollView component is not working properly inside Pressable and TouchableWithoutFeedback

$
0
0

enter image description hereI have customize my own modal in react native. Here is the code i have written.

<Modal  animationType="slide"  transparent={true}  visible={visible}  onRequestClose={onDismiss}  statusBarTranslucent><Pressable style={[styles.container, animatedStyles]} onPress={onDismiss}><TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}><KeyboardAvoidingView        behavior={keyboardAvoidingBehavior}        style={styles.keyboardAvoidingViewStyles}><View style={styles.contentContainer}><View style={styles.modalStretcher} />          {withCloseButton && (<TouchableOpacity              style={[GlobalStyle.alignmentCenter, styles.modalCloseButton]}              onPress={onPressCloseButton}><Images.svg.CrossIcon                color={colors.primary}                height={heightPixel(22)}              /></TouchableOpacity>          )}<ScrollView            style={styles.scrollView}            showsVerticalScrollIndicator={false}            contentContainerStyle={GlobalStyle.PB30}><CustomTextInput              name="receiptNo"              errors={formik.touched.receiptNo && formik.errors}              onChangeText={formik.handleChange('receiptNo')}              value={formik.values.receiptNo}              placeholder={'001212'}              label={i18n.t('receiptNo')}              isRequired={false}              onBlur={formik.handleBlur('receiptNo')}            /><CustomDatePicker              label={i18n.t('date')}              isOpen={isDatePickerOpen}              date={formik.values.date}              onOpenDatePicker={() => setIsDatePickerOpen(true)}              onConfirm={date => {                formik.setFieldTouched('date', true);                formik.setFieldValue('date',                  new Date(date.timestamp).toISOString(),                );                setIsDatePickerOpen(false);              }}              onCancel={() => {                setIsDatePickerOpen(false);                formik.setFieldTouched('date', true);              }}              placeholder={                formik.values?.date                  ? moment(formik.values?.date).format('DD/MM/YYYY')                  : 'DD/MM/YYYY'              }              errors={formik.touched.date && formik.errors}              name="date"              viewStyle={GlobalStyle.mt10}            /><CustomTextInput              name="amount"              errors={formik.touched.amount && formik.errors}              onChangeText={formik.handleChange('amount')}              value={formik.values.amount}              placeholder={'200.00'}              label={i18n.t('amount')}              isRequired={false}              viewStyle={GlobalStyle.mt10}              onBlur={formik.handleBlur('amount')}              keyboardType="number-pad"            /><CustomTextInput              name="description"              errors={formik.touched.description && formik.errors}              onChangeText={formik.handleChange('description')}              value={formik.values.description}              placeholder={i18n.t('description')}              label={i18n.t('description')}              isRequired={false}              viewStyle={GlobalStyle.mt10}              onBlur={formik.handleBlur('description')}            /><View style={[GlobalStyle.mt20, styles.buttonContainer]}><View style={styles.container}><Button                  title={i18n.t('uploadReceipt')}                  onPress={() => selectFile()}                /><View style={[GlobalStyle.MH10, styles.imageUploadView]}><Text style={styles.imageText} numberOfLines={2}>                    {formik.values.receiptFile.name}</Text></View></View><Text style={styles.infoText}>                {i18n.t('docXlsx5MbEach') + ` ${maxFileSize} mb each)`}</Text></View><View style={GlobalStyle.PT20}><Button                title={i18n.t('save')}                onPress={() => formik.handleSubmit()}                disabled={                  formik.errors.description ||                  formik.errors.receiptNo ||                  formik.errors.amount ||                  formik.errors.date ||                  !formik.values.receiptFile.uri                    ? true                    : false                }              /></View></ScrollView><View            style={[              styles.buttonsWrapper,              buttonsWrapperStyle,              {justifyContent: buttonAlignment},              {                paddingVertical:                  isMainButtonVisible || isCancelButtonVisible                    ? pixelSizeVertical(20)                    : 0,              },            ]}>            {isMainButtonVisible && (<Button                title={buttonTitle}                onPress={() => {                  animatedValue.value = withTiming(0, {duration: 300});                  setTimeout(() => {                    onSubmit && onSubmit();                  }, 250);                }}                disabled={isSubmitBtnDisabled}              />            )}            {isCancelButtonVisible && (<TouchableOpacity                onPress={() => {                  animatedValue.value = withTiming(0, {duration: 300});                  setTimeout(() => {                    onPressCancelButton && onPressCancelButton();                  }, 250);                }}                style={styles.cancelButtonWrapper}><Text style={styles.cancelButtonStyles}>                  {i18n.t('cancel')}</Text></TouchableOpacity>            )}</View></View></KeyboardAvoidingView></TouchableWithoutFeedback></Pressable></Modal>

<Pressable/> is the component used to dismiss the modal. <TouchableWithoutFeedback/> is used for dismiss the keyboard. inside those i have <ScrollView/> component.

Scrolling is only working when i scroll on pressing form inputs not other empty spaces.

It should work when i scroll anywhere inside scrollView area not only items.


Viewing all articles
Browse latest Browse all 47

Trending Articles



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