I want to work on some apps that will navigate into video.js file that will automatically trigger the video to play in fullscreen with landscape orientation.
I'm using react-native-video
link: https://github.com/react-native-community/react-native-video
render() {
return (
<View style={styles.container}>
<View style={styles.fullScreen}>
<Video
ref={(ref) => {
this.player = ref
}}
source={require('../vid/intro-video.mp4')}
style={styles.nativeVideoControls}
rate={this.state.rate}
paused={this.state.paused}
volume={this.state.volume}
muted={this.state.muted}
resizeMode={this.state.resizeMode}
onLoad={this.onLoad}
onLoadStart={this.loadStart}
onBuffer={this.onBuffer}
onProgress={this.onProgress}
onEnd={debounce(this.onEnd, 100)}
repeat={false}
controls={this.state.controls}
/>
</View>
</View>
);
}
I try to add this belo code inside loadStart function but it's not working.. and when I rotate the video appear at the bottom of my screen if not in fullscreen mode.
this.player.presentFullscreenPlayer()
solution that I tried:
1) using onLayout on the view tag but nothing happened.
2) using this.player.presentFullscreenPlayer() still did not fix the problem.
I still did not find a fix solution for this problem but I just want to share workaround that I did for temporary.
I'm using another package react-native-orientation and trigger lockToLandscape() inside the componentWillMount and then I get the width and height of the device using dimension
Orientation.lockToLandscape();
height = Dimensions.get('window').height;
width = Dimensions.get('window').width;
and I also add the presentFullScreenPlayer inside onLoad method
this.player.presentFullscreenPlayer();
and that I set the width and the height of the video player using the width and height get from the Dimensions of the device...
If you guys have another ways, do share :)
Thanks
Related
I have been working on adjusting iframe height automatically.
The solutions with the problem are not working in React Hooks.
I have read Setting iframe height to scrollHeight in ReactJS and Adjust width and height of iframe to fit with content in it. I have explored additional posts and tried several times for almost a week. However, I have not found a proper way to figure this out.
I simplified what I have tried. My code
Apart from my code, I also tried iframeResizer.min.js, yet it is not working. I believe it is because react generates dynamically. I found iframe-resizer-react and tried but I have not found a way to solve it.
Can anybody have the same situation? How can I adjust iframe height automatically in React Hooks?
from Setting iframe height to scrollHeight in ReactJS :
Use the onLoad() handler from the iframe to ensure that the content has loaded before you try to resize it - if you try to use React's lifecycle methods like componentDidMount() you run the risk of the content not being present yet.
function FrameWrapper() {
const ref = React.useRef();
const [height, setHeight] = React.useState("0px");
const onLoad = () => {
setHeight(ref.current.contentWindow.document.body.scrollHeight + "px");
};
return (
<iframe
ref={ref}
onLoad={onLoad}
id="myFrame"
src="http://demo_iframe.htm"
width="100%"
height={height}
scrolling="no"
frameBorder="0"
style={{
maxWidth: 640,
width: "100%",
overflow: "auto",
}}
></iframe>
);
}
PS: You will run into issues with cross-origin policy if the iframe is in a different domain.
I am wondering if it is possible to debounce a jsx element's rendering. I have an animation of a panel expanding that has some content in it. If the panel is empty (just the background) the animation is smooth and works as expected. The animation and associated components are all from Material-UI. The issue arises when the content is in the panel already so the animation (width expansion) just skips out to the width of the content making the animation look choppy. Here is a similar example to what I am referring to. This code is my code I am using in my panel and they work the same in terms of the expansion. Only difference is the content in this example is just lorem ipsum so the animation appears to work fine. Is it possible to debounce the <CardContent /> component's rendering like this?
{ open &&
(
_.debounce(e => {
return (
<CardContent>
{/*content in here*/}
</CardContent>
)
}, 300)
)
}
or something similar (this doesn't work) so the panel will be fully expanded through the animation before the content is rendered?
I'd like to add a comment however my reputation isn't above 50 yet so unfortunately I can't :p.
JS Animation
To answer your question, if you are using JavaScript animations like GSAP or AnimeJS you can have a state flag called. isAnimating = null. Then when your animation starts set the flag to true and when it's finished set it to false. Then in your render() method write a conditional render like this.state.isAnimating === false && <CardContent />.
CSS Animation
If you are using CSS animation you can use the transitionend event to wait for the animation to end. Therefore you have to create a ref on the animating DOM element to which you can attach the event.
Does that help you a bit? Please let me know if you have any other questions.
Here is a solution using react spring library
I added a state variable in order to display or not the card content
const [contentVisible, setContentVisible] = React.useState(false);
I created a spring to handle the width transition, I set contentVisible to true as soon as the width approaches the 300
const { width } = useSpring({
width: open ? 300 : 120,
onFrame: ({ width }) => setContentVisible(width > 299.8)
});
Finally, I created an animated card component
const AnimatedCard = animated(Card);
...
<AnimatedCard classes={{ root: classes.card }} style={{ width }}>
I have a ScrollView using Animated Event to do some basic animations. Everything works great but now I am wanting to animate blurRadius on images but the blur doesn't kick in until a few seconds after scrolling began. I've tried just about every animation solution possible...
This is the ScrollView... (AnimatedEvent.scrollYOffset is just a shortcut function I made) (Normally I have the throttle at 16 but found 7 was a little better but not even close to good)
<ScrollView
onScroll={AnimatedEvent.scrollYOffset(animY)}
scrollEventThrottle={7}
style={[QuickStyle.fillScreen,{
backgroundColor: 'rgb(16, 50, 74)',
flex: 1,
}]}>
This is one of the images with the blur property...
const blurry = this.state.animY.interpolate({
inputRange: [0,150],
outputRange: [0,7],
extrapolate: 'clamp'
});
const slide1 = <View style={[{
borderRadius: borderRadius,
overflow: 'hidden',
width: width,
height: height,
backgroundColor: 'rgb(28, 181, 251)' //light blue
}]}>
<Animated.Image blurRadius={blurry} ref={img => this.blur1 = img} style={{
width: width,
height: height,
}} source={require('../../assets/images/big-numbers.jpg')} />
</View>;
What I've tried... (all with the same laggy choppy result) 1) Animating directly into the blurRadius prop 2) Using a ref with setNativeProps({blurRadius:x}) 3) Using setState({blurRadius:x}) - this was at least smooth but slowed down every animation a lot.
What I am trying next... Running these 3 solutions in release mode. I also will consider doing this directly in Objective-C, but really want to avoid that...
Would the react-native-blur package help? I'm guessing not...
Please help! Thank you!
I finally gave in and just put a BlurView from react-native-blur over what I wanted to blur. I then just animated the opacity and everything is smooth as can be.
The only problem is, it does not look as nice as blurring the image directly through blurRadius, but so far it's the only way I've been able to get this to work for now.
Please, if you have another solution, let me know!
UPDATE
Finally, I got this working without having to animate opacity on a react-native-blur BlurView! And it looks 10x better!
I am using the solution by #umitanuki from https://github.com/react-native-community/react-native-blur/issues/152
Here's how I did it...
Go to https://github.com/AlpacaDB/react-native-blur/tree/animate/ios
Set your BlurView.m in Xcode to exactly what the BlurView.m there has.
Use onScroll and setState to change the blurAmount property on a BlurView (react-native-blur).
This accomplishes the same effect as blurRadius but runs perfectly smooth when animating.
EXTRA
When using this solution I found one problem... When exiting the app and coming back to it (without fully quitting it), the blur goes away until you scroll again or do something to update it.
To solve this I went back into BlurView.m and added an observer for when the app becomes active...
[[NSNotificationCenter defaultCenter]addObserver:self
selector:#selector(appBecameActive)
name:UIApplicationDidBecomeActiveNotification
object:nil];
-(void) appBecameActive {
[self updateBlurEffect];
}
I then ran updateBlurEffect when the app became active. Unfortunately there was no way to solve this within react-native, but this works perfectly.
look this video of current scrolling behavior. i want, as soon as finger is lifted from screen, to disable scrolling.
Edit: the video shows a user scrolling through a list. When the finger is lifted from the screen, you see the scrolling continues up or down for a short time.
I think what you need is:
<ScrollView
bounces={false}
/>
This way when you scroll finished, the scroll animation will not continue and immediately stopped.
What I believe you want is basically to stop the scroll when momentum beings. For that, you can use the onMomentumScrollBegin callback on your ScrollView and call .scrollToEnd({animated: false}) on it.
Here's how that would look:
<ScrollView
ref={(ref) => this.scrollView = ref}
scrollEnabled={this.state.scroll}
onMomentumScrollBegin={
() => this.scrollView.scrollToEnd({animated: false})
}
>
...CONTENT HERE...
</ScrollView>
i think u mean stop scrolling once user lifts his finger
try :
<ScrollView
...
decelerationRate = {0}
/>
check docs
I'm trying to display a list of rows in a React Native ListView, but it only shows the entries that fit in a single screen, ie, I can't scroll down to see more rows.
Here are the styles:
styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'space-around'
}
})
ListView:
return (
<View style={styles.container}>
{this.getHeader()}
<ListView
dataSource = {this.state.dataSource}
renderRow = {this.renderRow.bind(this)}/>
</View>
)
Row:
return (
<View style={styles.rowContainer}>
<Text>{text}</Text>
</View>
)
What am I doing wrong?
I had the same issue and found that Listview with wrapper View outside will make ListView not scrollable.
The workaround will be removing wrapper View:
return (
<ListView
dataSource = {this.state.dataSource}
renderRow = {this.renderRow.bind(this)}/>
)
I'll post this here in spite of the OP already having found a solution b/c my ListView wouldn't scroll either and it wasn't b/c I was trying to scroll rather than using the mouse to simulate swiping. I am currently using React-Native v0.1.7.
It turned out that the reason my ListView wouldn't scroll & wouldn't reveal the other rows which weren't being initially rendered on screen was that it didn't have a fixed height. Giving it a fixed height solved this issue. Figuring out how to determine what value to use for the height wasn't a simple matter though.
In addition to the ListView on the page there was also a header at the top of the page which had a fixed height. I wanted that ListView to take up the remaining height. Here, either my ability to use the React-Native limited implementation of FlexBox failed me or the implementation did. However, I was unable to get the ListView to fill up the remainder of the space and be able to scroll properly.
What I did was to require the Dimensions package const Dimensions = require('Dimensions'); and then set a variable for the device window's dimensions const windowDims = Dimensions.get('window'); Once I had that done I was able to determine the height of the remaining space and apply that inline to the style of the ListView: <ListView style={{height: windowDims.height - 125}} ... /> where 125 was the height of the header.
What worked for me was to follow this response: https://stackoverflow.com/a/31500751/1164011
Basically, I had
<View>
<ListView/>
</View>
And what was happening was that the <View> component was getting a height of 0. So I needed to update it to:
<View style={{ flex: 1 }}>
<ListView/>
</View>
That way <View> gets its height based on the content.
Wrap listview and other contents in scroll view.. That solved my scroll issue.
ListView contains an inner ScrollView so it should work as is. On the simulator your scroll by clicking and dragging the mouse.
Why don't you show the full code, maybe some screenshots?