Develop Reference

how to play local mp4 video in react native

Here In my code I am trying to play video from my local . I have stored one mp4 video in my code file. I have imported it where I have to play it . I am passing correct value but video is not coming on screen .
Only on blank screen is coming .
export const TRAININGVIDEO = require('./tutorialvid.mp4')
import Video from 'react-native-video';
import { TRAININGVIDEO, USER_LOGIN } from '../../images';
const deviceHeight = Dimensions.get('window').height;
export default class TrainingAndGuide extends Component {
constructor(props) {
super(props)
this.state = {
isLoading: false,
title: "Training Guide Video",
icon: 'settings',
iconType: 'MaterialCommunityIcons',
}
}
render() {
const { updateResponse, navigation, trainigVideos } = this.props;
const { title, icon, modalVisible } = this.state;
return (
<ImageBackground source={BG} style={{ width: '100%', height: '100%' }} resizeMode="cover">
<View>
<Header title={title} icon={icon} navigation={navigation} />
</View>
<View style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
width: "100%",
height: '50%'
}}>
<Video source={{ TRAININGVIDEO }} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}}
// Store reference
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo} />
</View>
</ImageBackground>
)
}
}
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
width: "100%",
height: "50%"
},
});

you can use react-native-video package to play local or uri video file
https://www.npmjs.com/package/react-native-video
const styles = StyleSheet.create({
VideoBG: {
position: 'absolute',
width: 150,
height: 300
},
});

Try using values in pixels:
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
width: "150px",
height: "300px"
},
});
as well as adding top: 0or bottom: 0 style since the position that you are using is absolute

how do i get react native to play multiple local files

i want to play multiple videos and i have this set up but the videos wont show i don't know if i have to add the path or am i just adding everything wrong from const i basically know how to play one video buy adding it to the souce but i want to play more but i don't know how to import them from a local file?
any suggestions would help thanks in advance
import React from 'react';
import { StyleSheet, Text, View, Dimensions,ImageBackground,ScrollView } from 'react-native';
import { Video } from 'expo';
import { MaterialIcons, Octicons } from '#expo/vector-icons';
const VIDEOS = [ // replace these links with links to your videos
'./spiderman.mp4',
'C:\Windows\System32\avengerproject2\spiderman.mp4',
'C:\Windows\System32\avengerproject2\spiderman.mp4'
]
export default class App extends React.Component {
state = {
currentVideo: 0,
mute: false,
shouldPlay: true,
}
handlePlayAndPause = () => {
this.setState(prevState => ({
shouldPlay: !prevState.shouldPlay
}));
}
handleVolume = () => {
this.setState(prevState => ({
mute: !prevState.mute,
}));
}
forwardButton = () => {
if (this.state.currentVideo != VIDEOS.length-1) {
this.setState({currentVideo: this.state.currentVideo + 1});
} else {
this.setState({currentVideo: 0});
}
}
backButton = () => {
if (this.state.currentVideo != 0) {
this.setState({currentVideo: this.state.currentVideo - 1});
} else {
this.setState({currentVideo: VIDEOS.length-1});
}
}
render() {
const { width } = Dimensions.get('window');
return (
<View style={styles.container}>
<ImageBackground
source={{uri:'https://wallpapercave.com/wp/aqm17QD.jpg'}}
style={{width: '100%', height: '100%'}}>
<View >
<Text style={{ textAlign: 'center', fontSize: 18,
fontWeight: 'bold' }}>Welcome spiderman</Text>
<Video source =
{{uri: VIDEOS[this.state.currentVideo]}}
shouldPlay={this.state.shouldPlay}
resizeMode="cover"
style={{ width, height: 300 }}
isMuted={this.state.mute}
/>
<View style={styles.controlBar}>
<MaterialIcons
name={this.state.mute ? "volume-mute" :
"volume-up"}
size={45}
color="white"
onPress={this.handleVolume}
/>
<MaterialIcons
name={this.state.shouldPlay ? "pause" :
"play-arrow"}
size={45}
color="white"
onPress={this.handlePlayAndPause}
/>
</View>
</View>
<View style={{flex: .25, flexDirection: 'row',
alignItems: 'center'}}>
<MaterialIcons
name={"navigate-before"}
size={150}
color="white"
onPress={this.backButton}
/>
<Text>Next Video</Text>
<MaterialIcons
name={"navigate-next"}
size={150}
color="white"
onPress={this.forwardButton}
/>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#B32E2E',
alignItems: 'center',
justifyContent: 'center',
},
controlBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
});

Your problem looks like you are unable to access to your video files. (Not sure about rest of your code also)
If you want to access any type of asset in your app, you have 2 choices.
1) Stream video from a server.
Which would allow you to just add a link of the video like you do with your local mp4 files. (https://videostoragesite.com/spiderman.mp4)
2) Add assets to your bundle.
Which you can do with Expo's asset manager, or eject your project to a vanilla react native project and bundle the mp4 files into your app using Xcode or Android Studio.

About site display of React-native application

