Closing the app while scrolling (IOS)

[basemanabulsi]

Describe the bug I have a list of items each item contains an image and text, After having more than 45 item and scroll the app get freeze and close. I tried to minimize scrolling speed but it keeps closing the app. Also, Sometimes it shows a black screen with a spinner then close.

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• Platform: Iphone 8
• React Native or Expo version: RN 0.62.2
• Reanimated version: ^1.8.0
• React Native Gesture Handler version: ^1.6.1
• React-native-draggable-flatlist: ^2.3.3

Additional context Add any other context about the problem here.

The following method renders single item:

renderItem = ({ item, index, drag, isActive }) => {
		const viewStyle = isActive ? styles.active_item : styles.inactive_item;
		return (
			<TouchableOpacity
				onLongPress={drag}
				onPress={() => this.showImage(index)}
				key={`draggable-item-${item.key}`}
			>
				<View style={[ viewStyle, styles.single_image_btn_style ]}>
					<View style={styles.singleImage_view_style}>
						<Image source={{ uri: item.documentImageFileUri }} style={styles.imageThumbnail} />
					</View>
					<Text style={styles.page_number_style} numberOfLines={2}>
						Page: {index + 1}
					</Text>
				</View>
			</TouchableOpacity>
		);
	};

This is the list

setImages() {
		if (this.state.pages !== null && this.state.pages !== undefined) {
			return (
				<DraggableFlatList
					horizontal={false}
					data={this.state.pages}
					renderItem={this.renderItem}
					numColumns={1}
					keyExtractor={(item, index) => `draggable-item-${index.toString()}`}
					onDragEnd={({ data }) => this.reorder(data)}
					contentContainerStyle={styles.list_style}
					autoscrollSpeed={150}
					autoscrollThreshold={10}
				/>
			);
		}
		return <View />;
	}

This is how I render the list in the render method which rendered between two bars one in the top and one in the bottom:

<View style={styles.pics_container}>{this.setImages()}</View>

The styles is like this:

	pics_container: {
		flex: 1,
		height: '100%',
		width: '100%',
		alignItems: 'flex-start',
		marginLeft: 15,
		marginVertical: 10
	},

The list is like image 1 in this link:

https://lh3.googleusercontent.com/h7rBwy4VcKcFO7VFS0YBwS0suVmWsGLA9Es8gQvt6akBM13vzpsAWCeXw-t4igRqtXXu9dT8crJkdkniTKGVr3O8TugLXRnh_U0-=w1064-v0

Thank u.