Blog

Process to call state values : Part 8

January 13, 2019/ Javascript frameworks, Reactnative / 0 comments

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

1. renderthumbnails() {
2. return this.state.videos.map(video =>
3. <CardWrapper key={video.id}>
4. <CardInner>
5. <View>
6. <Text>{video.title}</Text>
7. </View>
8. </CardInner>
9. <Image
10. resizeMode={Image.resizeMode.cover}
11. style={{ height: 280, width: null }}
12. source={{ uri: video.thumbnail }}
13. />
14. <CardInner>
15. <Text>{video.id}</Text>
16. </CardInner>
17. </CardWrapper>
18. );
19. }

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

1. 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

1. …..
3. return (
4. <View>
5. {this.renderthumbnails()}
6. </View>
7. );
9. ………

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

1. …….
3. <View>
4. <ScrollView>
5. {this.renderthumbnails()}
6. </ScrollView>
7. </View>
8. ……..

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 .