Vertical carousel not working inside scrollview

[ElegantSoft]

Is this a bug report, a feature request, or a question?

bug

<ScrollView
        style={styles.scrollStyle}
        contentContainerStyle={styles.scrollContent}
        bounces={false}
        // disableScrollViewPanResponder
        // nestedScrollEnabled
        // directionalLockEnabled={false}
      >
        <Image source={neck} style={styles.necKImage} />
        <View>
          <View style={{ marginHorizontal: 30 }}>
            {userCards.length === 0 ? (
              <View
                style={{ alignItems: "center", width: "100%", marginTop: 20 }}
              >
                <CardHolder
                  onPress={() =>
                    Actions.addcard({ freeBalance: userDetails.freeBalance })
                  }
                />
              </View>
            ) : (
              <View style={{ zIndex: 5555 }}>
                <Carousel
                  data={userCards}
                  renderItem={renderCard}
                  sliderHeight={270}
                  itemHeight={200}
                  // layout="stack"
                  vertical
                  loop
                  loopClonesPerSide={10}
                  useNativeDriver
                  layoutCardOffset={30}
                  inactiveSlideOpacity={1}
                  activeSlideAlignment={
                    Platform.OS === "android" ? "end" : "start"
                  }
                />
              </View>
            )}
          </View>
          <TouchableDebounce
            activeOpacity={0.5}
            onPress={() =>
              Actions.addcard({ freeBalance: userDetails.freeBalance })
            }
            style={{
              position: "absolute",
              bottom: -30,
              right: I18nManager.isRTL ? undefined : -0,
              left: I18nManager.isRTL ? -0 : undefined,
              zIndex: 2,
            }}
          >
            <Image
              source={add}
              style={{ width: 70, height: 70, zIndex: 2 }}
              resizeMode="contain"
            />
          </TouchableDebounce>
        </View>
        <Invoices makeOrderForItems={makeOrderForItems} />
        <HomeTransactions
          transactions={transactions}
          refreshing={false}
          onRefresh={getTransactions}
        />
      </ScrollView>

[ajacquierbret]

Hey @ElegantSoft ! I don't understand how it could work if both carousels (ScrollView and Carousel) are vertical, since ScrollView (being the container) is "grabbing" the user event before Carousel. Even with zIndex, I don't know if it could work, did you read official ScrollView docs ? Maybe you can find some clues there.

[NhaPCS]

I updated like this and it works like a charm

<Carousel
        data={reminders}
        layout="default"
        renderItem={item => renderItem(item.item)}
        activeSlideAlignment="center"
        sliderHeight={slideHeight}
        itemHeight={slideHeight}
        vertical
        nestedScrollEnabled // added this
        autoplay
        centerContent
        onSnapToItem={index => {
          setCurrentIndex(index);
        }}
      />

<ScrollView // use ScrollView of react-native-gesture-handler
        showsVerticalScrollIndicator={false}
        scrollEventThrottle={16}
        directionalLockEnabled={false}
        disableScrollViewPanResponder
        nestedScrollEnabled
        removeClippedSubviews={false}
      >

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2