Site display on webview
Current practice, I am creating a browser application using React-native.
Google and other URLs will be displayed. However, the specific site is not displayed, it becomes a white screen.
※The address is https, and that site is displayed properly on PC or real machine Google Chrome.
Does this mean that there is a flaw in the SSL of the site?
please tell me.
We are doing site designation with source = {{uri: 'https://www.google.com/'}} in the code below.
##App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
const WEBVIEW_REF = "WEBVIEW_REF";
import React, { Component } from "react";
import { WebView } from "react-native";
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
Button,
Image
} from "react-native";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
android:
"Double tap R on your keyboard to reload,\n" +
"Shake or press menu button for dev menu"
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
canGoBack: false,
canGoForward: false,
loading: false
};
}
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ backgroundColor: "#FE9A2E", flex: 0.15 }}>
<Image
source={require("./header.png")}
style={{ alignSelf: "center" }}
/>
</View>
<View style={{ flex: 0.8 }}>
<WebView
ref={WEBVIEW_REF}
source={{ uri: "https://www.google.co.jp/" }}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
/>
</View>
<View style={{ alignSelf: "center", flex: 0.08, flexDirection: "row" }}>
<View style={styles.buttonContainer}>
<Button
onPress={this.onBack.bind(this)}
title="←"
color="#FE9A2E"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={this.onReload.bind(this)}
title="↺"
color="#FE9A2E"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={this.onForward.bind(this)}
title="→"
color="#FE9A2E"
/>
</View>
</View>
</View>
);
}
onBack() {
this.refs[WEBVIEW_REF].goBack();
}
onForward() {
this.refs[WEBVIEW_REF].goForward();
}
onReload() {
this.refs[WEBVIEW_REF].reload();
}
onNavigationStateChange(navState) {
this.setState({
canGoBack: navState.canGoBack,
canGoForward: navState.canGoForward,
loading: navState.loading
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
},
buttonContainer: {
width: 100,
margin: 6
}
});
AppRegistry.registerComponent("App", () => App);

you should give a width a height style to your WebView tag. Try this and let me know.
add this hier in your webView tag style={styles.webViewStyles}, then add the styles below in your StyleSheet. webViewStyles:{height: 100, width: 100}, dont forget the comma before you add the styles in your StyleSheet.

How do I overlay ActivityIndicator in react-native?

I have a View with few form elements and a button (TouchableHighlight). On clicking the button, an Activity Indicator should be shown as an overlay to the existing view. The Activity Indicator should be centered within the page and the existing view should be slightly blurred to indicate overlay. I tried different options but could not get it to work.
render() {
const { username, password } = this.state;
return (
<View style={styles.container}>
<View style={styles.group}>
<Text style={styles.text}>Username:</Text>
<TextInput
style={styles.input}
onChangeText={this.handleUserNameChange.bind(this)}
value={username}
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.group}>
<Text style={styles.text}>Password:</Text>
<TextInput
style={styles.input}
secureTextEntry={true}
onChangeText={this.handlePasswordChange.bind(this)}
value={password}
underlineColorAndroid="transparent"
/>
</View>
<TouchableHighlight
style={styles.button}
onPress={this.handleLogin.bind(this)}>
<Text style={styles.buttonText}>Logon</Text>
</TouchableHighlight>
</View>
);
}
Existing styles:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 60
},
group: {
alignItems: 'flex-start',
padding: 10
},
input: {
width: 150,
padding: 2,
paddingLeft: 5,
borderColor: 'gray',
borderWidth: 1
},
text: {
padding: 0
},
button: {
width: 150,
backgroundColor: '#2299F2',
padding: 15,
marginTop: 20,
borderRadius: 5
},
buttonText: {
textAlign: 'center',
color: '#fff',
fontSize: 24
},
});
I need to an ActivityIndicator to the above View, overlay the view, and center the ActivityIndicator.

For this to work, you'd need to absolute position it, and render it after the elements that should be underneath the overlay:
loading: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
Then simply compose it into the render method conditionally, based on a loading state. I am going to assume this.handleLogin sets some sort of loading state already.
Make sure it's rendered last so it takes precedence.
...
{this.state.loading &&
<View style={styles.loading}>
<ActivityIndicator size='large' />
</View>
}

Here is a complete example using create react native app.
import React from 'react';
import {StyleSheet, ActivityIndicator, View} from "react-native";
export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {}
render() {
return (
<View
style={{flex: 1}}
>
//Add other content here
{this.state.loading &&
<View style={styles.loading}>
<ActivityIndicator/>
</View>
}
</View>
);
}
}
showLoading() {
this.setState({loading: true})
}
hideLoading() {
this.setState({loading: false})
}
const styles = StyleSheet.create({
loading: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
opacity: 0.5,
backgroundColor: 'black',
justifyContent: 'center',
alignItems: 'center'
}
})

