Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alignContent default value #2746

Closed
1 task done
rosko opened this issue Dec 24, 2024 · 4 comments
Closed
1 task done

alignContent default value #2746

rosko opened this issue Dec 24, 2024 · 4 comments
Labels

Comments

@rosko
Copy link

rosko commented Dec 24, 2024

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

@rosko rosko added the bug label Dec 24, 2024
@necolas
Copy link
Owner

necolas commented Dec 25, 2024

Yoga and RN have different defaults

@necolas necolas closed this as completed Dec 25, 2024
@rosko
Copy link
Author

rosko commented Dec 25, 2024

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

@rosko
Copy link
Author

rosko commented Dec 25, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants