FlatList
// Some code
import { FlatList } from 'native-base'
import React from 'react'
import { View, StyleSheet, TouchableHighlight } from 'react-native';
import { Dimensions } from 'react-native';
import VideoExploreComponent from '../Components/VideoExploreComponent';
const windowHeight = Dimensions.get('window').height;
const windowWidth = Dimensions.get('window').width;
function ExploreScreen() {
const dummyVideo = [
'https://v16-webapp.tiktok.com/f9f04d16df376b0370d33b2486eb586c/635999ec/video/tos/useast2a/tos-useast2a-pve-0037-aiso/240989a64a7249e1acdf2471d6253496/?a=1988&ch=0&cr=0&dr=0&lr=tiktok&cd=0%7C0%7C1%7C0&cv=1&br=3740&bt=1870&cs=0&ds=3&ft=6-LrVjrH9wUxR21V7N6~OyXq3bgIHCfxte4cZgBgIRkSgl&mime_type=video_mp4&qs=0&rc=NWY4ODw2ODo8Zjk2OztpM0BpanNlO2Q6ZnA2ZzMzZjgzM0BgLjUwNDNiXjIxNTU2NjY1YSM1Y2RxcjQwMl9gLS1kL2Nzcw%3D%3D&l=2022102614343501025105818209209C41&btag=80000',
'https://v16-webapp.tiktok.com/179e089530c3a9f0760a2f79bae15983/63599a05/video/tos/useast2a/tos-useast2a-pve-0037-aiso/b4de3a0a52734297859b39b537864468/?a=1988&ch=0&cr=0&dr=0&lr=tiktok&cd=0%7C0%7C1%7C0&cv=1&br=3534&bt=1767&cs=0&ds=3&ft=6-LrVjrH9wUxR21V7N6~OyXq3bgIHCfxte4cZgBgIRkSgl&mime_type=video_mp4&qs=0&rc=NzRlODhpOWg8Njk8OmRlN0BpajZxM2Y6ZnRuZzMzZjgzM0BhLWAwY19fNjExMjJfYS9hYSMyc29icjRnajRgLS1kL2Nzcw%3D%3D&l=2022102614343501025105818209209C41&btag=80000',
'https://v16-webapp.tiktok.com/69d4f0fed80f02b9f5e322ff8c406418/635999fd/video/tos/useast2a/tos-useast2a-pve-0037-aiso/19610b336c6e421e99917e2a5dcc17c2/?a=1988&ch=0&cr=0&dr=0&lr=tiktok&cd=0%7C0%7C1%7C0&cv=1&br=2810&bt=1405&cs=0&ds=3&ft=6-LrVjrH9wUxR21V7N6~OyXq3bgIHCfxte4cZgBgIRkSgl&mime_type=video_mp4&qs=0&rc=Ojk8ZGQ0NzU4aWk4ZTMzOUBpMzk2dTs6ZnA3ZjMzZjgzM0BjX2IwLzYuNTUxL2JfNDYtYSNjbjRocjRnZWBgLS1kL2Nzcw%3D%3D&l=2022102614343501025105818209209C41&btag=80000',
'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
'http://techslides.com/demos/sample-videos/small.mp4'
]
return (
<FlatList
data={dummyVideo}
keyExtractor={(item, index) => `${item + index}`}
numColumns='2'
renderItem={({ item }) => {
// console.log(item, 'ini kodok')
return <VideoExploreComponent video={item} />
// return <Text>{item}</Text>
}}
style={styles.video}
/>
)
}
const styles = StyleSheet.create({
video: {
width: '100%',
height: '100%',
},
});
export default ExploreScreen
Last updated
Was this helpful?