I am on react native v.42 using width='100%' with images created for an iphone 7 #2x (750px width). This works properly for the iphone 7, but if I look at the images on a 7plus, they get clipped at the top and bottom. In order to prevent this, I have to save out the images for a 7plus (818px #2x).
Does anyone know how to use width='100%' and have the image scale beyond its maximum native dimensions proportionally? Changing resize mode does not work. I also don't want to use any plugins if I can help it.
I know that I can explicitly define the height and width based on the window Dimensions:
import { Dimensions } from 'react-native'
const { height, width } = Dimensions.get('window')
export {
height as deviceHeight,
width as deviceWidth,
}
and use a ratio calculation for the height, but I am looking for a way to not have to declare dimensions for the height (essentially a height: auto).
Theres a few things you can try.
Try telling the image to cover the screen
resizeMode: 'cover'
Because this is all flexbox layout you can use align-self to tell the child to stretch
alignSelf: 'stretch'
If neither of these work for you.. Another alternative that I've done before is to remove the static size so that it will grow naturally (by specifying null for the width and height)
width: null,
height: null
Facebook docs on support
Related
I am using React Native Navigation top tabs. I am having a issue with the text getting cut or wrap. Is there any way that I can style where all the tab names show correctly without text wrap
Set a width to the tabbar, like this
tabBarOptions: {
tabStyle: {
width: 'auto' //or put some other width which works for you
}}
Also consider using scrollable tabs or reducing font size.
I am using component based architecture and want to show bootstrap modal which gets adjusted to image height and width.
Most of the forums suggested to use height and width in percent but this will not going to help as image size can vary.
Has anyone achieved this?
There's a simple solution for this. first of all you will need to override the modal's width property (height is auto adjustable and shouldn't be a problem), the modal window uses the .modal-dialog class, so use !importent to override width
.modal-dialog {
width: fit-content !important;
}
content-box will adjust the width according to what the element contains.
here's a demo
I have a question about width and height in react native. I set a View with width height 50, in my own device (huawei p9 plus) it look okay. Then I change to bigger device (huawei mate9), View become bigger. I just want to know is this normal ? or there are some setting can let all devices have same outlook.
Thank a lot.
If you want to use same outlook in all devices then you have to give percentage value of height and width. Like, first of all you have to import Dimensions in you file
import { Dimensions } from "react-native";
After that define deviceWidth and deviceHeight,
var deviceWidth = Dimensions.get("window").width;
var deviceHeight = Dimensions.get("window").height;
And then you use deviceHeight and deviceWidth for height and width as below,
width : deviceWidth * percentageYouWant / 100
Here 'percentageYouWant' is percentage of device width. So which device is you used it will get width from that device.
For same outlook in all the devices, you have to give percentage value of height and width. Like, first import Dimensions in your file
import { Dimensions } from "react-native";
After that define **deviceWidth** and **deviceHeight**,
var deviceWidth = Dimensions.get("window").width;
var deviceHeight = Dimensions.get("window").height;
and then pass this variables in style of view where its required accordingly, as it will take the width and height of your device automatically and adjust your view.
You can also use this variable for customised views(size variations) by applying formula into it.
For eg in styles you can pass width as :
width: deviceWidth/2;
this above eg. will take the half width of deviceWidth automatically
this is perfectly normal, as it's explained in the official documentation "all dimensions in react native are unitless and represent density-independent pixels", so different devices with diffrent size and different DPI will render differently.
If you want same look and feel, you either use flex, or percentage as explained above
Using the option data-height="100%" sets the height of the Fotorama to the height of the window. This is by design. However I would prefer it set to the height of the parent element.
I'm containing the Fotorama inside of a container which is almost full height, but has padding for navigation which is fixed to the bottom of the window. But on mobile is fixed to the header.
Any help would be greatly appreciated!
height = $('#fotorama').parent().outerHeight()
$('#fotorama').fotorama({width: '100%', height: height})
I have fitVids working on my site. However, I'm wondering if it is possible to prevent fitVids from enlarging a video beyond its defined height/width. For example, if a video is 600px wide, but the container is 800px, fitVids enlarges the video to 800px wide and it is blurry. I'd only like fitVids to shrink the video when the container shrinks for smaller devices. Is that possible?
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
helgatheviking's solution constrains the width of the video, but not the height. If your container is wider than the video, you end up with a really tall, letter-boxed video. The height is easy to fix, using the same technique to constrain the width. But, there's a third variable.
fitVids wraps the iframe in a div, with the class "fluid-width-video-wrapper", and sets padding-top equal to the aspect ratio of the video. Even if height and width are constrained, the fluid-width-video-wrapper will still be as tall as the video could be, if it didn't have a max-height. So, you end up with a bunch of white-space below the video.
Rather than set all three values (width, height, and padding), you can simplify everything by wrapping the iframe in a div with a max-width, before initializing fitvids.
var vidFrame = $('#fitvids_container').find('iframe');
var vidWidth = vidFrame.attr('width');
if (typeof vidWidth !== undefined) {
// Wrap the iframe in a Div with max-width defined
vidFrame.wrap('<div style="max-width:' + vidWidth + 'px;"></div>');
}
// Initialize fitVids
$('#fitvids_container').fitVids();
Like helgatheviking's solution, if you have more than one video per page, you'll have to calculate the max-width for each video.
One option is to make a small modification to the fitvids code which checks for a data-maxwidth attribute and if found wraps a div with a max-width style to limit the resized iframe.
This allows each videos max width behaviour to be specified independently.
For example. Add the data-maxwidth attribute to the iframe.
<iframe width="560" height="315" data-maxwidth="560" src="https://www.youtube.com/embed/L-UIiRlydow" frameborder="0" allowfullscreen=""></iframe>
Then add the following code snippet to the fitvids.js file, at the end of the $allVideos.each function, just after $this.removeAttr('height').removeAttr('width');
if ($this.data("maxwidth"))
$this.parent('.fluid-width-video-wrapper').wrap('<div></div>').parent().css('max-width', $this.data("maxwidth"));
It simple!
Assuming "thing-with-videos" is the ID of the wrapper on which you are calling .fitvids()
So just set the max width css property for this container.
Example:
#thing-with-videos {
max-width: 600px;
margin: 0px auto;
}
This wont let your video width go beyond 600px. Margin property will center your video container.
Live Edit Demo -
http://bitconfig.com/fit-vids/bitconfig_fitvids.html
Set your custom width in the "Video container width" textbox and watch the preview!
-Patrick
Patrick's answer eventually made me realize that I could put a max-width on the iframe itself.
#fitvids_container {
max-width: 600px;
}
#fitvids_container iframe {
max-width: 500px;
}
However, if you were using a lot of videos (of different sizes), you might want to do this dynamically. With jQuery we can get the width from the iframe attribute and make it a max-width style rule. This only works if you've included the width attribute in your embed code though. This is a single example, but could be adapted to an .each() loop or at least renaming the container div to a class.
var width = $('#fitvids_container').find('iframe').attr('width');
if (typeof width !== undefined) {
$('#fitvids_container').find('iframe').css('maxWidth', width + 'px');
}
See my example: http://jsfiddle.net/Qd4FW/2/