React-Native - availableHeight is indefinite so heightMeasureMode must be YGMesureModeUndefined

Question

I got this Error

Here is my code

<ImageBackground source={BG} style={{ flex: 1 }}>
    <ScrollView horizontal style={{ flex: 1, height: '100%' }}>
        <View style={{ paddingTop: '10%' }}>
            <Text style={[styles.bold, styles.textCenter, { fontSize: 18, color: c.yellow }]}>Data</Text>
            <View style={[styles.row, styles.justifyBetween, { width: '100%', paddingHorizontal: '5%', borderTopWidth: 1, borderBottomWidth: 1, borderColor: c.yellow }]}>
                <Text style={[styles.textWhite, { width: '10%' }]}>Sr.</Text>
                <Text style={[styles.textWhite, { width: '20%' }]}>User ID</Text>
                <Text style={[styles.textWhite, { width: '20%' }]}>Name</Text>
                <Text style={[styles.textWhite, { width: '25%' }]}>Phone</Text>
                <Text style={[styles.textWhite, styles.textCenter, { width: '20%' }]}>Active</Text>
                <Text style={[styles.textWhite, { width: '25%' }]}>Time/Date</Text>
            </View>
        </View>
        {loading ?
            <ActivityIndicator color={c.yellow} size='large' style={{ marginTop: '20%' }} /> :
            data.length > 0 ?
                <FlatList
                    data={data}
                    keyExtractor={(item, index) => index.id}
                    renderItem={dataList}
                    style={{ width: '100%', paddingHorizontal: '1%', marginTop: '5%' }} />
                : <Text style={[styles.textWhite, styles.textCenter, styles.bold, { fontSize: 20, marginTop: '20%' }]}>No Data Found!</Text>
        }
    </ScrollView>
</ImageBackground>

My RN version is 0.70.6 I'm using Ubuntu 22.04 LTS I'm running this app on physical devices not on emulator NodeJS version 16.18.1 JDK Info - openjdk 11.0.17 2022-10-18 Android Studio Dolphin 2021.3.1

Here are my dependecies

   "@react-native-async-storage/async-storage": "^1.17.11",
   "@react-native-community/blur": "^4.3.0",
   "@react-native-community/clipboard": "^1.5.1",
   "@react-native-masked-view/masked-view": "^0.2.8",
   "@react-native-picker/picker": "^2.4.8",
   "@react-navigation/native": "^6.0.13",
   "@react-navigation/stack": "^6.3.4",
   "@reduxjs/toolkit": "^1.9.0",
   "axios": "0.27",
   "react": "18.1.0",
   "react-native": "0.70.6",
   "react-native-elements": "^3.4.2",
   "react-native-gesture-handler": "^2.8.0",
   "react-native-image-crop-picker": "^0.38.1",
   "react-native-paper": "^4.12.5",
   "react-native-qrcode-svg": "^6.1.2",
   "react-native-reanimated": "^2.13.0",
   "react-native-safe-area-context": "^4.4.1",
   "react-native-screens": "^3.18.2",
   "react-native-splash-screen": "^3.3.0",
   "react-native-svg": "^13.6.0",
   "react-native-vector-icons": "^9.2.0",
   "react-redux": "^8.0.5"

I've searched for Error but I got nothing. The answers says this error was exited in RN v0.56.

I want to use Vertical Flatlist inside Horizontal ScrollView

Answer 1

You must not use percentages values in ScrollView children or flatlist Items.

 <ImageBackground source={BG} style={{ flex: 1 }}>
      <ScrollView horizontal style={{ flex: 1, height: '100%' }}>
          <View style={{ paddingTop: 70 }}>//not paddingTop:10%