How to integrate an API in Native Base

Question

I need fetch the data from an API and display in an list.There is no error while i run the code. But the data are also not been displayed.

import React, { Component } from 'react';
import {Container, List,Text, StyleProvider} from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';

export default class App extends Component {
state = {
 data: []
};

componentDidMount() {
 this.fetchData();
}

fetchData = async () => {
  const response = await fetch("https://randomuser.me/api?results=10");
  const json = await response.json();
  this.setState({ data: json.results });
};

render() {
console.log(this.state.data);
return (
  <StyleProvider style={getTheme(material)}>
    <Container>
      <List
        data={this.state.data}
        keyExtractor={(x, i) => i}
        renderItem={({ item }) =>

          <Text>
            {`${item.name.first} ${item.name.last}`}
          </Text>}
      />
    </Container>

  </StyleProvider>
);}}

The list without the api data is working fine

score 1 · Answer 1 · answered Mar 16 '18 at 14:19

1

You must use List component like this : native-base dynamic list

answered Mar 16 '18 at 14:19

erkan

197
4

score 0 · Answer 2 · answered Mar 16 '18 at 10:28

You need to set a loading state while the data is loading & when its loaded then display it

Something like this

import React, { Component } from "react";
import { Container, List, Text, StyleProvider } from "native-base";
import getTheme from "./native-base-theme/components";
import material from "./native-base-theme/variables/material";

export default class App extends Component {
  state = {
    data: []
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    this.setState({ loading: true });
    const response = await fetch("https://randomuser.me/api?results=10");
    const json = await response.json();
    this.setState({ data: json.results, loading: false });
  };

  render() {
    return (
      <StyleProvider style={getTheme(material)}>
        <Container>
          {this.state.loading ? (
            <Text>Loading</Text>
          ) : (
            <List
              data={this.state.data}
              keyExtractor={(x, i) => i}
              renderItem={({ item }) => (
                <Text>{`${item.name.first} ${item.name.last}`}</Text>
              )}
            />
          )}
        </Container>
      </StyleProvider>
    );
  }
}

score 0 · Answer 3 · answered Mar 16 '18 at 10:30

   <List
        data={this.state.data}
        keyExtractor={(x, i) => i}
        key={this.state.data}    /// Please give key here
        renderItem={({ item }) =>

          <Text>
            {`${item.name.first} ${item.name.last}`}
          </Text>}
      />

Please give key to you code

How to integrate an API in Native Base

3 Answers3