import { Carousel, CarouselRef } from '@amazon-devicesamazon-devices/vega-carousel'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Pressable, StyleSheet, Text } from 'react-native'
const FULL_COUNT = 18
const ITEM_WIDTH = 400
const ITEM_HEIGHT = 140
const GAP = 20
type DataType = { key: string; label: string }
//data set (20 items)
const FULL_DATA: DataType[] = Array.from({ length: FULL_COUNT }, (_, i) => ({
key: `item-${i}`,
label: `Item ${i}`,
}))
const Item = ({
label,
index,
}: {
label: string
index: number
}) => {
const [isFocused, setIsFocused] = useState(false)
return (
<Pressable
style={[styles.item, isFocused && styles.itemFocused]}
onFocus={() => {
setIsFocused(true)
}}
onBlur={() => setIsFocused(false)}
>
<Text style={styles.text}>{label}</Text>
</Pressable>
)
}
export const ScrollToIssue = () => {
const data = FULL_DATA
const dataAdapter = useMemo(
() => ({
getItem: (index: number) => data[index],
getItemCount: () => data.length,
getItemKey: ({ item }: { item: DataType }) => item.key,
notifyDataError: () => false,
}),
[data],
)
const ref = useRef<CarouselRef<string>>(null)
useEffect(() => {
ref.current?.scrollTo(16, true)
})
return (
<Carousel
ref={ref}
hasPreferredFocus
orientation="vertical"
containerStyle={styles.carousel}
dataAdapter={dataAdapter}
itemStyle={{ itemPadding: GAP, pressedItemScaleFactor: 1 }}
selectionStrategy="pinned"
trapSelectionOnOrientation
pinnedSelectedItemOffset="center"
renderItem={({ item, index }) => (
<Item label={item.label} index={index} />
)}
/>
)
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: 400,
padding: 50,
},
status: {
color: 'white',
fontSize: 28,
marginBottom: 8,
},
hint: {
color: 'green',
fontSize: 22,
marginBottom: 18,
},
carousel: {
height: 1080,
width: ITEM_HEIGHT + 20,
},
item: {
width: ITEM_WIDTH,
height: ITEM_HEIGHT,
backgroundColor: '#444444',
alignItems: 'center',
justifyContent: 'center',
},
itemFocused: {
backgroundColor: 'red',
},
text: {
color: 'white',
fontSize: 35,
},
})
you can run this snippet and pass different values to scrollTo, same result. As, we do not have option to specify offset like flat list and initialStartIndex has become buggy as I described above, This does not left us with much choice.