`flexGrow: 1` inside `alignItems: <non-stretch>` covers siblings
Open
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
Android:
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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