Please have a look at this snack:
https://snack.expo.io/#yolpsoftware/groaning-nachos
When you run it in web (separate window) and then resize the window a bit, you'll notice some strange behavior:
This might have been an error in Expo Snack. When I reloaded the window, the behavior disappeared. So the following is not relevant anymore: When the window is big enough for the two videos to fit in, their parents get a height of 0, so they are rendered on top of each other. As soon as you make the window smaller, this behavior disappears.
Even though both the <Video> and their direct parents have width: 100% and aspectRatio: 1.333, the height of the <Video> elements always stays the same. The aspectRatio prop is not respected.
Why is that so?
I want the video elements to fill the width of their parent, but their height should be set according to the aspectRatio prop.
Related
I have settings screen within my game for resolution. Within this setting page, you have a fullscreen ON and OFF option. I also have a resolution switcher above it. However when you turn fullscreen off and change the resolution. The game is no longer centered on the screen and moves around as you change the resolution. I have tried many things such as window_center() within the switch statement. However this isnt solving my issue. Does anyone have any ideas on how to keep the game centered on the screen when changing resolutions with fullscreen turned off? (Such as a windowed fullscreen)
You'll want to either delay window_center call by 1 frame (as the window position data doesn't update till the end of the frame), or use window_set_rectangle to calculate position yourself immediately, like so
window_set_rectangle((display_get_width() - width) div 2, (display_get_height() - height) div 2, width, height);
(or slightly more complex if you want to resize window relative to the current position)
I'm new to react-native, coming from the web-world.
The standard behaviour for a View component seem to be to collapse to it's content's width.
Is there a way to have a component always stretch to the full horizontal width, limited only by a parent's fixed width or else screen width?
Any of width, minWidth or maxWdith set to '100%' doesn't seem to do any difference.
For this purpose, you can simply use the flex box system
I am trying to have an image inside a ScrollView taking the full width of the screen while keeping its aspect ratio (I don't want a fixed background image). The answers in https://github.com/facebook/react-native/issues/950 seem to work for a View but not a ScrollView.
The null width/height trick just makes the image disappear. Setting the width using Dimensions.get('window').width does not work for some reason; it leaves some space either on the top and bottom or the left and right of the image depending on its aspect ratio.
I can't use Image.getSize() as the image is local and would rather avoid hard-coding the dimensions as I have many other images that need to be styled this way. I have tried many other combinations of flex, alignSelf, etc. but none seem to work.
Setting ScrollView's style={{width: "100%"}} works for me.
Within my react native app I have a simple ScrollView with containers which should stretch horizontally to 100% width. Each of these containers should display an image. I receive the image for each container from a web API (but I could send the actual image as byte64 string too if it makes any difference).
Now the problem I have is that the Image component needs me to set the height and width style attributes in order to display the image. I understand the reasoning for that, since the actual dimensions of the image are only available at runtime and it would cause the UI to behave strange when the images are loaded.
However I would like to set the width of the image to 100% of the parent container, eventhough that means that the the containers height will change when each image are loaded.
Any advice on how to solve this issue?
Not sure if I'm completely understanding the scenario you're describing, so this idea may not work. But if you know the width of the container, you can use that to scale the image's height based on the ratio of the container's width to the image's original width.
I've actually answered a recent question about this by providing a component I coded up for a similar purpose:
Auto scale image height with React Native
Hope this helps.
You can do something like
resizemode="stretch"
with this the image will stretch in the whole container irrespective of the size of the image
I have a window. That window has a header (variable size) and should have a scrollable body that sits directly under the header. How can I set the height of the body so that it actually scrolls? If I set height: 'auto', the body extends beyond the bottom of the viewport to fit all of its content. If I set its top and bottom properties, nothing shows up at all.
I can't imagine that I'm the only one who's come across this, but I haven't found a single definitive answer for how to create properly sized, scrollable view within a window. Heights seem tricky since the value is so different in portrait and landscape modes on a single device, much less across devices.
Can someone provide tips on how to manage this scenario? I'm hoping I can extrapolate it to handle other view height scenarios.
Thanks.
It depends on what you are trying to achieve. If you're trying to create a ScrollView that just has the ability to scroll when empty, you should add a empty View into the ScrollView, which has the "top" property.
For example:
var win = Ti.UI.createWindow();
var scrollView = Ti.UI.createScrollView();
var emptyView = Ti.UI.createView({top: 460});
scrollView.add(emptyView)
win.add(scrollView);
Note that the "top" property has 460 set, which is 40 bigger than the iPhone screen res of "420". This will case the scrollView to scroll. If you're looking for a specific size based on the window's navBar controlTitle, you will have to run an equation based on what you think the size will be, applying that size to the view's "top" property accordingly.