MayWheather
MayWheather

Reputation: 486

ReferenceError can't find variable flatlist and Element Type Invalid

I was following tutorial and I got 'ReferenceError can't find variable flatlist' error, then I deleted the code and copied from the github to check if I might missed something and it's still didn't work.

import React, {useState} from 'react';
import  {StyleSheet, Text, View,FlatList}  from 'react-native';
import Header from './components/header';




export default function App () {
  const [todos, setTodos] = useState([
    { text: 'buy coffee', key: '1' },
    { text: 'create an app', key: '2' },
    { text: 'play on the switch', key: '3' }
  ]);
    return (
    <View style={styles.container}>
      <Header />
      <View style={styles.content}>
        {/* add todo form */}
        <View style={styles.list}>
          <FlatList
            data={todos}
            renderItem={({item}) => (
              <Text>{item.text}</Text>
            )}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content:{
    padding: 40,
   },
  list:{
    marginTop:20,
  } 
});

Header :

import React from 'react';
import  {StyleSheet, Text, View}  from 'react-native';


export default function Header() {
    return(
        <View style={styles.header}>
            <Text style={styles.title}>My Todo List</Text>
        </View>
    )

}

const styles= StyleSheet.create({
    header:{
        height: 80,
        paddingTop: 38,
        backgroundColor: 'red',
    },
    title:{
        textAlign: 'center',
        color:'#fff',
        fontSize: 20,
        fontWeight:'bold',
    }

});

export default Header;

Perhaps something changed in the version or something else. I will be grateful if you can tell how I can fix the error.

Edit: I changed the casing from Flatlist to FlatList and I got error 'Element type invalid: expected a string (for built- in components)'. \ Screenshot

Upvotes: 0

Views: 731

Answers (2)

Adeel
Adeel

Reputation: 134

change case of Flatlist import as:

import  {StyleSheet, Text, View,FlatList}  from 'react-native';

check export of your header component. You have exported Header Component two time.

Upvotes: 1

Maxim Stepanov
Maxim Stepanov

Reputation: 7

Try Replace Flatlist with FlatList

Correct: import {StyleSheet, Text, View,FlatList} from 'react-native';

Also, try to export as Class, if it's entry point:

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    todos: [
      { text: 'buy coffee', key: '1' },
      { text: 'create an app', key: '2' },
      { text: 'play on the switch', key: '3' },
    ],
  };

  render() {
    const { todos } = this.state;
    return (
      <View style={styles.container}>
        <Header />
        <View style={styles.content}>
          {/* add todo form */}
          <View style={styles.list}>
            <FlatList
              data={todos}
              renderItem={({ item }) => <Text>{item.text}</Text>}
            />
          </View>
        </View>
      </View>
    );
  }
}

Upvotes: 0

Related Questions