Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FlatList rendering result in Error #28802

Closed
luiey opened this issue May 1, 2020 · 0 comments
Closed

FlatList rendering result in Error #28802

luiey opened this issue May 1, 2020 · 0 comments

Comments

@luiey
Copy link

luiey commented May 1, 2020

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

Run react-native info in your terminal and copy the results here.

react-native-cli: 2.0.1
react-native: 0.62.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Rendering FlatList never success. Always get issue.
  2. Previous version project on RN 0.61.5 never face this issue.

Expected Results

Describe what you expected to happen.
I want to render a flatlist data from RESTful response data. As soon it get to the screen, the emulator show error.
Screenshot_1588376757

My render code are like below (minimal version):

renderListItem = ({ item }) => {
	return (
	  <Card>
		<TouchableOpacity activeOpacity={0.9} onPress={this._onPressGoToPromotionDetails.bind(this, item)}>
		  <CardItem>
			<Left style={{ flex: 0.15 }}>
			  <Image source={{ uri: item.PromoImgUri }}
				style={{ width: 150, height: 150 }}
			  />
			</Left>
			<Body style={{ flex: 0.6 }}>
			  <Text numberOfLines={1} style={{ fontWeight: 'bold' }}>{item.PromoName}</Text>
			  <Text numberOfLines={5}>{item.PromoDesc}</Text>
			</Body>
			<Right style={{ flex: 0.2 }}>
			  <View>
				<Text>Start: {item.PromoStartDate}</Text>
				<Text>End: {item.PromoEndDate}</Text>
			  </View>
			</Right>
		  </CardItem>
		</TouchableOpacity>
	  </Card>
	)
}
render() {
	return (
	  <Container>
		<Content padder>
		  <FlatList
			extraData={this.state}
			onRefresh={this.flatLoading}
			onEndReached={this._onEndReached}
			onEndReachedThreshold={0.8}
			onMomentumScrollBegin={() => { this._onEndReachedCalledDuringMomentum = false; }}
			data={this.state.flatData}
			keyExtractor={(item) => item.PromoID}
			renderItem={this.renderListItem}
			refreshing={this.state.refreshing}
			refreshControl={
			  <RefreshControl
				refreshing={this.state.flatLoading}
				onRefresh={this._onRetrieveData.bind(this)}
			  />
			}
		  />
		</Content>
	  </Container >
	);
}

I use the same script as my previous project. If I remove the flatlist rendering, the screen is ok; but with empty view for sure. Why is it happen?

Extra, even I put a component without any params lead to error:-

<Content padder>
	<FlatList/>
</Content>
@luiey luiey closed this as completed May 3, 2020
@facebook facebook locked as resolved and limited conversation to collaborators Oct 1, 2021
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 1, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants