Web support

[brentvatne]

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

// hello world

[devvit]

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;
}

[RWOverdijk]

Is this still a thing? Because I just finished a nice tab component only to find out I can't use it 😢

[biaji]

hi guys,

Any progress or alternative suggestions here ?

[michaelroevievictoria]

still 2024 issue :(