Style overlaps on some androids #41379
Description
Description
Hello.
I developing my app with React Native, technically, Expo.
Now this time, I would like you to help me with this weird Style [or maybe flex] problem.
For the majority of users, this does not happen on the devices they use, whether iOS or Android. What I don't understand are some Android devices like (these are only the device I got from users):
- Infinix note 7
- Vivo Y53s
- Xiaomi Poco F3 - Android 13 TKQ.1 220829.002/ MIUI 14.0.3
- Samsung Galaxy A53 5G - Android Version 13
- Xiaomi Redmi Note 11 Pro - Android Version 12
- Realme 9 Pro - Android Version 13
A display occurred that I did not expect.
Environment
It's a pretty big project, so I don't need to show all the dependencies. The dependencies that you can see should be the libraries that I use from this issue.
"dependencies": {
"expo": "~48.0.18",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-safe-area-context": "4.5.0",
"react-native-gesture-handler": "~2.9.0",
...
Expected Layout
As I wrote above, Style dose not work stably for any reasons in some device and it's the problem. I will show you the problem.
- Expectation
This picture is my expected view in this case. In common:
- Reality
This picture is the weird problem.
Style works well and is displayed like the above picture sometimes, but the other times, like the below picture, it does not work.
The weird thing is that every only a few android devices.
NOTE: I can only provide limited frame because there are some things that don't need to be shown.
Here is My Code
I'm not familiar with React Native and Expo very much, so I first faced this problem and am really troubled. Please tell me what is the problem.
Thank you.
<View style={styles.scrollableIconContainer}>
<View style={styles.iconRowContainer}>
<View style={styles.iconItemContainer}>
<TouchableOpacity>
<Image source={OneYBRIcon} style={styles.icon} />
<Text style={styles.iconLabel}>1Y Bible</Text>
</TouchableOpacity>
</View>
<View style={styles.iconItemContainer}>
<TouchableOpacity>
<Image source={MenuCOREIcon} style={styles.icon} />
<Text style={styles.iconLabel}>CORE</Text>
</TouchableOpacity>
</View>
<View style={styles.iconItemContainer}>
<TouchableOpacity>
<Image source={MenuSeatBookingIcon} style={styles.icon} />
<Text style={styles.iconLabel}>Seat Booking</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.iconRowContainer}>
<View style={styles.iconItemContainer}>
<TouchableOpacity>
<Image source={MenuClassroomIcon} style={styles.icon} />
<Text style={styles.iconLabel}>NDC Class</Text>
</TouchableOpacity>
</View>
<View style={styles.iconItemContainer}>
<TouchableOpacity>
<Image source={MenuParentingGuideIcon} style={styles.icon} />
<Text style={styles.iconLabel}>Kids & Parenting</Text>
</TouchableOpacity>
</View>
<View style={styles.iconItemContainer}>
<TouchableOpacity>
<Image source={MenuMoreIcon} style={styles.icon} />
<Text style={styles.iconLabel}>Daftar</Text>
</TouchableOpacity>
</View>
</View>
</View>
const styles = StyleSheet.create({
scrollableIconContainer: {
flex: 1,
flexWrap: "wrap",
marginBottom: 15,
paddingHorizontal: 0,
marginHorizontal: 15,
paddingBottom: 10,
paddingTop: 6,
borderRadius: 10,
zIndex: 5,
borderWidth: 1,
borderColor: Color.BORDER,
backgroundColor: Color.CONTAINER,
},
iconRowContainer: {
flex: 1,
flexDirection: "row",
paddingVertical: 6,
},
iconListContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
iconItemContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
icon: {
height: 50,
width: 50,
},
iconLabel: {
fontSize: 12,
lineHeight: 13,
textAlign: "center",
},
})
React Native Version
0.71.8
Output of npx react-native info
System:
OS: Windows 10 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Memory: 3.08 GB / 11.85 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.17.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-221.6008.13.2211.9619390
Visual Studio: Not Found
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
Only some android device doesn't work.