react / react/react-native

`flexGrow: 1` inside `alignItems: <non-stretch>` covers siblings

Open
#41,140 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: ScrollView Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

image

Android:

394606776_754158426725135_4092957756381229100_n

React Native Version

0.72.5

Output of npx react-native info
> npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.22621
  CPU: "(12) x64 AMD Ryzen 5 5600 6-Core Processor              "
  Memory: 16.28 GB / 31.91 GB
Binaries:
  Node:
    version: 20.2.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33424.131 (Visual Studio Community 2022)
Languages:
  Java:
    version: 11.0.20.1
    path: C:\Program Files\Eclipse Adoptium\jdk-11.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
Steps to reproduce
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
			<View style={{ alignItems: 'center', }}>
        <View style={{ backgroundColor: 'red' }}>
          <View style={{ flexGrow: 1 }}>
            <Text>foo</Text>
          </View>
        </View>

        <Text>foo</Text>
        <Text>foo</Text>
        <Text>foo</Text>
        <Text>foo</Text>
			</View>
    </View>
  );
}
Snack, screenshot, or link to a repository

https://snack.expo.dev/@szmarczak/blessed-violet-cheese

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the layout in the linked Expo Snack using the reported React Native 0.72.5 configuration, focusing on alignItems set to a non-stretch value and the nested flexGrow view. Compare the Android rendering with the expected sibling layout; done means the flexGrow child no longer covers its siblings.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.