You can use StyleSheet.absoluteFill to shorten code.
Add this to your render:
<View style={styles.container}>
//... other code here
{this.state.loading && <View
style={{
...StyleSheet.absoluteFill,
justifyContent: 'center',
alignItems: 'center',
}}>
<ActivityIndicator />
</View>}
</View>
Improvement:
You can also create a Loading component:
Loading.js
import React from 'react';
import {View, ActivityIndicator, StyleSheet} from 'react-native';
export const Loading = ({theme = 'white', size = 'large'}) => {
const color = theme === 'white' ? '#00bdcd' : '#fff';
return (
<View
style={{
...StyleSheet.absoluteFill,
justifyContent: 'center',
alignItems: 'center',
}}>
<ActivityIndicator size={size} color={color} />
</View>
);
};
Then use it anywhere you want
<View style={styles.container}>
//... other code here
// remember to import Loading component
{this.state.loading && <Loading />}
</View>

You can build a nice overlay using the activity indicator component by also leveraging the modal capabilities like Sanaur suggests.
For example you can use the below functional component. You can control it's visibility through the show prop that you can tie to a state in your screen.
An example that you can adapt to your needs.
const ModalActivityIndicator = props => {
const {
show = false,
color = "black",
backgroundColor = "white",
dimLights = 0.6,
loadingMessage = "Doing stuff ..."
} = props;
return (
<Modal transparent={true} animationType="none" visible={show}>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: `rgba(0,0,0,${dimLights})`
}}
>
<View
style={{
padding: 13,
backgroundColor: `${backgroundColor}`,
borderRadius: 13
}}
>
<ActivityIndicator animating={show} color={color} size="large" />
<Text style={{ color: `${color}` }}>{loadingMessage}</Text>
</View>
</View>
</Modal>
);
};
and in your screen, in the render's return, just add it there as a child (please ignore the rest of the code, I put it there for context).
return (
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={{ padding: 13, flex: 1}}>
<ModalActivityIndicator show={screenIsWaiting} />
<View
style={{
where screenIsWaiting is just a state, for example
const [screenIsWaiting, setScreenIsWaiting] = useState(false);
To test it you can add a button somewhere,
<Button
title="TestButton"
onPress={async () => {
setScreenIsWaiting(true);
await sleep(5000);
setScreenIsWaiting(false);
...
}}
/>
where sleep is a function defined as
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
I found the sleep() idea on stackoverflow on another post.
You can of course also define the
<ModalActivityIndicator show={screenIsWaiting} ... />
only once in your App's root component and trigger it's display and props via a global state container like redux.

There is a library available for this react-native-loading-spinner-overlay.
You can simply install it using
npm install react-native-loading-spinner-overlay --save
and can import into your project using
import Spinner from 'react-native-loading-spinner-overlay';
Here is how to use it
<Spinner
//visibility of Overlay Loading Spinner
visible={this.state.loading}
//Text with the Spinner
textContent={'Loading...'}
//Text style of the Spinner Text
textStyle={styles.spinnerTextStyle}
/>

STEP 1:
Create the component for the spinner:
export const OverlaySpinner = () => {
return (
<View style={styles.spinnerView}>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
};
STEP 2:
Create the style for the spinner view (using zIndex is very important to make sure the view is over everything on the screen):
spinnerView: {
position: "absolute",
zIndex: 1,
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#F5FCFF88",
},
STEP 3:
Make the initial state for the spinning component:
const [showSpinner, setshowSpinner] = useState(true);
STEP 4:
Use the component and don't forget to import it (don't forget to dismiss the keyboard on submit)
{showSpinner && <OverlaySpinner />}

I suppose you should use Modal to overlay activity indicator. Following is an example:
<Modal
transparent={true}
animationType={'none'}
visible={loading}
onRequestClose={() => {console.log('close modal')}}>
<View style={styles.modalBackground}>
<View style={styles.activityIndicatorWrapper}>
<ActivityIndicator
animating={loading} />
</View>
</View>
</Modal>

Add in view of loading
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'

set in View of Activity Indicator
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'

Here my code for a functional component for anyone looking to achieve this with nativebase as design system. useColorScheme is another hook I use for detecting dark mode.
import { Flex, Spinner } from "native-base"
import React from "react"
import useColorScheme from "../../hooks/useColorScheme"
export default function Loading() {
const colorScheme = useColorScheme()
return (
<Flex
position="absolute"
alignItems="center"
justifyContent="center"
top={0}
left={0}
right={0}
bottom={0}
backgroundColor={colorScheme === "dark" ? "coolBlack.500" : "white"}
>
<Spinner size="lg" color={colorScheme === "dark" ? "white" : "coolBlack.500"} />
</Flex>
)
}

How to make <Text /> as watermark of images in React Native

To make <Text /> as watermark of images, it shows in official Docs:
Background Image via Nesting
A common feature request from developers familiar with the web is background-image. To handle this use case, simply create a normal <Image> component and add whatever children to it you would like to layer on top of it.
return (
<Image source={...}>
<Text>Inside</Text>
</Image>
);
I tried, the "Inside" has white background, not the part of the image.
How to make "Inside" as a watermark of the image? Thanks.

You can use ImageBackground component
Link-> https://reactnative.dev/docs/imagebackground
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000c0"
}
});
export default App;