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 this.state.videos.map(video =>
      <CardWrapper key={video.id}>
      <CardInner>
        <View>
          <Text>{video.title}</Text>
        </View>
      </CardInner>
      <Image
      resizeMode={Image.resizeMode.cover}
      style={{ height: 280, width: null }}
      source={{ uri: video.thumbnail }}
      />
      <CardInner>
        <Text>{video.id}</Text>
      </CardInner>
      </CardWrapper>
    );
  }

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 (
      <View>
      {this.renderthumbnails()}
      </View>
    );

……...

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

…….

<View>
      <ScrollView>
      {this.renderthumbnails()}
      </ScrollView>
</View>
……..

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