In React Native I could not Import List but I can successfully use ListItem

Question

Doing a project for simple FlatList i imported npm i react-native-elements --save

npm i --save react-native-vector-icons

then i linked it

react-native link react-native-vector-icons

when I try to add List in importing react-native-elements can't get suggestions and can't resolve image can be seen here

Code for App.js

import React, {Component} from 'react';
import {ScrollView, FlatList, View} from 'react-native';
import { List, ListItem} from 'react-native-elements';


export default class App extends Component {

  state={
      data: []
    };

  componentWillMount() {
    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() {
    return (
      <View>
          <ScrollView>
        <List>
            <FlatList
                  data={this.state.data}
                  keyExtractor={(x,i) => i}
                  renderItem={({item}) =>
                      <ListItem
                          roundAvatar
                          avatar={{uri: item.picture.thumbnail}}
                          title={`${item.name.first} ${item.name.last}`}
                      />
                  }
              />
          </List>
          </ScrollView>
      </View>
    );
  }
}

Code for index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

The error I received when Running

Tim Tim · Accepted Answer · 2019-05-03T12:18:38

Simple answer: There is no List component available in react-native-elements, that's why you can't import it.

Just remove the import and also the List element in your render function and it should work.

Edit: Since version v1.0.0-beta4 the List component is removed.

If you still want to have the List you can install any version below 1.0.0-beta4 with the following command:

npm install --save [email protected]

Replace @1.0.0-beta3 with any version you want. You can find all available versions under the tab "Versions" here.

In React Native I could not Import List but I can successfully use ListItem

2 Answers