title: React Native : Flatlist and Array
body: <p>it is a common question surely, but I can not render a FlatList with array source.</p>
  
  <p>I follow this example :<a href="https://medium.com/javascript-in-plain-english/how-to-loop-through-arrays-in-react-3eaa8a14445" rel="nofollow noreferrer">https://medium.com/javascript-in-plain-english/how-to-loop-through-arrays-in-react-3eaa8a14445</a></p>
  
  <p>The example begins with :</p>
  
  <pre><code>let shoppingCart = [
  
  {id: 35, item: 'jumper', color: 'red', size: 'medium', price: 20},
  
  {id: 42, item: 'shirt', color: 'blue', size: 'medium', price: 15},
  
  {id: 71, item: 'socks', color: 'black', size: 'all', price: 5},
  
  ]
  </code></pre>
  
  <p>This how I actually work to fill an array in my work.</p>
  
  <p>Then, I follow the instructions, with an arrangement :</p>
  
  <pre><code> this.items = this.shoppingCart.map((item, key) =&gt;
   &lt;View key={item.id}/&gt; &lt;Text&gt;{item.name}&lt;/Text&gt;&lt;/View&gt;
   );
  </code></pre>
  
  <p>And finally, I set the items as the source of a FlatList :</p>
  
  <pre><code>render(){
  return  (
  &lt;FlatList style = {{flex : 1}}
          data={this.items}            
          keyExtractor={(item, index) =&gt; index}
          renderItem={({ item })=&gt; {
              return item; }
      }/&gt;   
    )
  }
  </code></pre>
  
  <p>I do not understand why I have a blank screen ... I tried to apply different styles, but it shows nothing.</p>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>So, I just tried another example :</p>
  
  <pre><code>render(){
  
      let shoppingCart = [
  
          {id: 35, item: 'jumper', color: 'red', size: 'medium', price: 20},
  
          {id: 42, item: 'shirt', color: 'blue', size: 'medium', price: 15},
  
          {id: 71, item: 'socks', color: 'black', size: 'all', price: 5},
  
          ]
  const _renderItem = ({item}) =&gt; &lt;Text&gt;{item.color}&lt;/Text&gt;
  
  return  (
      &lt;View style = {{background = '#444',flex : 1}}&gt;
         &lt;FlatList 
         data = {shoppingCart}
         renderItem = {_renderItem}/&gt;
  
  &lt;/View&gt;
    )
  }
  </code></pre>
  
  <p>And now I have a blank screen with a warning concerning index.js not found, even if I reset cache...</p>
  
  <p>This is quite disturbing, I made a huge work on the business logic, and complex calculation but I am not able to render a simple list...</p>
  
  <p>Can somebody help me on this point?</p>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>I can't explain, now, I have this message :</p>
  
  <pre><code>Looking for JS files in
  D:\Projects\VSCode\projekt\node_modules\react-native\scripts
  
  Loading dependency graph, done.
  ::ffff:127.0.0.1 - - [26/Mar/2019:01:30:19 +0000] "GET /launch-js-  devtools HTTP/1.1" 200 - "-" "okhttp/3.12.1"
  Error: Unable to resolve module `./index` from `D:\Projects\VSCode\projekt\node_modules\react-native\scripts/.`: The module `./index` could not be found from `D:\Projects\VSCode\projekt\node_modules\react-native\scripts/.`. Indeed, none of these files exist:
  * `D:\Projects\VSCode\projekt\node_modules\react-native\scripts\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `D:\Projects\VSCode\projekt\node_modules\react-native\scripts\index\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  at ModuleResolver.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
  at ResolutionRequest.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
  at DependencyGraph.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
  at D:\Projects\VSCode\projekt\node_modules\metro\src\lib\transformHelpers.js:261:42
  at Server.&lt;anonymous&gt; (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:1038:41)
  at Generator.next (&lt;anonymous&gt;)
  at asyncGeneratorStep (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:99:24)
  at _next (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:119:9)
  ::1 - - [26/Mar/2019:01:30:20 +0000] "GET /index.delta?platform=android&amp;dev=true&amp;minify=false&amp;revisionId=291a9787399f7066 HTTP/1.1" 500 -   "http://localhost:8081/debugger-ui/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
  ::ffff:127.0.0.1 - - [26/Mar/2019:01:30:29 +0000] "GET /onchange  HTTP/1.1" - - "-" "okhttp/3.12.1"
  ::ffff:127.0.0.1 - - [26/Mar/2019:01:30:44 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
  ::ffff:127.0.0.1 - - [26/Mar/2019:01:30:59 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
  </code></pre>
  
  <p>Why a simple FlatList cause so much problems ?
  Again, I tried all that I can : reset cache, delete noe_modules, npm install, npm link...but...nothing works...</p>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>Sorry for long question, but my godness, React Native is similar to my ex wife : 10 minutes of pleasure by month, rest of time it is pain and problems... I am now in a loop of : I resolve index.js problem, and then antoher problems appears : Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault' from 'index.js. I solve it...and..oh yeah..the .index.js problem appears again...pfff...what is this ?</p>
  
  <p><strong>LAST EDIT...THE ANSWER</strong></p>
  
  <p>Finally, I realized that some examples given on the web don't work; syntax errors are written and it is impossible to run them. And I solved the loop of error with a lot of pain. Inspecting my whole code, somewhere I did an import by : import {classX} from './classeX' ... I replace by : import classX from './classeX' and my world changed...it worked...so, with a lot of test, the code below works for me :</p>
  
  <pre><code>import React, { Component } from 'react';
  import {StyleSheet,View,FlatList, Text, Image } from 'react-native';
  
  export default class Test extends Component {
  
  constructor(props) {
    super(props);
  };
  
  sampleData = [
  {
    name: { title: 'mr', first: 'karl', last: 'johnson' },
    email: 'karl.johnson@example.com',
    picture: {
      thumbnail: 'https://randomuser.me/api/portraits/thumb/men/62.jpg',
    },
  },
  {
    name: { title: 'mrs', first: 'asuncion', last: 'gomez' },
    email: 'asuncion.gomez@example.com',
    picture: {
      thumbnail: 'https://randomuser.me/api/portraits/thumb/women/52.jpg',
    },
    nat: 'ES',
  },
  {
    name: { title: 'miss', first: 'gilcenira', last: 'ribeiro' },
    email: 'gilcenira.ribeiro@example.com',
    picture: {
      thumbnail: 'https://randomuser.me/api/portraits/thumb/women/21.jpg',
    },
  },]
  
  renderItem = ({item, index}) =&gt; 
  &lt;View style={styles.row}&gt;
   &lt;Image style={styles.picture} source={{ uri: item.picture.thumbnail }} /&gt;
    &lt;View&gt;
     &lt;Text style={styles.primaryText}&gt;
       {item.name.last + ' ' + item.first}
     &lt;/Text&gt;
     &lt;Text style={styles.secondaryText}&gt;{item.email}&lt;/Text&gt;
   &lt;/View&gt;
  &lt;/View&gt;
  
  render() {
  return(
   &lt;View style ={styles.container}&gt;        
      &lt;Text style = {styles.description}&gt;ok&lt;/Text&gt; 
      &lt;FlatList style={{backgroundColor :'#444',
                color : '#fff'}} 
                data={this.sampleData} 
                renderItem={this._renderItem} 
                keyExtractor={(item =&gt;item.email)}/&gt;   
   &lt;/View&gt;)
   }
  }
  
  const styles = StyleSheet.create({
  container : {
    flex : 1,
    alignItems : 'center',
  },
  
  row: { 
   flexDirection: 'row', 
   alignItems: 'center', 
   padding: 12 
  },
  
  picture: { 
    width: 50, 
    height: 50, 
    borderRadius: 25, 
    marginRight: 18 
  },
  
    primaryText: {
    fontWeight: 'bold',
    fontSize: 14,
    color: 'violet',
    marginBottom: 4,
  },
  
  secondaryText: {
    color: 'darkgrey' 
  },
  
  container : {
    flex : 1,
    alignItems : 'center',
    backgroundColor :'#666',
    flexDirection : 'column'
  },
  
  description: {       
    fontSize: 20,
    color : '#fff',
    textAlign: 'center',
    marginTop: 8,
    marginBottom : 8,
    top : 4
    },
  
   });
  </code></pre>
  
  <p>If it can help somebody...</p>