React-Native Rendering json flatlist - json

Question

I am new to react-native. I'm building up complexity but have gotten stuck on rendering FlatList items from a json list. This was working fine for ListView but not able to figure out what I am missing on FlatList.
import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList } from 'react-native';
export default class Movies extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
let data_source = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: data_source.cloneWithRows(responseJson.office_staff),
}, function() {
// do something with new state
});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =>
<Text style={styles.touchButtonText}>{item.staff_name} </Text>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
alignContent:'center',
flexDirection: 'row',
flexWrap:'wrap',
justifyContent:'center',
},
touchButton:{
alignSelf:'center',
backgroundColor:'#2980b9',
paddingVertical: 25,
width:295,
margin:15,
},
touchButtonText:{
textAlign:'center',
color:'#ffffff',
fontWeight:'bold'
},
})
The text field will be in a touchable and I'll be adding function to the buttons but I wanted to get the listing correct first.
Any suggestions are welcome. Thanks for the help :)
https://gnosisdevelopment.com/office/list.json
{
"title": "Welcome to our office",
"description": "Your smart office assistant",
"office_staff": [
{ "staff_name": "Dr. Bob"},
{ "staff_name": "Dr. Xavior"},
{ "staff_name": "Dr. Sanchez"},
{ "staff_name": "Dr. Robert"},
{ "staff_name": "Dr. Albert"}
]
}
UPDATE with new datasource load:
import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList } from 'react-native';
export default class Office extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
// just setState here e.g.
this.setState({ dataSource: responseJson.office_staff, isLoading:false,});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =><Text style={styles.touchButtonText}>{item.staff_name}</Text>
}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
alignContent:'center',
flexDirection: 'row',
flexWrap:'wrap',
justifyContent:'center',
},
touchButton:{
alignSelf:'center',
backgroundColor:'#2980b9',
paddingVertical: 25,
width:295,
margin:15,
},
touchButtonText:{
textAlign:'center',
color:'#ffffff',
fontWeight:'bold'
},
})
Final working version:
import React, { Component } from 'react';
import { ActivityIndicator, Text, View, StyleSheet,TouchableOpacity, FlatList } from 'react-native';
export default class Office extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
// just setState here e.g.
this.setState({ dataSource: responseJson.office_staff,isLoading: false });
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =><Text>{item.staff_name}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
alignContent:'center',
flexDirection: 'row',
flexWrap:'wrap',
justifyContent:'center',
},
touchButton:{
alignSelf:'center',
backgroundColor:'#2980b9',
paddingVertical: 25,
width:295,
margin:15,
},
touchButtonText:{
textAlign:'center',
color:'#ffffff',
fontWeight:'bold'
},
})

Answer 1

You don't need to provide a dataSource like that.
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
// just setState here e.g.
this.setState({
dataSource: responseJson.office_staff,
isLoading: false,
});
})
.catch((error) => {
console.error(error);
});
}