Back

Technologies:

javascriptjavascript
react-nativereact-native
avatar
Tolerim
25 days ago

While loading data in a FlatList, I encountered an error stating "Invariant Violation: is not usable as a native method argument" and "PayloadTooLargeError: request entity too large."

While working with FlatList, Material Bottom Tabs, and Material Top Tabs, I encountered errors related to load performance. The errors appeared when using the following component: 
<FlatList
   nativeID="gallery-viewerfood-wallpaperlist"
   style={{
      width: windowDimensions.windowWidth,
      height: '100%',
      overflow: 'scroll',
   }}
   numColumns={numberOfGridColumns}
   key={numberOfGridColumns}
   data={foodWallpapers}
   renderItem={({ item }) => {
      return (
         <TouchableOpacity
            nativeID="gallery-viewer_image-frame"
            style={{
               width: windowDimensions.windowWidth - globalComponentPaddings.galleryPadding * 2,
               height: '100%',
               flex: 1,
               borderRadius: globalBorderRadiuses.bigBorderRadius,
            }}
            onPress={() => {
               route.params.currentSelectedImage = item.token;
               imageSelectionState[(parseInt(item.token) - 1) / 2] += 1;
               console.log(parseInt(item.token));
               console.log(imageSelectionState[parseInt(item.token) - 1]);
            }}
         >
            <Image
               nativeID="gallery-viewer_image-viewer"
               source={item.source}
               resizeMode={'cover'}
               style={{
                  width: windowDimensions.windowWidth - globalComponentPaddings.galleryPadding * 2,
                  height: '100%',
                  flex: 1,
                  borderRadius: globalBorderRadiuses.bigBorderRadius,
                  borderColor: globalColors.black,
                  borderWidth: 3,
               }}
            />
            <View
               nativeID="image_selection-wrapper"
               style={{
                  width: 40,
                  height: 40,
                  position: 'absolute',
                  marginTop: 4,
                  marginRight: 0,
                  marginLeft: '86%', 
                  display: (imageSelectionState[parseInt(item.token) - 1] % 2 === 0) ? 'none' : 'flex',
               }}
            >
               <Image
                  nativeID="image_selection-mark"
                  source={require("../assets/icons/selected_5.png")}
                  style={{
                     width: 40,
                     height: 40,
                     resizeMethod: 'scale',
                     resizeMode: 'cover',
                  }}
               />
            </View>
         </TouchableOpacity>
      );
   }}
   keyExtractor={item => item.id}
/>
The errors, which seem to be related to load performance, are: 

Invariant Violation: [109,"RCTImageView",521,{"nativeID":"gallery-viewerimage-viewer","resizeMode":"cover","width":"<<NaN>>","height":"100%","overflow":"hidden","flex":1,"borderRadius":21,"borderColor":-16777216,"borderWidth":3,"shouldNotifyLoadEvents":false,"src":[{"uri":"http://192.168.1.4:19000/assets/assets/gallery/food/food1.png?platform=android&hash=d553bbd857fa34e93620f07f0ba4aeef?platform=android&dev=true&hot=false"}],"defaultSrc":null,"loadingIndicatorSrc":null}] is not usable as a native method argument
and 
PayloadTooLargeError: request entity too large 
at readStream (...\nodemodules\expo\nodemodules\raw-body\index.js:155:17)
I tried to resolve the first error by modifying the value of limit in \nodemodules\expo\nodemodules\raw-body\index.js, but the error persisted. I need solutions to fix these issues. Thank you for any helpful suggestions.
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
The error message you are seeing is related to the image component in your code. It seems that the width of the image is not being set correctly. You can try setting the width of the image to a fixed value instead of using windowDimensions.windowWidth. This should fix the error. Regarding the second error, it seems that you are trying to send a request with a large payload. You can try increasing the limit of the payload size by modifying the value of limit in \node_modules\expo\node_modules\raw-body\index.js. However, this is not recommended as it can cause other issues. Instead, you can try sending smaller requests or optimizing your code to reduce the size of the payload. I hope this helps! Let me know if you have any other questions.

Sources

Using FlatList to display Tabs in React-Native Nativebase Tabsjavascript - Invariant Violation: is not usable as a native method ...Slow Tabs in React Navigation v5 Top Tab NavigatorScreens not visible when using Material Top Tab Navigator ... - Github
avatar
Tolerim
25 days ago
It seems like the issue is related to the Image component inside your FlatList. The error message shows that the width of the Image component is not valid because it is NaN. One way to fix this is by providing a valid width value for the Image component such as a specific pixel value or a percentage value. Regarding the PayloadTooLargeError, it occurs when the request payload size exceeds the limit set by your server. You can increase the limit in your server configuration or use a different approach to handle large uploads such as streaming or multipart uploads.
;