0

I try to create list item based on native base, I already read this document and this document

Unfortunately all those method does not work. I believe there something wrong with my code since I'm new to react work

I got blank when I run my code. Here is my code. Please give some suggestion to fix my error.

import React from 'react';
import {ListView} from 'react-native';

import { Container, Content, Card, CardItem, Button,  Body,  Text, List, ListItem} from 'native-base';
import {create} from 'apisauce';

import {  AppLoading } from 'expo';


let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class UserList extends React.Component {


state = {
        apiAreLoaded: false,
        dataSource: ds
};


constructor() {
    super();



}

async componentDidMount() {



    // define the api
    const api = create({
        baseURL: 'https://reqres.in/',
        headers: {
        Accept: 'application/json'
        }
    })

    // start making calls
    //api.get('/api/users?page=2').then((response) => response.data).then(console.log);

    //use async
    const response = await api.get('/api/users?page=2');  
    console.log(response.data.data);  
    this.setState({ apiAreLoaded: true });


    this.setState = {
        dataSource: ds.cloneWithRows(response.data.data),
        };

    // console.log(this.state.dataSource);




}

render() {




    if(!this.state.apiAreLoaded)
    {
        return  <AppLoading />;

    }



    return(
        <Container>
            <Content>
                <List dataObject={this.state.dataSource}
                renderRow={(item) =>
                    <ListItem>
                        <Text>{item.avatar}</Text>
                    </ListItem>
                }>
                </List>
            </Content>
            </Container>

        // <ListView
        // dataSource={this.state.dataSource}
        // renderRow={(rowData) =>   
        //     <Card>
        //         <CardItem header>
        //         <Text> {rowData.avatar}</Text>
        //         </CardItem>
        //         <CardItem>
        //         <Body>
        //             <Text>
        //             {rowData.first_name}
        //             </Text>
        //         </Body>
        //         </CardItem>
        //         <CardItem footer>
        //         <Text>{rowData.avatar}</Text>
        //         </CardItem>
        //     </Card>


        // }
        // />

    );

}


}



export {UserList};

thanks mate.

Outurnate
  • 96
  • 14
navotera
  • 321
  • 1
  • 15

1 Answers1

0

your dataArray props of List is missing. Try replacing dataObject with dataArray

<List 
    dataArray={this.state.dataSource}
    renderRow={(item) =>
    <ListItem>
       <Text>{item.avatar}</Text>
     </ListItem>
}/>

Refer http://docs.nativebase.io/Components.html#dynamic-list-headref.

NativeBase List is deprecated. Use React Native Flatlist instead.

akhil xavier
  • 1,847
  • 15
  • 15
  • it becomes item.avatar undefined... although the avatar is available in object from api result... i guess dataArray is right when data source type is array, but not work if data is object – navotera Jul 14 '18 at 11:21
  • i already solve it and use the Flatlist as your suggestion. Here my answer : https://stackoverflow.com/questions/51344825/using-flatlist-in-react-native/51348073#51348073 – navotera Jul 15 '18 at 11:49