Flex item sizing bug on react-native-web

[yangm97]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-draggable-grid@2.1.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-draggable-grid/built/src/block.js b/node_modules/react-native-draggable-grid/built/src/block.js
index c107961..8fb7584 100644
--- a/node_modules/react-native-draggable-grid/built/src/block.js
+++ b/node_modules/react-native-draggable-grid/built/src/block.js
@@ -6,11 +6,9 @@ var react_native_1 = require("react-native");
 exports.Block = function (_a) {
     var style = _a.style, dragStartAnimationStyle = _a.dragStartAnimationStyle, onPress = _a.onPress, onLongPress = _a.onLongPress, children = _a.children, panHandlers = _a.panHandlers;
     return (<react_native_1.Animated.View style={[styles.blockContainer, style, dragStartAnimationStyle]} {...panHandlers}>
-      <react_native_1.Animated.View>
         <react_native_1.TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress}>
           {children}
         </react_native_1.TouchableWithoutFeedback>
-      </react_native_1.Animated.View>
     </react_native_1.Animated.View>);
 };
 var styles = react_native_1.StyleSheet.create({
diff --git a/node_modules/react-native-draggable-grid/src/block.tsx b/node_modules/react-native-draggable-grid/src/block.tsx
index 4caea92..3d8e877 100644
--- a/node_modules/react-native-draggable-grid/src/block.tsx
+++ b/node_modules/react-native-draggable-grid/src/block.tsx
@@ -28,11 +28,9 @@ export const Block: FunctionComponent<BlockProps> = ({
 }) => {
   return (
     <Animated.View style={[styles.blockContainer, style, dragStartAnimationStyle]} {...panHandlers}>
-      <Animated.View>
-        <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress}>
-          {children}
-        </TouchableWithoutFeedback>
-      </Animated.View>
+      <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress}>
+        {children}
+      </TouchableWithoutFeedback>
     </Animated.View>
   )
 }

This issue body was partially generated by patch-package.

Issue fixed by the above patch: not able to flex-grow an item on web.

Reproduction(ish):

...
  const onRenderItem = (item: any) => (
    <View style={{ flex: 1, flexDirection: 'row' }}>
      {/* your component here */}
    </View>
  )

return (
  <DraggableGrid
        key={numColumns}
        numColumns={numColumns}
        renderItem={onRenderItem}
        style={{ flex: 1 }}
...

[SHISME]

I want know what is problem before you solved it