FlatList not able to Render items - reactjs

Question

On Fetching the Json data from remote url and while trying to render it via FlatList Component ,I am constantly getting Red-Screen with this error "incompatible receiver map required" .
I strongly guess it is related to android.
Json Response is coming properly as seen in react-logger.
I tried adding core-js : 2.5.2 in "resolutions" in package.json but still did not work.
HomeScreen.js
import React, { Component } from "react";
import {
Text,
View,
FlatList,
ActivityIndicator,
Platform
} from "react-native";
import { Button } from "native-base";
import { connect } from "react-redux";
import firebase from "react-native-firebase";
import { onSignOut } from "../Actions/AuthActions";
import { stringify } from "qs";
class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: []
};
}
static navigationOptions = {
header: null
};
componentDidMount() {
// Checking user Auth State
this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
this.props.navigation.navigate(user ? "App" : "Auth");
});
// Fetching the list of workers from Remote Url
return fetch("https://api.myjson.com/bins/xyz")
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson.workers
},
function() {
// In this block you can do something with new state.
}
);
})
.catch(error => {
console.error(error);
});
}
componentWillUnmount() {
if (this.unsubscribe) this.unsubscribe();
}
render() {
// First Loadf the activity indicator till the json data is not fetched
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
console.log(JSON.stringify(this.state.dataSource));
return (
<View style={styles.container}>
<FlatList>
data = {this.state.dataSource}
renderItem=
{({ item }) => <Text>{item.name}</Text>}
keyExtractor={(item, index) => index}
</FlatList>
</View>
);
}
}
const styles = {
container: {
flex: 1,
alignItems: "center",
alignContent: "center",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center"
},
FlatListItemStyle: {
padding: 10,
fontSize: 18,
height: 44
}
};
package.json
{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios"
},
"dependencies": {
"#babel/runtime": "^7.4.4",
"firebase": "^5.11.1",
"isomorphic-fetch": "^2.2.1",
"native-base": "^2.12.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-native": "0.57.5",
"react-native-elements": "^1.1.0",
"react-native-firebase": "^5.3.1",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-otp-inputs": "^2.0.1",
"react-native-phone-input": "^0.2.1",
"react-navigation": "^3.9.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-polyfill": "^6.26.0",
"babel-preset-expo": "^5.0.0",
"eslint-plugin-react-hooks": "^1.6.0",
"expo": "^32.0.6"
},
"resolutions": {
"core-js": "2.5.2"
},
"private": true
}
Error Should not come and items should be rendered accordingly.

Answer 1

Check your response first. Is it the right array like as [{name: 'a'}, {name: 'b"}]?
// Fetching the list of workers from Remote Url
return fetch("https://api.myjson.com/bins/xyz")
.then(response => response.json())
.then(responseJson => {
console.log(responseJson); // Check your response
this.setState(
{
isLoading: false,
dataSource: responseJson.workers
},
function() {
// In this block you can do something with new state.
}
);
})
.catch(error => {
console.error(error);
});
}
Update
You used flatlist to wrong way.
<FlatList>
data = {this.state.dataSource}
renderItem=
{({ item }) => <Text>{item.name}</Text>}
keyExtractor={(item, index) => index}
</FlatList>
need to change below
<FlatList
data={this.state.datasource}
renderItem={...}
/>