I would like to install a package of react-native-video for creating a my own Adalo Component

[nanigao]

The purpose is to create an Adalo Component that can play in the background.

In other words, I want the audio of the video to play even when the screen is locked or moved to another app in iOS app or Android.
There is already a component named “Plyr Video” created by miniflow in the Marketplace.

However, “Plyr Video” can not support the continuous video playing when closing an app.
Therefore, I would like to create a my own Adalo Component.

here’s what i did

npx create-adalo-component my-component
cd my-component
npx adalo login

npm install react-native-video --save
npx adalo dev

And my code (src/index.js)

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import Video from "react-native-video";

class AdaloCompnent extends Component {
	render() {
		return (
			<View style={styles.wrapper}>
        <Video
        source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
        style={{ width: 300, height: 300 }}
        controls={true}
        ref={(ref) => {
          this.player = ref
        }} />
			</View>
		)
	}
}

const styles = StyleSheet.create({
	wrapper: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
	}
})

export default AdaloCompnent

The error occured when I execute npx adalo dev. The error messages as below:

ERROR in ./node_modules/react-native-video/Video.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/takehirotakiuchi/Desktop/adalo-component/node_modules/react-native-video/Video.js: Unexpected token (78:24)

  76 |   };
  77 |
> 78 |   save = async (options?) => {
     |                         ^
  79 |     return await NativeModules.VideoManager.save(options, findNodeHandle(this._root));
  80 |   }

If you notice anything, please let me know.

[TKOTC]

Hi, and welcome to the Adalo community.

The easiest answer to your question would be to go into your node_modules folder and edit the file deleting the ‘?’. so open /node_modules/react-native-video/Video.js and delete the question mark that is giving you the error.

another way around you issue is to install ‘metro-react-native-babel-preset’ into your project using npm install -D metro-react-native-babel-preset, then go into your node-modules folder again and edit /node_modules/@adalo/cli/webpackConfig.js and add ‘metro:metro-react-native-babel-preset’ to your presets so it knows how to deal with the question mark, like so,

presets: ['@babel/preset-react', '@babel/preset-env', 'module:metro-react-native-babel-preset']

The bad part about doing it this way is everytime you install a new package via npm you will need to re-edit the files.

There is a bug in the adalo-cli that prevents using custom webpacks. In @adalo/cli/src/dev on line 296 it is

if (webpackConfig) preferredConfig = defaultConfig

rather than

if (webpackConfig) preferredConfig = webpackConfig

so you cannot get around editing the node_module file.

The sad news is once you fix that issue, you will encounter many other issues with react-native-video. It uses react-native-dom to render it in the web, whereas Adalo uses react-native-web.

To fix this, in your src/components/my-component folder create a new file called index.web.js

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

class AdaloCompnent extends Component {
	render() {
		return (
			<View style={styles.wrapper}>
				<Text>Video player will not work in the web</Text>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	wrapper: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
	}
})

export default AdaloCompnent

Once you have done that you will be able to design the app in Adalo. When you build the App for iOS or Android the video player should be on the screen properly.

I hope this helps

[nanigao]

Thank you for your great help!!
I followed your instructions and it worked, The “npm run start” is successful.
I tried the second solution you gave me, which is a bit more complicated.

I have attached a diagram showing the changes I have made.

[TKOTC]

Glad to hear! Best of luck with your project.