React native Question posted in
The official React Native documentation can be found here.

React native – Why is FlatList asking me to render string in a text while it is already done?

I am trying to display a FlatList. I took the example from the docs but it is not working.

I have the error:

Render Error: Text strings must be rendered within a <Text> component.

I have tried all things, removing quotes from strings, creating arrays and so on.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const ListeEcoles = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={ ({item}) => <Text>{item.key}</Text> }
      />
    </View>
  )
}

export default ListeEcoles;
Tags:

2

Answers


  1. 0

    The code snippet you provided is functioning correctly without any errors. As you mentioned, the text string has already been rendered with the component.

    However, still if you’re not seeing the expected behavior, here are a few things you could check:

    1. Dependencies : Make sure all required dependencies are installed and up to date.

    2. Check the Import: Ensure that you have correctly imported the component from react-native:

      import { Text } from ‘react-native’;

    Login or Signup to reply.
  2. 0

    The error message

    Render Error: Text strings must be rendered within a Text component.

    occurs in React Native when you attempt to render text directly inside a component that does not support text rendering, such as View.

    In React Native, text content must always be wrapped inside a Text component to be properly displayed.

    Incorrect Usage:

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

const App = () => {
  return (
    <View>
      Hello, world! {/* This will cause the error */}
    </View>
  );
};

export default App;

    Corrected Code:

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

    const App = () => {
      return (
        <View>
          <Text>Hello, world!</Text> {/* Correct usage */}
        </View>
      );
    };
    
    export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search