View height regression caused by pagingEnabled wrapper div

[brunolemos]

As first reported here, I investigated and got to the root cause.

The problem

Regression introduced when upgrading from 0.9.9 to 0.10.0+:

Before (correct)	After (wrong)

How to reproduce
https://codesandbox.io/s/lyv4oywmv9?fontsize=14

It seems there is a new div wrap when using pagingEnabled and since it doesn't have a full height this happens.

Steps to reproduce:

1. <FlatList horizontal pagingEnabled ... />
2. renderItem with <View style={{ height: '100%' }} ... />
3. Works on 0.9.9, breaks on 0.10.0

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.11.1
• React (version): 16.8.4
• Browser: Chrome latest

[brunolemos]

Workaround I'm currently using:

return (
  <FlatList
    ref={flatListRef}
    data-paging-enabled-fix
    ...
  />
)

[data-paging-enabled-fix]  > div > div > div {
  height: 100%;
}

[petrbela]

Note that in RNW >=0.13:

Forwarding of data-* props is no longer supported. Use dataSet instead. For example, dataSet={{ someName: 1 }}

So to achieve the hotfix with the css provided above, you can use:

return (
  <FlatList
    dataSet={{ 'paging-enabled-fix': true }}
    ...
  />
)

Here's the specific implementation:

react-native-web/packages/react-native-web/src/modules/createDOMProps/index.js

Lines 90 to 100 in 9ed9231

	// dataSet
	if (dataSet != null) {
	for (const prop in dataSet) {
	if (hasOwnProperty.call(dataSet, prop)) {
	const value = dataSet[prop];
	if (value != null) {
	domProps[`data-${prop}`] = value;
	}
	}
	}
	}

[nandorojo]

Just confirming that I'm getting this with RNW 0.14.2. @brunolemos thanks for posting your solution.

For anyone using this with Next.js (+ Expo), this is my solution (with styled-jsx, native to Next.js):

<View sx={{ flex: 1 }} onLayout={onLayout}>
  <Animated.FlatList
    data={images}
    ref={flatlist}
    keyExtractor={(item) => item.url}
    renderItem={({ item }) => <ImageCarouselItem height={height} image={item} width={width} />}
    extraData={{ width }}
    onScroll={event(
      [
        {
          nativeEvent: {
            contentOffset: { x: scrollX }
          }
        }
      ],
      {
        useNativeDriver
      }
    )}
    // @ts-ignore
    dataSet={{ 'paging-enabled-fix': true }}
    pagingEnabled
    horizontal
    getItemLayout={(_, index) => {
      return {
        length: width,
        offset: width * index,
        index
      }
    }}
    // viewabilityConfig={viewabilityConfig}
  />
  {Platform.OS === 'web' && (
    <style jsx>{`
      [data-paging-enabled-fix] > div > div > div {
        height: 100%;
      }
    `}</style>
  )}
</View>