React Native how to fetch data video link from local json file on react native

Question

I prepared an application, I need to get the video links from the data file. What can I do for that.

source={{ ? }} and How do I project 4 videos to the screen using flatlist? Thank you

export const data = [
   {
   id: 1,
   name: "Video1",
   video: "http://example.com/video1.mp4" -> ***how do i do this***
   },
   {
   id: 2,
   name: "Video2",
   video: "http://example.com/video2.mp4" -> ***how do i do this***
   },
   {
   id: 3,
   name: "Video3",
   video: "http://example.com/video3.mp4" -> ***how do i do this***
   },
];

return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={{ alignSelf: "center", width: 320, height: 200 }}
        source={{ ? }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
      />

Example Image: I want to have a video code like the code written here :)

export const data = [

{ 
    id: 1, 
    name: "image1", 
    image: "../assets/image/sun.png" 
},
];

import data from './data';  

function App() { 
    return ( 
      <View>
     <Image  source={data.image}/>
     </View) 
}

I'm a bit confused by the question. I think that all you need to do is import the JSON file. — Linda Paiste, May 24 '21 at 02:12

score 0 · Answer 1 · answered May 23 '21 at 19:31

0

You could use the JavaScript FETCH Api. It is like Jquery but better (I think). It is very easy to fetch a video with this. If you're using a functional component you can use useEffect() to fetch the video when the App is loading (loaded)

Here is an example

fetch('http://example.com/yourvideo.mp4')
  .then(response => response.json())
  .then(data => doSomething());

Now you fetched the video :)

answered May 23 '21 at 19:31

Henrik

828
8
34

where to write this code, export const data = { id: 1, name: "video", video: ?} – kikirim May 23 '21 at 19:36
You have to use data["video"] or data[2] (Not sure about that) :) – Henrik May 24 '21 at 11:54

score 0 · Answer 2 · answered May 23 '21 at 21:30

0

if you put your json file in android's asset and iOS resource, you can use this package to read the file content https://www.npmjs.com/package/react-native-file-asset

answered May 23 '21 at 21:30

Hai Trinh

1
3

score 0 · Answer 3 · answered May 24 '21 at 18:24

return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={{ alignSelf: "center", width: 320, height: 200 }}
        source={{ uri: data?.video }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
      />

React Native how to fetch data video link from local json file on react native

3 Answers3