alignContent default value

[rosko]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

In <View> component's alignContent style property, react-native-web uses the CSS default value of stretch instead of flex-start (according to Yoga layout engine that RN uses)

Expected behavior

I guess it should be either fixed or at least documented.

Steps to reproduce

import { Text, SafeAreaView, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.view}>
        <Text style={styles.block}>Text 1</Text>
        <Text style={styles.block}>Text 2</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  view: {
    flexWrap: 'wrap',
    // alignContent: 'flex-start',
    width: '100%',
    height: 100,
    gap: 20,
    backgroundColor: 'lightcyan',
  },
  block: {
    width: 100,
    height: 100,
    backgroundColor: 'darkseagreen',
  },
});

Test case

https://snack.expo.dev/@rosko/view-aligncontent-default-value

Additional comments

No response

[necolas]

Yoga and RN have different defaults

[rosko]

But for alignContent, RN has the default value of flex-start. Just check the example and link I provided.
It's obvious inconsistency:
Web:

iOS:

Android:

[rosko]

Also, I copied the example to the code sandbox: https://codesandbox.io/p/devbox/56ngyw

[rosko]

Also, I dug the RN code a little bit and here are some proofs as well:
https://github.com/facebook/react-native/blob/v0.76.5/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java#L544

https://github.com/facebook/react-native/blob/v0.76.5/packages/react-native/ReactCommon/yoga/yoga/style/Style.h#L666

[necolas]

Oh I see. I'll review a PR to match the RN default. Thanks

[rosko]

Thanks @necolas. PR is ready for review.