Open brentvatne opened 4 years ago
A few codes in my project, it's work well with react-native-web, maybe helpful. The PR will make this easier.
# coffeescript
ViewPager = forwardRef (props, ref) ->
scrollView = null
dataOrientation = if props.orientation == 'vertical' then { 'data-snap-container-vertical': true } else { 'data-snap-container-horizontal': true }
useImperativeHandle(ref, () -> {
snapToItem: () ->
console.log 'scroll to ended'
scrollView.scrollToEnd()
})
updated = false
useEffect () ->
unless updated
console.log 'updated'
scrollView.scrollToEnd()
updated = true
return
elmts = React.Children.toArray(props.children)
<ScrollView style={{}}
contentContainerStyle={{ flex: 1 }}
horizontal={props.orientation != 'vertical'}
nestedScrollEnabled={true}
onLayout={props.onLayout}
{dataOrientation...}
ref={(r) -> scrollView = r}>
{elmts.map((elmt, index) ->
<View key={index} style={{ width: '100%', height: '100%' }} data-snap-child={true}>
{elmt}
</View>
)}
</ScrollView>
// css style
[data-snap-container-horizontal] {
-webkit-scroll-snap-type: mandatory;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-points-x: repeat(100%);
scroll-snap-points-x: repeat(100%);
}
[data-snap-container-vertical] {
-webkit-scroll-snap-type: mandatory;
scroll-snap-type: y mandatory;
-webkit-scroll-snap-points-y: repeat(100%);
scroll-snap-points-y: repeat(100%);
}
[data-snap-child] {
scroll-snap-align: start;
overflow: hidden;
}
Is this still a thing? Because I just finished a nice tab component only to find out I can't use it 😢
hi guys,
Any progress or alternative suggestions here ?
still 2024 issue :(
Feature Request
We should have an API compatible implementation for web
Why it is needed
Building universal apps with React Native is the dream
Possible implementation
Unknown
Code sample