Process to call state values : Part 8

To run all array as loop using our CardWrapper and CardInner, We will use map function . map() will run our design and place value of each array items untill it is null


So it will not be a good idea to write a code in return . I think we should make a helper function and use map and CardWrapper and CardInner component in this function and then call this function in return function.


So create a funtion before render() function of VideoList component


renderthumbnails() {
       return =>
      <CardWrapper key={}>
      style={{ height: 280, width: null }}
      source={{ uri: video.thumbnail }}

Now you can see in above code we are using Image component in card so go on top and we will import Image component from react-native so change import line like this

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

Now we are ready with our design and listing function so next step is to call this function in return. To call this function we will use curly braces using view component.

So in return please remove all cardWrapper and CardInner code and  add code like this, we have already called these component in renderthumbnails function


return (


Now refresh simulator and check result .. you can see all data with title image and video id


But you can see page scroll is not working. So to fix this we will use <ScrollView> component


Calling ScrollView component


First import ScrollView from react-native so add ScrollView on top


import { View, Text, Image, ScrollView } from ‘react-native’;


And now add ScrollView in View so



Now scroll will work , check it by refreshing Simulator


In Place of button i have called video ID . Now in further code we will create a button component in common folder and use it and then call video id on press to send to new screen .

© Copyrights 2014 by STW Services LLP