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
Related
I want my avatar component to show the avatar with the URL passed to the component. So if I pass avatar1 it shows avatar1. I have tried several methods, but nothing seems to work.
My avatar component looks like this currently. I want to get rid of the static URL
export default function Avatar() {
return (
<Image source={require("../assets/avatar.png")} style={styles.avatarStyle} />
);
}
const styles = StyleSheet.create({
avatarStyle: {
resizeMode: 'contain',
height: "60%",
alignSelf: "flex-start",
position: "absolute",
bottom: 0
}
});
Probably you trying to pass this avatar1 via props so you need to use the props, passing it to the function
export default function Avatar({avatarUri}) {
return (
<Image source={{uri: avatarUri}} style={styles.avatarStyle} />
);
}
const styles = StyleSheet.create({
avatarStyle: {
resizeMode: 'contain',
height: "60%",
alignSelf: "flex-start",
position: "absolute",
bottom: 0
}
});
https://reactnative.dev/docs/props
Make sure the next things:
Image path check correct path
You should add the width style param to the image, it is required
to render.
resizeMode it's a prop of Image, not a style param
Fixed style:
const styles = StyleSheet.create({
avatarStyle: {
height: "60%",
width: 150, // FOR EXAMPLE
alignSelf: "flex-start",
position: "absolute",
bottom: 0
}
});
The complete code:
export default function Avatar() {
return (
<Image source={require("../assets/avatar.png")} style={styles.avatarStyle} resizeMode='contain'/>
);
}
const styles = StyleSheet.create({
avatarStyle: {
height: "60%",
width: 150, // FOR EXAMPLE
alignSelf: "flex-start",
position: "absolute",
bottom: 0
}
});
I want to make a cropedd image to fill all the view in my app.
My Code now is right this:
But I wanted that this small square with Homer eating this donuts fill all the screen, like this simulation I did:
This is my code:
import * as React from 'react';
import { View, Image, StyleSheet } from 'react-native';
export default class CroppedImage extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.cropped}>
<Image
style={styles.image}
source={{
uri:
'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
}}
/>
</View>
</View>
);
}
}
const OFFSET_LEFT = 0;
const OFFSET_TOP = 0;
const IMAGE_WIDTH = 239 * 1.5;
const IMAGE_HEIGHT = 391 * 1.5;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6699CC'
},
bg: {
opacity: 0.25,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT
},
image: {
marginLeft: -OFFSET_LEFT,
marginTop: -OFFSET_TOP,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT
},
cropped: {
width: 150,
height: 150,
overflow: 'hidden',
position: 'absolute'
}
});
Any help here?
Try to add the property resizeMode to the Image as follows :
<Image
style={styles.image}
source={{
uri:'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
}}
resizeMode:'contain'
/>
and let me know if it worked or not!
Try to add the resizeMode to the style like so:
image: {
marginLeft: -OFFSET_LEFT,
marginTop: -OFFSET_TOP,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT,
resizeMode: "contain"
},
You can read more on it in the documentation here:
https://reactnative.dev/docs/image#resizemode
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.
I'm trying to play a video from my local file system the video players
shows up but the video wont even show on phone or it wont even play,
am i doing something wrong, i know exactly where my file is located
it just wont play its literally a video player with just a blank
screen.?
here is the code im using below showing a empty video player
import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { Video } from 'expo';
import { MaterialIcons, Octicons } from '#expo/vector-icons';
export default class App extends React.Component {
state = {
mute: false,
shouldPlay: true,
}
handlePlayAndPause = () => {
this.setState((prevState) => ({
shouldPlay: !prevState.shouldPlay
}));
}
handleVolume = () => {
this.setState(prevState => ({
mute: !prevState.mute,
}));
}
render() {
const { width } = Dimensions.get('window');
return (
<View style={styles.container}>
<View>
<Text style={{ textAlign: 'center' }}> spiderman </Text>
<Video
source={{ uri: 'file://C:\Windows\System32\avenger\spiderman.mp4' }}
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>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
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)",
}
});
for local files you should use require not uri also I tried to reproduce your code but I'm not sure about file: syntax in React Native. so I instead used relative path
<Video
source={require('./utils/video_2018-08-16_14-12-06.mp4')}
shouldPlay={this.state.shouldPlay}
resizeMode="cover"
style={{ width, height: 300 }}
isMuted={this.state.mute}
/>
By the looks of it, the video is stored on a computer: source={{ uri: 'file://C:\Windows\System32\avenger\spiderman.mp4' }}
You haven't told us where the website is though. If it is a local website, it should work. But if it is on the web, it obviously won't work, as it is referring to a video that is stored on a computer, not on the internet. You need to upload that video to the website host, and change the source. This question isn't really CSS though.
In my home screen of the app, I have two buttons, If the user selects a button the touched response is to be shown by changing its present image into another I tried all the methods of setting state and passing conditions but it's not working
Here is my code MainScreen.js file:
import React, { Component } from 'react';
import { StatusBar, Image, TouchableHighlight } from 'react-native';
import { Actions } from 'react-native-router-flux';
class MainScreen extends Component {
state = {
computerPressed: false,
teamPressed: true
}
render() {
return (
<Image
source={require('./Images/bg_img.png')}
style={styles.backgroundStyle} >
<StatusBar hidden />
<Image
source={require('./Images/History.png')}
style={styles.historybuttonStyle} />
<Image
source={require('./Images/logo_ws.png')}
style={styles.logoStyle} />
<TouchableHighlight onPress={() => Actions.screen2({ challenge: 'Computer' })}
onPressIn={this.state.computerPressed = true}
onPressOut={this.state.computerPressed}>
<Image
source={require(this.state.computerPressed ? './Images/landing-bnt1-on.png' : './Images/landing-bnt1.png')}
style={styles.landingbnt1Style} />
</TouchableHighlight>
<TouchableHighlight onPress={() => Actions.screen2({ challenge: 'Team' })}
onPressIn={this.state.teamPressed = true}
onPressOut={this.state.teamPressed}>
<Image
source={require(this.state.computerPressed ? './Images/landing-bnt2-on.png' : './Images/landing-bnt2.png')}
style={styles.landingbnt2Style} />
</TouchableHighlight>
</Image>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
width: undefined,
height: undefined,
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
position: 'relative'
},
logoStyle: {
flex: 0,
width: 340,
height: 270,
resizeMode: 'contain',
marginBottom: 150,
position: 'absolute',
bottom: 50
},
historybuttonStyle: {
width: 38,
height: 35,
position: 'absolute',
right: 5,
top: 10
},
landingbnt1Style: {
width: 250,
height: 45,
top: 175
},
landingbnt2Style: {
width: 250,
height: 45,
top: 200
}
};
export default MainScreen;
and I have this error pop up when I executed this code:
and when i changed my code to this:
import React, { Component } from 'react';
import { StatusBar, Image, TouchableHighlight } from 'react-native';
import { Actions } from 'react-native-router-flux';
const a = require('./Images/landing-bnt1-on.png');
const b = require('./Images/landing-bnt1.png');
const c = require('./Images/landing-bnt2-on.png');
const d = require('./Images/landing-bnt2.png');
class MainScreen extends Component {
state = {
computerPressed: false,
teamPressed: true
}
render() {
return (
<Image
source={require('./Images/bg_img.png')}
style={styles.backgroundStyle} >
<StatusBar hidden />
<Image
source={require('./Images/History.png')}
style={styles.historybuttonStyle} />
<Image
source={require('./Images/logo_ws.png')}
style={styles.logoStyle} />
<TouchableHighlight
onPress={() => Actions.screen2({ challenge: 'Computer' })}
onPressIn={this.state.computerPressed = true}
onPressOut={this.state.computerPressed}>
<Image
source={require(this.state.computerPressed ? a : b)}
style={styles.landingbnt1Style} />
</TouchableHighlight>
<TouchableHighlight
onPress={() => Actions.screen2({ challenge: 'Team' })}
onPressIn={this.state.teamPressed = true}
onPressOut={this.state.teamPressed}>
<Image
source={require(this.state.computerPressed ? c : d)}
style={styles.landingbnt2Style} />
</TouchableHighlight>
</Image>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
width: undefined,
height: undefined,
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
position: 'relative'
},
logoStyle: {
flex: 0,
width: 340,
height: 270,
resizeMode: 'contain',
marginBottom: 150,
position: 'absolute',
bottom: 50
},
historybuttonStyle: {
width: 38,
height: 35,
position: 'absolute',
right: 5,
top: 10
},
landingbnt1Style: {
width: 250,
height: 45,
top: 175
},
landingbnt2Style: {
width: 250,
height: 45,
top: 200
}
};
export default MainScreen;
this is the error pop up :
SO how can i get this functionality ?
there are several rules you have to follow with react-native:
Images cannot be conditionally require:
<Image
source={require(this.state.computerPressed ? './Images/landing-bnt1-on.png' : './Images/landing-bnt1.png')}
style={styles.landingbnt1Style} />
this statement is not valid. that's why you got your first error message Unknown named module: '../images/landing-btn1-on.png'.
instead, load image statically:
const image_btn1 = require('./Images/landing-btn1.png');
const image_btn1_on = require('./Images/landing-btn1-on.png');
and conditionally switching between them.
<Image
source={this.state.computerPressed ? image_btn1_on : image_btn1}
style={styles.landingbnt1Style} />
JSX Function should be valid:
JSX function won't work with this pattern.
onPressIn={this.state.computerPressed = true}
onPressOut={this.state.computerPressed}>
do this instead:
onPressIn={() => { this.state.computerPressed = true }}
onPressOut={ () => { this.state.computerPressed = false }}>
And,
You should always use setState() outside of constructor:
or render() won't get triggered.
so previous expression becomes:
onPressIn={() => {
this.setState({computerPressed: true });
}
onPressOut={ () => {
this.setState({computerPressed: false });
}
It looks like you have an issue or a conflict in your node_modules.
Try to delete node_modules folder and then run in your terminal
nom install
I have solved this problem hope it helps for others
I have changed from TouchableHighlight to TouchableWithoutFeedback
and made few changes as suggested as answers thank you #Val
So here's my code:
import React, { Component } from 'react';
import { StatusBar, Image, TouchableWithoutFeedback } from 'react-native';
import { Actions } from 'react-native-router-flux';
const a = require('./Images/landing-bnt1-on.png');
const b = require('./Images/landing-bnt1.png');
const c = require('./Images/landing-bnt2-on.png');
const d = require('./Images/landing-bnt2.png');
class MainScreen extends Component {
state = {
computerPressed: false,
teamPressed: false
}
render() {
return (
<Image
source={require('./Images/bg_img.png')}
style={styles.backgroundStyle} >
<StatusBar hidden />
<Image
source={require('./Images/History.png')}
style={styles.historybuttonStyle} />
<Image
source={require('./Images/logo_ws.png')}
style={styles.logoStyle} />
<TouchableWithoutFeedback
onPress={() => {
Actions.screen2({ challenge: 'Computer' });
}
}
onPressIn={() => {
this.setState({ computerPressed: true });
}
}
onPressOut={() => {
this.setState({ computerPressed: false });
}
} >
<Image
source={this.state.computerPressed ? a : b}
style={styles.landingbnt1Style} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
Actions.screen2({ challenge: 'Team' });
}
}
onPressIn={() => {
this.setState({ teamPressed: true });
}
}
onPressOut={() => {
this.setState({ teamPressed: false });
}
} >
<Image
source={this.state.teamPressed ? c : d}
style={styles.landingbnt2Style} />
</TouchableWithoutFeedback>
</Image>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
width: undefined,
height: undefined,
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
position: 'relative'
},
logoStyle: {
flex: 0,
width: 340,
height: 270,
resizeMode: 'contain',
marginBottom: 150,
position: 'absolute',
bottom: 50
},
historybuttonStyle: {
width: 38,
height: 35,
position: 'absolute',
right: 5,
top: 10
},
landingbnt1Style: {
width: 250,
height: 45,
top: 175
},
landingbnt2Style: {
width: 250,
height: 45,
top: 200
}
};
export default MainScreen;
With version 0.63 React Native introduced a new core component Pressable solving this problem:
import { Pressable, Text, View } from 'react-native';
<Pressable onPress={() => { alert("doSomething") }}>
{({ pressed }) => (
<View style={{ flexDirection: 'row' }}>
<Text> Toggle Image </Text>
{pressed
? <Image source={ require('../assets/img-pressed.png') } />
: <Image source={ require('../assets/img.png') } />}
</View>
)}
</Pressable>
You can also adjust the styles of the wrapper element by doing this:
<Pressable onPress={() => { alert("doSomething") }}
style={({ pressed }) => [
{
backgroundColor : pressed
? 'red'
: 'green'
}
]}>
{({ pressed }) => (
<View style={styles.myCustomStyleWithoutBackgroundColor}>
<Text> Toogle Image and Background Color </Text>
{pressed
? <Image source={ require('../assets/img-pressed.png') } />
: <Image source={ require('../assets/img.png') } />}
</View>
)}
</Pressable>