I want to set a video as a background but I just could set a video on the screen, not as a background, and I want to have some buttons on it.
I have seen some questions but using react-native video library, and I am using
import { Video } from 'expo';
I want to play a video as a background with expo library, hope somebody can help me, thanks in advance
You can achieve it using zIndex, following code will render video as background and play button on top of it. React native styling works same as web CSS, You should read more about css positioning here.
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Text>Play</Text>
</TouchableOpacity>
<Video style={styles.video} />
</View>
);
}
const styles = {
container: {
position: 'relative'
},
video: {
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
zIndex: 1,
},
button: {
position: 'relative',
zIndex: 2,
}
};
Related
I'm using a WebView to show an iframe of a twitch-stream in my react-native app, however at some points when it renders the WebView only shows up as a blank white screen until you scroll/move the UI and at other times it works as intended.
There are no errors emitted when the WebView is blank, it seems to load as intended so not really sure why it just shows a blank white screen.
Here is the WebView code:
<Animated.View
style={{
height: anim,
width: width,
overflow: 'hidden',
}}
>
<WebView
onLoadEnd={() => {
useAnimation()
}}
source={{
uri: `https://host.com/iframe/?channel=${channelName}`,
}}
style={{
height: heightByRatio,
width: width,
flex: 0,
}}
mediaPlaybackRequiresUserAction={false}
allowsInlineMediaPlayback={true}
/>
</Animated.View>
I had a very similar issue of webviews sometimes loading blank on android devices. I can't say I figured out why it was happening, but I solved it by delaying the load of the webview and putting a 2px border around the container wrapping the webview. Neither solution worked on its own, both were needed.
export default class WebviewExample extends Component<Props> {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
setTimeout(() => {
this.setState({loadWebview: true});
});
}
render() {
return (
<View style={styles.view}>
{this.state.loadWebview &&
<WebView />
}
</View>
);
}
}
const styles = StyleSheet.create({
view: {
borderWidth: 2,
borderColor: 'transparent',
}
});
How can we set a Navigation Bar at the bottom of the page in react native using View and components (if you want)!! with any tag of react-native npm - (/or else) you want!!
EX:
The Page Home :
----Header----
---- your tags (Screens)----
----Footer----
let us to do this -->-->-->
let us use this tag (View) then set styles on it.
...
return (
<View style={styles.parantTagStyle}>
<View>
{
this.chechreturnedScreen()
}
</View>
<View style={styles.footerTagStyle}>
<TabBottom navigatorFunction={this.navPages} headerTitle={this.state.headerTitle} />
</View>
</View>
);
and use this style :
const styles = StyleSheet.create({
parantTagStyle: {
left: 0,
bottom: 0,
right: 0,
flex:1
},
footerTagStyle: {
position: 'absolute',
left: 0,
bottom: 0,
right: 0,
},
});
...
In the Card Component for react native elements
I'm trying to get rid of the border by setting the border to 0 and borderColor to transparent but there's still a gray outline
<Card
containerStyle={{borderWidth: 0, borderColor: 'transparent', elevation: 0}}
title='HELLO WORLD'
image={require('../images/pic2.jpg')}>
<Text style={{marginBottom: 10}}>
The idea with React Native Elements is more about component structure than actual design.
</Text>
</Card>
Thought it might have been box shadow, but that's not it either
I've got the same issue, and I've found that border appears because the Card element has an elevation default setted to 1
You can override this (for android) :
<Card containerStyle={{elevation:0, backgroundColor:#123}}/>
and in IOS:
const styles = {
container: {
shadowColor: 'rgba(0,0,0, .2)',
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0, //default is 1
shadowRadius: 0//default is 1
}
}
<Card containerStyle={styles.container} />
Its late but it seems that a lot of people still searching for the Answer.
React Native Elements by default have set both borderWidth and shadow Props, so in order to remove border completely you need to remove both Border and Shadow.
<Card containerStyle={styles.cardCnt}>
<Text>Content</Text>
</Card>
const styles = {
cardCnt: {
borderWidth: 0, // Remove Border
shadowColor: 'rgba(0,0,0, 0.0)', // Remove Shadow for iOS
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0 // Remove Shadow for Android
}
};
It looks like react native elements' Card component has a grey border in all of the examples I've seen. I'd suggest building your own card component. Start with something like this and then style it however you want. This one has a bit of shadow which you can turn off by passing it a noShadow prop.
import React from 'react';
import { View, StyleSheet } from 'react-native';
const Card = (props) => {
let shadowStyle = {
shadowColor: COLORS.grey3,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: .5,
shadowRadius: 12,
elevation: 1,
}
if (props.noShadow) {
shadowStyle = {}
}
return (
<View style={[styles.containerStyle, props.style, shadowStyle]}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
containerStyle: {
padding: 10,
marginHorizontal: 10,
backgroundColor: COLORS.white,
borderRadius: 3,
}
})
export { Card };
Then when you want to use it just
import { Card } from './yourCustomCardFile'
Then in your render method
<Card>
<Text>Any content you want to include on the card</Text>
<Text>More content that you want on the card</Text>
</Card>
set elevation to 0 and borderColor to white like this
<Card containerStyle={{ elevation: 0, borderColor: "white" }}>
set to screen background color
Dirty but problem solved.
I need to make my View circular on a non solid colored background.
I tried using borderRadius and overflow: 'hidden', but it isn't working. I see that this is a known issue with React Native: https://github.com/facebook/react-native/issues/3198
There seems to be workarounds for images that are on top of a solid background, but my background is dynamic and on top of an image so therefore I can't hardcode it.
Are there any alternatives to get something like this to work?
The black square should be a circle:
Here's the code (P.S. I'm using react native webrtc, that's where I'm getting RTCView, but I think this works with a plain old View):
const styles = StyleSheet.create({
remoteVideoContainer: {
borderRadius: 50,
height: 100,
marginBottom: 20,
width: 100,
overflow: 'hidden',
backgroundColor: 'green',
},
video: {
flex: 1,
resizeMode: 'cover',
backgroundColor: 'blue',
},
});
export default VideoView = ({
videoURL,
}) => {
return (
<View style={styles.remoteVideoContainer}>
<RTCView
style={styles.video}
streamURL={videoURL}
mirror={true}
objectFit="cover"
/>
</View>
);
};
I'm not even sure if you can style the RTCView. The code doesn't expose a styling prop. https://github.com/oney/react-native-webrtc/blob/master/RTCView.js
I am attempting to create picture in picture functionality on iPhone in react native using the react-native-video component. I have two elements, one is the video player, and the other is an image absolutely positioned on top of the player in the lower right corner.
<View style={{ position: 'relative' }}>
<View>
{ this.props.swapPip ? renderVideoPlayer() : renderPip() }
</View>
<View style={{ position: 'absolute', bottom: 16, right: 16 }}>
{ this.props.swapPip ? renderPip() : renderVideoPlayer() }
</View>
</View>
I would like to play the video, and then mid-play, and be able to switch the swapPip property so that the video is now the pip and the image is in the main view. The catch is the video must continue to play smoothly through the transition. Currently it is re-mounting each time the swap happens, losing the video and causing an annoying reload and other unwanted side effects. Is this possible to achieve?
Here is a rough image of the idea. The gray boxes represent the video player, the pink represents the image. Clicking on the smaller box (whatever color) will swap the two back and forth. Swapping should be allowed at any time, and if a video happens to be playing during a swap, playback should not be interrupted in any way.
I guess this turned out to be a dumb question, because zIndex is actually a thing in react-native now. Its in the docs and everything, and works exactly like you would expect:
const pipPosition = { position: 'absolute', bottom: 16, right: 16, zIndex: 99 };
const sourceAPosition = this.props.swapPip ? pipPosition : {};
const sourceBPosition = !this.props.swapPip ? pipPosition : {};
<View style={{ position: 'relative' }}>
<View style={sourceAPosition}>
{ renderSourceA() }
</View>
<View style={sourceBPosition}>
{ renderSourceB() }
</View>
</View>
For some reason I was under the impression zIndex did not exist/work in react-native, and that the ordering of your elements was the only way to accomplish layering...