My flatlist not rendering without remote debugger - react-native

Question

I am working on an app by react native.i have a problem. when my app has a debug mode work very well. but in without debug mode, my Flatlist is not rendering all items.
I'm using redux and redux-saga
class ComponentGroups extends React.Component {
constructor (props){
super(props)
this.state = {
listBanner: this.props.item.listBanner
}
}
eventOnscroll = () => {
console.log('load list banner pls what wrong with u')
}
checkRenderView = () => {
if(this.state.listBanner.length && this.state.listBanner.length === 1) {
return (
<ComponentBanner item={this.state.listBanner[0]} typeTab={1}/>
)
}
const dimensions = Dimensions.get('window');
const screenWidth = dimensions.width;
return (
<ScrollView onScroll={this.eventOnscroll}>
<FlatList
style={{
flex: 1,
width: screenWidth
}}
showsHorizontalScrollIndicator={false}
horizontal={true}
data={this.state.listBanner}
removeClippedSubviews={false}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => <ComponentBanner item={item} index={index} typeTab={1}/>}
/>
</ScrollView>
)
}
render () {
return (
<View style={styles.bannerItem}>
{this.state.listBanner.length && this.checkRenderView()}
</View>
)
}
}
and my component item:
class ComponentBanner extends React.Component {
constructor (props) {
super(props)
}
handlePressDetailBanner = () => {
detailImageScreen({item: this.props.item, typeTab: 1})
}
showViewNewsViewed = () => {
if(this.props.item.hot && this.props.item.watched) {
return (
<View style={styles.viewsLiked}>
<View style={styles.iconLike}>
<Text style={styles.news}>Mới</Text>
</View>
<View style={styles.iconView}>
<Text style={styles.viewed}>Đã xem</Text>
</View>
</View>
)
}
if(this.props.item.hot && !this.props.item.watched) {
return (
<View style={styles.viewsLiked}>
<View style={styles.iconLike}>
<Text style={styles.news}>Mới</Text>
</View>
</View>
)
}
if(!this.props.item.hot && this.props.item.watched) {
return (
<View style={styles.viewsLiked}>
<View style={styles.iconView}>
<Text style={styles.viewed}>Đã xem</Text>
</View>
</View>
)
}
}
render () {
return (
<View style={styles.bannerItem}>
<TouchableOpacity onPress ={this.handlePressDetailBanner}>
<Image source={{uri: this.props.item.url}} style={styles.imageItem} borderRadius={5} resizeMode='stretch'/>
</TouchableOpacity>
<View style={styles.titleLikes}>
{this.showViewNewsViewed()}
<Text numberOfLines={2} ellipsizeMode='tail' style={styles.textTitle}>{this.props.item.name}</Text>
<View style={styles.viewsLiked}>
<View style={styles.iconLike}>
<Icon
name='thumb-up'
color={this.props.item.userLike? Colors.mpAdvertise : Colors.cloud}
size={Fonts.size.regular}
/>
<Text style={styles.accountLike}>{this.props.item.totalLike}</Text>
</View>
<View style={styles.iconView}>
<Icon
name='eye'
color={Colors.cloud}
size={Fonts.size.regular}
/>
<Text style={styles.accountLike}>{this.props.item.totalView}</Text>
</View>
</View>
</View>
</View>
)
}
}
export default ComponentBanner
and Render Item by :
render () {
return (
<TouchableOpacity onPress ={this.handlePressDetailBanner} style={styles.detailImage}>
<View style={styles.bannerItem}>
<View>
<Image source={{uri: this.props.item.url ? this.props.item.url : ''}} style={styles.imageItem} borderRadius={5} resizeMode='stretch'/>
</View>
<View style={styles.titleLikes}>
<Text numberOfLines={2} ellipsizeMode='tail' style={styles.textTitle}>{this.props.item.name ? this.props.item.name : ''}</Text>
<View style={styles.viewsLiked}>
<View style={styles.iconLike}>
<Icon
name='thumb-up'
color={this.props.item.userLike? Colors.mpAdvertise : Colors.cloud}
size={Fonts.size.regular}
/>
<Text style={styles.accountLike}>{this.props.item.totalLike ? this.props.item.totalLike : ''}</Text>
</View>
<View style={styles.iconView}>
<Icon
name='eye'
color={Colors.cloud}
size={Fonts.size.regular}
/>
<Text style={styles.accountLike}>{this.props.item.totalView ? this.props.item.totalView : ''}</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
)
}
}
UPDATE: sorry for forgot main screen rendering ComponentGroups:
constructor (props) {
super(props)
this.state = {
params: {
SourceType: '',
GroupCode: '',
NumOfRec: 10,
PageNum: 1,
TypeId: '',
},
data:[],
groupBanner: '',
groupVideo: '',
mainBanner: '',
listBanners: [],
listVideos: [],
isSelected: 1,
fetching: false,
onEndReachedCalledDuringMomentum: true
}
Navigation.events().bindComponent(this)
this.props.getData()
}
static getDerivedStateFromProps(nextProps, prevState){
if (nextProps.fetching !== prevState.fetching){
return {
fetching: nextProps.fetching,
data: nextProps.data,
listBanners: nextProps.listBanners,
listVideos: nextProps.listVideos
}
}
else return null;
}
componentDidUpdate(prevProps, prevState) {
if (prevState.fetching !== this.state.fetching) {
}
}
componentDidAppear () {
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
enabled: true
}
}
})
}
showSideMenu () {
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: true
}
}
})
}
navigationButtonPressed ({ buttonId }) {
this.showSideMenu()
}
handlePressScroll = () => {
const {params} = this.state
if(!this.state.fetching) {
this.setState({
params: {
...params,
PageNum: params.PageNum + 1,
}
}, () => {
const data = Object.keys(this.state.params).map(key => key + '=' + this.state.params[key]).join('&')
console.log(data)
if(this.state.isSelected === 2) {
this.props.getDataBanner(data)
}
if(this.state.isSelected === 3) {
this.props.getDataVideo(data)
}
})
} else {
return null
}
}
handlePressSwitchTab = (value) => {
this.setState({
isSelected: value,
params: {
SourceType: 1,
GroupCode: '',
NumOfRec: 10,
PageNum: 1,
TypeId: 0
},
listBanners: [],
listVideos: [],
},()=>{
if(value === 1) {
this.props.resetStateHome()
this.props.getData()
}
if(value === 2) {
this.props.resetStateHome()
const data = Object.keys(this.state.params).map(key => key + '=' + this.state.params[key]).join('&')
this.props.getDataBanner(data)
}
if(value === 3) {
this.props.resetStateHome()
const data = Object.keys(this.state.params).map(key => key + '=' + this.state.params[key]).join('&')
this.props.getDataVideo(data)
}
})
}
formatData = (data, numColumns) => {
const numberOfFullRows = Math.floor(data.length / numColumns)
let numberOfElementsLastRow = data.length - (numberOfFullRows * numColumns)
while (numberOfElementsLastRow !== numColumns && numberOfElementsLastRow !== 0) {
data.push({ key: `blank-${numberOfElementsLastRow}`, empty: true })
numberOfElementsLastRow++
}
return data
}
handlePressBanner = () => {
detailImageScreen({item: this.state.data.mainBanner})
}
eventScroll = () => {
console.log(45544)
}
renderViewByState = () => {
const numColumns = 2;
if(this.state.data && this.state.data.mainBanner && this.state.data.mainBanner.url) {
var url = this.state.data.mainBanner.url
}
if (this.state.isSelected === 1) {
if(this.state.fetching) {
return (
<View style={styles.styleLoadMore}>
<BallIndicator color={Colors.mpAdvertise} animationDuration={800} />
</View>
)
} else {
return (
<ScrollView onScroll={this.eventScroll} >
<View style={styles.centered}>
<TouchableOpacity onPress={this.handlePressBanner} style={styles.mainBannerImage}>
<Image source={{uri: url}} style={styles.logo} borderRadius={5} resizeMode='stretch'/>
</TouchableOpacity>
</View>
<View style={styles.containerContent}>
<View style={styles.sectionBanner} >
<View>
<Text style={styles.textBanner}>BANNERS</Text>
</View>
<View style={styles.listBanner}>
<FlatList
data={this.state.data.groupBanner}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => <ComponentGroups item={item} index={index} />}
/>
</View>
</View>
<View style={styles.sectionBanner} >
<View>
<Text style={styles.textBanner}>VIDEOS</Text>
</View>
<View style={styles.listBanner}>
<ScrollView>
<FlatList
data={this.state.data.groupVideo}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => <ComponentGroupsVideo item={item} index={index} />}
/>
</ScrollView>
</View>
</View>
</View>
</ScrollView>
)
}
}
if (this.state.isSelected === 2) {
if(this.state.fetching && this.state.params.PageNum < 2) {
return (
<View style={styles.styleLoadMore}>
<BallIndicator color={Colors.mpAdvertise} animationDuration={800} />
</View>
)
}
return (
<ScrollView onScroll={this.eventScroll}>
<View style={styles.listBanner}>
<FlatList
extraData={this.state}
ListFooterComponent = {this.renderFooter}
data={this.state.listBanners}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => <BannerItem item={item} index={index}/>}
numColumns={countNumber}
onEndReached={this.handlePressScroll}
onEndReachedThreshold={0.05}
/>
</View>
</ScrollView>
)
}
if (this.state.isSelected === 3) {
if(this.state.fetching && this.state.params.PageNum < 2) {
return (
<View style={styles.styleLoadMore}>
<BallIndicator color={Colors.mpAdvertise} animationDuration={800} />
</View>
)
}
return (
<View style={styles.listBanner}>
<FlatList
extraData={this.state}
data={this.state.listVideos}
ListFooterComponent = {this.renderFooter}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => <VideosItem item={item} index={index} typeTab={3}/>}
numColumns={countNumber}
onEndReached={this.handlePressScroll}
onEndReachedThreshold={0.01}
/>
</View>
)
}
}
renderFooter = () => {
if(this.state.fetching && this.props.isStopScroll && this.state.params.PageNum > 1) {
return (
<View style={styles.styleLoadMoreFooter}>
<BallIndicator color={Colors.mpAdvertise} animationDuration={800} />
</View>
)
}
return null
}
render () {
return (
<View style={styles.mainContainer} testID='launchScreen'>
<View style={styles.tabBarHome}>
<View style={[styles.itemTab, this.state.isSelected === 1 ? styles.itemTabActive : null]}>
<TouchableOpacity testID='loginScreenLoginButton' style={styles.loginButtonWrapper} onPress={() => this.handlePressSwitchTab(1)}>
<View style={styles.loginButton}>
<Text style={[styles.itemText, this.state.isSelected === 1 ? styles.itemTextActive : null]}>Nổi bật</Text>
</View>
</TouchableOpacity>
</View>
<View style={[styles.itemTab, this.state.isSelected === 2 ? styles.itemTabActive : null]}>
<TouchableOpacity testID='loginScreenLoginButton' style={styles.loginButtonWrapper} onPress={() => this.handlePressSwitchTab(2)}>
<View style={styles.loginButton}>
<Text style={[styles.itemText, this.state.isSelected === 2 ? styles.itemTextActive : null]}>Banner</Text>
</View>
</TouchableOpacity>
</View>
<View style={[styles.itemTab, this.state.isSelected === 3 ? styles.itemTabActive : null]}>
<TouchableOpacity testID='loginScreenLoginButton' style={styles.loginButtonWrapper} onPress={() => this.handlePressSwitchTab(3)}>
<View style={styles.loginButton}>
<Text style={[styles.itemText, this.state.isSelected === 3 ? styles.itemTextActive : null]}>Videos</Text>
</View>
</TouchableOpacity>
</View>
</View>
{this.renderViewByState()}
</View>
)
}
}
const mapStateToProps = (state) => {
return {
data: state.home.data,
listBanners: state.home.listBanners,
listVideos: state.home.listVideos,
fetching: state.home.fetching,
cart: state.login.dataCart,
isStopScroll: state.home.isStopScroll
}
}
const mapDispatchToProps = (dispatch) => {
return {
getData: () => dispatch(HomeActions.homeRequest()),
getDataBanner: (data) => dispatch(HomeActions.bannerRequest(data)),
getDataVideo: (data) => dispatch(HomeActions.videoRequest(data)),
resetStateHome: () => dispatch(HomeActions.resetStateHome())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
The above code, render my item in flatlist .in debug mode working very good, but in release mode, it's not rendering at all

Answer 1

please try this
<FlatList
style={{
flex: 1,
width: screenWidth
}}
extraData={this.state} //<--- add this line
showsHorizontalScrollIndicator={false}
horizontal={true}
data={this.state.listBanner}
removeClippedSubviews={false}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => <ComponentBanner item={item} index={index} typeTab={1}/>}
/>