Wrapping carousel within ScrollView, carousel does not render

[Jacky9425]

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

Bug report, render bug

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

cannot be found

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

tested only on Android devices.

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

React-native : 0.59.6 react-native-snap-carousel: 3.8.0

Expected Behavior

expecting carousel to render within a ScrollView

Actual Behavior

Carousel does not render out within a ScrollView component.

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

1. Create a ScrollView wrapping the carousel
2. debug on physical devices
3. carousel does not show at all (if component contains sub-component other than carousel, those components still render out)

[Jacky9425]

Edit: Just tested out that, if i render normal text component, the carousel renders fine, but when render image component, the carousel does not render.

           <ScrollView style={{ flex: 1 }} nestedScrollEnabled={false}>
              <View style={{ flex: 1 }}>
                <Carousel
                  containerCustomStyle={{ flex: 1, backgroundColor: "tomato" }}
                  loop={true}
                  autoplay={false}
                  autoplayDelay={2000}
                  layout={"default"}
                  data={this.state.data.reverse()}
                  sliderWidth={width}
                  itemWidth={200}
                  itemHeight={200}
                  renderItem={({item}) => (
                      <View>
                        <Image
                          source={{ uri: "_some_working_url" }}
                          style={{ width: "100%", height: "100%", resizeMode: "stretch" }}
                        />
                      </View>
                  )}
                />
              </View>
            </ScrollView>

[Jacky9425]

Edit: Also, if the renderItem props is put this way, the carousel works fine.

 <View style={{ flex: 1 }}>
  <Image
    style={{ width: "100%", height: "100%", resizeMode: "contain" }}
    source={{ uri: item.imgSource }}
  />
  <Text style={{ height: 200, backgroundColor: "transparent", color: "transparent" }}>hello{item.imgSource}</Text>
</View>

the concept here its im using text component to force the item to render to the size i wanted, so the image shows in the carousel

[Jacky9425]

I've noticed, in the doc, mentioned not to put this component as a child under ScrollView component, will this be resolved soon? Also, if i forcefully rendered the component, the app freezes, will that be resolve too in future release? thank you

[lucastonon]

Any solutions to this? Using flex: 1 did not work for me

[sagarrs]

Any Solution for this ?

[sagarrs]

Any solutions to this? Using flex: 1 did not work for me

@lucastonon did you find the solution ?

[NewBieBR]

I found a solution for this. Wrap you Carousel component with a View and set the View height and width. Example

<ScrollView>
    <View style={{height: 300, width: '100%'}}>
        <Carousel.../>
    </View>
</ScrollView>

[whileMeAwakeMeCode]

@NewBieBR I did define height and width and it just worked, thank you dude

[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