I am using React Native Version 0.44.0 and expo app to render some images and text on the screen in a ListView.
My issue is with styling.
A. Originally I had only a View (View1) and an image and a text component side by side within View1. I set up the flexDirection="row" and justifyContent="center" and that centered the image and the text within the screen.
B. I needed to insert another text component with a different style under the first text, but the flexDirection="row" would simply not allow it to go under it.
I inserted View2 and that did allow the texts to be vertically positioned but the higher text got cut off at the right edge of the screen( i believe its because the image is set with a fixed height and width).
I couldn't get the text back in the center until I added View3 and gave it a fixed width.
So View1 has flex=1 , View2 has flex=1, and View3 has width="someValue"
My concern: right now its rendering on the device perfectly. But is this acceptable practice? will it be distorted on other devices or will it render the fixed width dynamically based on the screen resolution since its density-independent pixel unit?
will it render the fixed width dynamically based on the screen
resolution since its density-independent pixel unit?
Nope. It will not be adjusted as per different screen sizes. The width will change from screen to screen. Using flex-box is the best way to get the things
done , but sometimes you need the help of screen width and screen height. For that you can use the Dimensions from the react-native. Here is a guide to use it. And there are also some libraries available to make the app responsive like react-native-responsive and react-native-extended-stylesheet.
In your particular case, you could divide the row view(view1) with 2 inner views having the desired flex. And first inner view may hold the image view, if you find difficulty with the image height and width with its parents height and width, you may also need to refer the image resizemod. Second inner view holds your text. Also remember to add some padding to view1 so that the inner views will always be in the view port and Nevers goes out of the viewport.
Related
I have been trying to convert an HTML node in my react code into Image and download it afterward. There are several libraries which we can use to perform that job for us like html-to-image, dom-to-image. But the problem is these libraries download the image at its view size, not at its original size.
I mean if I have a component that has different styles at different screens when I download an image of that component I want the image to have the styles of the larger screen, irrespective of what my current window size is.
If I have a responsive component that spreads and shrinks with the window size I want the image of that component to look like how the component looked at larger screens.
If you want to download the image with the image's original dimension then simply use width and height for width and height of the image.
If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element.
Refer this link
If you want to download the image with the image's original dimension then simply use width and height for width and height of the image. If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element. Edited the image for minimum required of pixels.
I have found that we can only download an HTML node in a react tree at its view size and style. Suppose that we have a table in a page. When we are a large screen we see that table in one style. But on a smaller screen, we see it in a different style. When we download an image of that table, we want the table to be downloaded at its large-screen style and size, irrespective of the screen size.
Apparently, we can only download what is present in the physical DOM. If the physical DOM has a smaller version we can only download the smaller version of it. If physical DOM contains a larger version of the table we can download the larger version on it.
What I did to overcome this problem is to open a modal when user wanted to download the image of that table. I drew a large version of the table with fixed height and width on that modal and downloaded the image from that modal. In smaller screen this big Table inside a modal was not looking very nice, even though it was for few moments only. So to hide this big table, I have put a nice loading animation on top with fixed position.
After download completes, I close the modal.
I'm trying to implement a camera, but when I start it, it's not scaling well. The component is inside a View, and it is shrunk vertically, but if in the return method I put only the camera, it works well, so I think the problem comes from the View style, but I can't figure out how to solve it. The camera should render when a button is pressed, but when I press it this is what happens:
This is the snack: Snack
Thanks for the help.
I saw your code on snack and if you remove the position absolute property on the View Component you have in Book.js on 243 line and add flex: 1 to that view you will get the desired output. Remeber that View always takes the height of the max content of children if we do not explicity give height or give flex:1. And if we are using position property with flex than position propeties will work but flex properties won't work. So choose one of them and than do your design accordingly. If you need to have position property than take the device height from expo constants and pass that height to the View enclosing your camera.
I have a div which contains another 3 divs, and each of them has a table.
I want them to change their size depending on screen size.
The reason why I need it is because:
If page are opened on 1366x768 resolution then page footer are moved with it and as a result, I am getting scrollbar. Because one of the tables already has scrollbar by itself, another scrollbar seems ugly. On bigger resolution everything seems fine (except maybe tables looks smaller and there a big amount of empty space under them).
I read that it could be done with css help but will this kind of solution will work on a different browser? (IE and Chrome for example).
Give max-width to your most outer div which contains other DIVs and then use percentage % for inner DIVs
Assuming you have a container div is 960px wide if you have a col div in the container as 320px wide then that would be 33.33%
320*100/960 = 33.33%
I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.
That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.
I am trying to create a web page. It has two regions left and right content. Till now i am testing it on a particular window size where it is lying in center and size is exact fit. But as soon as i minimise it or open it on monitor of different size it is not getting resized based on it. How can i do it. here is the web link i am working on.
http://jsfiddle.net/efyJF/.
If you see, right now the content in side is fixed size. So, i need to scroll all the way to the right to see the end of right content border.
I feel like this is not the way the normal web pages work. How can i fix this.
Thanks
You can define your css value using percentage like width: 20% instead using fixed value. Or try to use css framework like Blueprint or 960 Grid System.
If I understand right, you are looking for something like this
The container has a property of margin: 0 auto; which puts it in the centre, and then the children divs take up a percentage of that parent div. The parent (#container) can be resized and the children will fill it up appropriately.
The mistake you made was using absolute positioning, this will perfectly align it for your screen, but other screens won't look the same.