My issue right now is when videos that were recorded in portrait mode get cut off or zoomed in when watching them in landscape. What is happening is the user has to scroll down to see the length of the video because the width is set to 100%. I am able to add 35% left and right padding to the view styling to make the video fit the screen but it doesn't seem very robust as it still gets slightly cut off on different devices. Is there any styling advice for this situation? I am new to this so if you want any more information regarding the problem let me know.
You can try wrapping up the <Video /> component inside a parent <View /> with flex: 1. Something like this will work -
<View style={{flex: 1}}>
<View style={{flex: 1}}/>
<Video style={{flex: 1}} resizeMode="contain" />
<View style={{flex: 1}}/>
</View>
resizeMode="contain" will maintain the aspect ration of the video and the other two <View />s will occupy equal space causing the portrait video to render in landscape.
Related
I have a React page that needs a Scrollview, there's no way around it. The content goes off the bottom of the screen, and it is encapsulated in the ScrollView. I have a red border on the ScrollView element so I can see that it goes past the bottom of the screen where the rest of my content it. However, it just does not want to scroll. I even put an 'onScroll' prop inside with console.log('hit') at one point to see if the ScrollView was even registering my attempts, it was not. This is happening in a couple of similar components, their structure is very similar. The smallest of them looks like this...
<ScrollView style={{borderColor: 'red', borderWidth: 3}}>
<View style={QualityStyles.container}>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Top Three Leaders</Text>
</View>
<View style={QualityStyles.topThree}>
{renderTopThree(topThree)}
</View>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Employees</Text>
</View>
<View style={QualityStyles.remainders}>
{renderOthers(others)}
</View>
</View>
</ScrollView>
The code's pretty straightforward, with renderTopThree returning 3 components that will take up about 90% of the screen, and renderOthers will fit maybe one component on the screen, and the rest (while rendered and existent) can't be seen since I can't scroll. Anyone see what could be wrong?
I resolved the issue, I had a TouchableWithoutFeedback wrappping the entire Application, and it was blocking out any ability to scroll
I am using react native 0.59, for layout I am using native base and react-native-easy-grid.
Because of different size of mobile device, I need to put flatlist height dynamic. it is starting almost middle of the screen, and I would like to show it until the footer bar.
here is my code
<Container>
<ImageBackground source={require(imagePath+"bg-default.png")}
style={{width: screenWidth, height: screenHeight, resizeMode: 'cover'}} >
<Content scrollEnabled={false}>
<Grid>
<Row style={{ height: screenHeight*0.36, alignItems:'center',justifyContent:'center' }}>
<Image style={styles.iconImage} source={{ uri: this.state.image_url.displayImage}}/>
</Row>
<Row style={{ backgroundColor: "#1a0568", height:screenHeight*0.058, textAlignVertical: 'center', alignItems: 'center'}}>
<Text style={styles.titleStyle}>{"Information list"}</Text>
</Row>
<Row style={{ backgroundColor: 'none',height:screenHeight*0.38}}>
<FlatList
style={[styles.listContainer]}
data={this.state.informationList}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</Row>
</Grid>
</Content>
</ImageBackground>
</Container>
As you can see, I set flatlist height screenHeight*0.38, therefore, in some mobile its perfect, but in some mobile there is some empty space. (See the attached picture)
I have tried to make it dynamic with different example to fill rest of the space like
How to set the style attribution to fill the rest space?
(though I need to fill until footer bar), This example works well with normal component But it didnt work with flatlist. Flatlist doesnt scroll anymore. Because it loads all rows which goes out of the screen. what is the right way of setting dynamic height with flatlist?
I could solve it by playing around with different options and taking help from How to set the style attribution to fill the rest space?
Unfortunately Grid, Row did not work with this.
Here is the demo (Don't forget to select iOS or android tab to view the app)
https://snack.expo.io/#shaondebnath/layouttest
I have a Swiper with one Image-children (the same problem when I have multiple images as children). If I navigate to this screen I except to see the image.
But: The swiper area is black (invisible) until I scroll down a little bit. If I scroll, the image get loaded.
<Swiper height={300} >
<View style={{flex: 1, backgroundColor: 'red'}}><Image style={{ flex: 1 }} source={{uri: 'https://s3.eu-central-1.amazonaws.com/xxxxxxx'}} /></View>
</Swiper>
I am using the iOS Simulator with the following versions:
react-native-swiper v1.5.13
react-native v0.46.4
Adding removeClippedSubviews={false} to the Swiper solved the problem.
I have an image that is very tall, but not very large. I want to print it in a scrollview, so you can see it all on one screen, but nothing works.
after playing with widths and heights and flexs for my scrollview and my image, the best result I get is when I have on of them with style={{width='100%'}}, like that
<ScrollView style={{width: '100%'}}>
<Image
source={require('./assets/skeleton/fullSkeleton.png')}
resizeMode='cover'
/>
</ScrollView>
which prints the image at full width, but the scrollview's height is the original image's height, which doesn't let me see the whole resized image.
Here, a bad drawing to represent my image, and what I want to see on my phone screen
EDIT:
With this bit of code:
<ScrollView
contentContainerStyle={{alignItems: 'center'}}>
<Image
source={require('./fullSkeleton.png')}
resizeMode='cover'
/>
</ScrollView>
I end up with
Which can be scrolled down to see the rest of the Image. As you can see, it can be navigated vertically, but doesn't take the whole screen's width
This kind of thing in Reat Native is actually quite tricky. But you can do it easily; First get picture dimensions:
const FullWidthPicture = ({ uri }) => {
const [ratio, setRatio] = useState(1);
useEffect(() => {
if (uri) {
Image.getSize(uri, (width, height) => {
setRatio(width / height);
});
}
}, [uri]);
return (
<Image
style={{ width: '100%', height: undefined, aspectRatio: ratio }}
resizeMode="contain"
source={{ uri }}
/>
);
};
And use it like this:
<ScrollView style={{flex: 1}}>
<FulWidthImage uri={pictureUri} />
</ScrollView>
The following may help:
You can use contentContainerStyle to style the contents of the ScrollView. Like this (essentially what you have):
<ScrollView
contentContainerStyle={{alignItems: 'center'}}>
<Image
source={require('./fullSkeleton.png')}
resizeMode='cover'
/>
</ScrollView>
That works for me - I can scroll down the whole image and at the bottom it stays visible.
NB: To make the image cover the whole screen while maintaining the height required, you will need to set the width specifically. In my case on iPhone 7+ that meant adding style={{width: 414}} to the Image component AND changing resizeMode to 'stretch'.
Here is the official take on Image resizing...and getting device dimensions will be useful here too.
I was just wondering if it was possible, in React Native, to create a vertical overlay ; by that, I mean being on a page and when swiping down, an overlay comes down, covering the page, with various information on it (and the same when swiping up, an overlay coming from the bottom). I wanted to use react-native-swiper at first, but the vertical swiping is not compatible with Android.. So if anyone has another solution to offer, be my guest ! Thanks
check react-native-parallax-view hope this can help you.
EDIT
example:
return (
<View style={[{ flex: 1 }]}> {/* add parent container and then ParallaxView as specified in documentation */}
<ParallaxView
backgroundSource={require('image!backgroundImage')}
windowHeight={300}
header={(
<Text style={styles.header}>
Header Content
</Text>
)}
scrollableViewStyle={{ backgroundColor: 'red' }}
>
<View>
// ... scrollview content
</View>
</ParallaxView>
</View>
);