room.js

import React, { Component } from 'react';
import { View,StyleSheet,Image,TextInput,ListView, Alert} from 'react-native';
import { Container, Header, Content, List, ListItem, Text } from 'native-base';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';

const api = new Frisbee({
  baseURI: 'https://api.lelang15.com',
  headers: {
    'Accept': 'application/json',
    // 'Content-Type': 'application/json'
    'Content-Type': 'multipart/form-data'
  }
});
export default class Rooms extends Component {
  constructor (props) {
    super(props)
    this.state = {
      spinner: false,
      ready: false,
      albums: []
    }
    this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2, sectionHeaderHasChanged: (s1, s2) => s1 !== s2})

  }

  componentDidMount(){
    this.setState({ spinner: true });
  //   var bodyFormData = new FormData();
  //   bodyFormData.append('phone', '81314984203');
  //   bodyFormData.append('device_id','40bd0dd876be91d0');
  //   axios({
  //     method: 'post',
  //     url: 'https://api.lelang15.com/room/all_rooms',
  //     data: bodyFormData,
  //     mode: 'no-cors',
  //     config: { headers: {'Accept': 'application/json','Content-Type': 'multipart/form-data' }}
  // })
  //     .then(function (response) {
  //         //handle success
  //         alert(response)
  //         console.log(response);
  //         this.setState({albums:response.data});
  //         alert(response.data)
  //     })
  //     .catch(function (response) {
  //         //handle error
  //         alert(response)
  //         console.log(response);
  //     });
      setTimeout(async () => {

        try {
          let formdata = new FormData();

          formdata.append("phone", "81314984203")
          formdata.append("device_id", "40bd0dd876be91d0")
          const res = await api.post('/room/all_rooms', {
            body: formdata
          });
          console.log('Response');
          // console.log(res)
          // alert(res.body)
          if (res.err) throw res.err;
          alert(res.body)
          this.setState({
            ready:true,
            albums: res.body.data,
            spinner: false
          });
          console.log('state')
          console.log(this.state.albums)

          // setTimeout(() => {
          //   Alert.alert('Sent!');
          // }, 100);

        } catch (err) {
          // <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
          setTimeout(() => {
            Alert.alert('Oops!', err.message);
          }, 100);
        }

      }, 100);
    }

  _onData(){
    return (
      <List>
            {
              this.state.albums.map((item, i) => (
                <ListItem key={i}>
                  <Text>{item.public_rooms.name}</Text>
                </ListItem>
              ))
            }

            {/* {this.state.albums.rsp_desc} */}
      </List>
    );
  }

  _blankData(){
    return (
      <View><Text>Kosong</Text></View>
    );
  }

  _renderPage(){
    if (this.state.ready){
    return (
        <View>{this._onData()}</View>
    );
  }else{
    return (
        <View>{this._blankData}</View>
    );
  }
  }
  render() {
    const data = this.state.albums
    return (
      <Container>
        <Content>
          {this._onData()}
          {/* {this.state.albums} */}
          <Spinner
          visible={this.state.spinner}
          textContent={'One moment...'}
          textStyle={{ color: '#fff' }} />
        </Content>
      </Container>
    );
  }
}