In react native how to repeat same render n times using json data,please explain clearly without any hesitate

Question

here I am trying to repeat one view it contains image,icon,and some text using fab button on press with the help of json and for loop,if it is done it is going to execute or it will throw the errors,suggest best method to do this.

Answer 1

You could use the map function to repeat a component multiple times.

export default function AppExample({jsonList}) {

  const getCustomView = () => {
    return jsonList.map((item, index) => {
      return (
        <MyCostomView
          key={item.id}
          item={item}
        />
      );
    });
  };

  return (
      <View>
        {getCustomView()}
      </View>
  );
}

Here jsonList is an array of objects. MyCustomView is another component that includes your image text, use key with some unique id like image URL (if any).

Answer 2

use Flatlist for rendering view multitple times

 <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />

where data can be your JSON data and renderItem Will be your View that you want to repeat.

For detail, example check this