Cannot Nest In ScrollView

[ReneeGrantMA]

I need to be able to nest the TimePicker within a ScrollView, however because this uses a Flatlist I get this Error:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

Example:
<ScrollView style={styles.content} nestedScrollEnabled={true}> <TimerPicker padWithNItems={2} hourLabel="hour" minuteLabel="min" hideSeconds LinearGradient={LinearGradient} onDurationChange={duration => setTime({ hour: duration.hours, minute: duration.minutes }) } styles={{ theme: 'light', backgroundColor: BrandColor.Beige, position: 'fixed', top: 0, pickerItem: { fontSize: 18, color: tinycolor(StandardColor.Charcoal) .lighten(20) .toRgbString(), }, pickerLabel: { fontSize: 20, right: -20, marginBottom: 4, fontWeight: 'normal', color: StandardColor.Charcoal, }, pickerLabelContainer: { width: 60, }, pickerItemContainer: { width: 150, height: 35, }, }} /> </ScrollView>

[troberts-28]

Hey @ReneeGrantMA 👋

I'll take a look at this. I had never tried nesting it inside a ScrollView.

Does your app actually crash or show abnormal behaviour when you do nest it in the ScrollView? That is a very common React Native warning that appears whenever you nest a ScrollView in another, and the picker uses ScrollViews to allow you to scroll between the numbers and pick values.

[troberts-28]

@ReneeGrantMA Closing this as I can't see a clear path to support nesting the TimerPicker component in a vertical ScrollView. For your scenario, I'd suggest using the modal instead, which works fine regardless of the container.

I've acknowledged this limitation in the docs 👍

[troberts-28]

Hey @ReneeGrantMA, just letting you know that I figured out a way of making the TimerPicker component work in a vertical ScrollView in the latest version v1.9.0. You'll still get the warning from React Native, but the picker should now scroll.