React Native get list of data of a doctype and display on Mobile. REST API

Im just Sharing :slight_smile:


CODE of the Mobile app (REACTNATIVE):


import React from 'react';
import { StyleSheet, Text, View, Button, ScrollView, ListView, FlatList } from 'react-native';


export default class App extends React.Component {
	    
		
componentWillMount(){
	
	var that = this;
	fetch('http://192.168.254.111:8080/api/resource/Attendance')
	.then((response) => response.json())
    .then((responseJson) => {
		
		var result = responseJson.data,
			data = [];
		
		result.forEach(function(x, i){
			data.push({
				name: x.name
			})
		});
		
		that.setState({
			data: data
		})
		
    })
    .catch((error) => {
      console.error(error);
    });
	
	
	
}
  
constructor(props){
	super(props)      
	
	this.state = {
			data: []
		}
}	
  	                         

  _keyExtractor = (item, index) => index;

	
  render() {
    return (
	
	 <ScrollView>
      <View style={styles.container}>
		<FlatList 
			data={this.state.data}
			keyExtractor={this._keyExtractor}
			renderItem={({item}) => <Text key={item.name}>{item.name}</Text>}
		/>
		
      </View>
	   </ScrollView>   
    );
  }
}

const styles = StyleSheet.create({
  container: {
	marginTop:50,        
	paddingLeft:20,              
    flex: 1,
    backgroundColor: '#fff',
  },
});
2 Likes

@sheerland at least try and format the code before posting! (I have edited your post and fixed it for now). Also better to share the full repo.

2 Likes

Thanks @rmehta. Sorry for the wrong format.