Video File not working offline?

#1

I have a video on my app built with create-react-native-app and I’m using the Video component of expo.io . I am displaying a local video, and on my application this is working when connected to the internet, but when the app is offline the video does not play/work/load.
Here is my project structure:

App.js          app.json        node_modules        yarn.lock
App.test.js     images          package.json
README.md       my-app-key.keystore videos

Here is the code for the video player component:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { Video } from 'expo';
class Player extends Component {
  constructor(props){
    super(props);
  }
  render(){
    return(
     <Video
      source={require('./videos/asthma-1.mp4')} //local video
      rate={1.0}
      volume={1.0}
      muted={false}
      useNativeControls
      resizeMode="cover"
      shouldPlay
      isLooping
      style={{ width: 900, height: 450, position:'relative',left:350,bottom:410 }} />
      )
  }
}

What am I doing wrong? Why is the video being delivered online but not offline?
I am using it on an android device btw
Edit: Also, I noticed that the images located in the image folder work both offline and online. Did I structure/name my videos folder incorrectly for that not to load offline?

#2

When you say “work online” – do you mean once you’ve published your app?

#3

It’s a standalone app. I just use the apk file to download directly to the device. By “work online” I mean when the apk/app is installed to the users device and they have wifi access @dikaiosune

#4

OK, yeah, I understand. Can you send me the expo url of your project?

#5

@dikaiosune How do I get the expo url?

#6

You should see a link to your project if you go onto your profile on expo.io.

#7

https://exp.host/@moemkr/signaldemov3 @dikaiosune

#8

any thoughts/solutions @dikaiosune

#9

Have you also created an Asset for the video file?

#10

@dikaiosune No I haven’t, I wasn’t aware of Expo.Asset() any reference repos with a downloaded/offline asset/video

#11

Hm, I think actually you maybe don’t need to explicitly create an asset. @nikki might have an idea of why that path works locally but doesn’t get uploaded for publish.

#12

Can you paste your babelrc file?

#13

Here is the babelrc file: @dikaiosune

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}
#14

@nikki might have an idea of why that path works locally but doesn’t get uploaded for publish.”

maybe I misinterpretted what you mean in this sentence, but the problem is that the video file is working when the device is connected to wifi, but if the wifi is down the video file is not working.

#15

@dikaiosune @nikki any update on this?

#16

@dikaiosune Further update: I have altered my repo to add some additional features (unrelated to the offline video playback) and when I run exp:build android/exp:build status I eventually run into the following:

[exp] No currently active or previous builds for this project.
[exp] Starting build process...
[exp] Publishing...
[exp] Building iOS bundle
[exp] Building Android bundle
[exp] Analyzing assets
[exp] Uploading assets
[exp] Uploading /assets/images/heart.png
[exp] Uploading /assets/images/whiteheart.png
[exp] Uploading /assets/thumbnails/asthma-2.jpeg
[exp] Uploading /assets/thumbnails/asthma-3.jpeg
[exp] Uploading /assets/thumbnails/asthma-1.jpeg
[exp] Uploading /assets/videos/hypertension-3.mp4
[exp] Uploading /assets/videos/hyperlipidemia-1.mp4
[exp] Uploading /assets/videos/hyperlipidemia-2.mp4
[exp] Uploading /assets/videos/pneumonia-3.mp4
[exp] Uploading /assets/videos/hypertension-2.mp4
[exp] Uploading /assets/videos/copd-3.mp4
[exp] Uploading /assets/videos/copd-2.mp4
[exp] Uploading /assets/videos/hypertension-1.mp4
[exp] Uploading /assets/videos/diabetes-1.mp4
[exp] Uploading /assets/videos/emphysema-2.mp4
[exp] Uploading /assets/videos/narcolepsy-1.mp4
[exp] Uploading /assets/videos/narcolepsy-2.mp4
[exp] Uploading /assets/videos/asthma-3.mp4
[exp] Uploading /assets/videos/diabetes-2.mp4
[exp] Uploading /assets/videos/pneumonia-1.mp4
[exp] Uploading /assets/videos/asthma-2.mp4
[exp] Uploading /assets/videos/pneumonia-2.mp4
[exp] Uploading /assets/videos/copd-1.mp4
[exp] Uploading /assets/videos/emphysema-1.mp4
[exp] Uploading /assets/videos/emphysema-3.mp4
[exp] Uploading /assets/videos/diabetes-3.mp4
[exp] Uploading /assets/videos/hyperlipidemia-3.mp4
[exp] Uploading /assets/videos/narcolepsy-3.mp4
[exp] Uploading JavaScript bundles
[exp] Published

Here are my actual assets though
moe$ tree
.
├── images
│ ├── 2.png
│ ├── 3.png
│ ├── Signal_Logo.png
│ ├── heart.png
│ ├── heart.svg
│ ├── loader.svg
│ ├── logo.webp
│ ├── soundoff.png
│ ├── soundon.png
│ ├── whiteheart.png
│ └── whiteheart.svg
├── thumbnails
│ ├── asthma-1.jpeg
│ ├── asthma-2.jpeg
│ ├── asthma-3.jpeg
│ ├── copd-1.jpeg
│ ├── copd-2.jpeg
│ ├── copd-3.jpeg
│ ├── diabetes-1.jpeg
│ ├── diabetes-2.jpeg
│ ├── diabetes-3.jpeg
│ ├── emphysema-1.jpeg
│ ├── emphysema-2.jpeg
│ ├── emphysema-3.jpeg
│ ├── hyperlipidemia-1.jpeg
│ ├── hyperlipidemia-2.jpeg
│ ├── hyperlipidemia-3.jpeg
│ ├── hypertension-1.jpeg
│ ├── hypertension-2.jpeg
│ ├── hypertension-3.jpeg
│ ├── narcolepsy-1.jpeg
│ ├── narcolepsy-2.jpeg
│ ├── narcolepsy-3.jpeg
│ ├── pneumonia-1.jpeg
│ ├── pneumonia-2.jpeg
│ └── pneumonia-3.jpeg
└── videos
├── asthma-1.mp4
├── asthma-2.mp4
├── asthma-3.mp4
├── copd-1.mp4
├── copd-2.mp4
├── copd-3.mp4
├── diabetes-1.mp4
├── diabetes-2.mp4
├── diabetes-3.mp4
├── emphysema-1.mp4
├── emphysema-2.mp4
├── emphysema-3.mp4
├── hyperlipidemia-1.mp4
├── hyperlipidemia-2.mp4
├── hyperlipidemia-3.mp4
├── hypertension-1.mp4
├── hypertension-2.mp4
├── hypertension-3.mp4
├── narcolepsy-1.mp4
├── narcolepsy-2.mp4
├── narcolepsy-3.mp4
├── pharma_ads
│ ├── pharma-1.mp4
│ ├── pharma-2.mp4
│ ├── pharma-3.mp4
│ ├── pharma-4.mp4
│ └── pharma-5.mp4
├── pneumonia-1.mp4
├── pneumonia-2.mp4
└── pneumonia-3.mp4

At first glance I thought videos or images with similar names might be considered duplicates and thus not uploaded, it seems however it seems to be random - for instance loader.svg is not uploaded. Can you help me figure this out? My team absolutely needs to have these videos accessible offline.

#17

Are those video files still loadable when online? I don’t think we upload every file on every publish, only those that have changed.

#18

same problem .
WHAT TO DO ?