Unable to adapt for Android device

[songxiaoliang]

Hi, I am very happy to use your library. When I first saw the article, I was so excited. So I can't wait to try it out in the project, but after using it, I found that I didn't get the result.The following is the code, and the sample diagram： <Container height={ heightPercentageToDP('81.16%') } style={style}>

   ......
   </Container>

The same setting results in a blank gap at the bottom. So how to solve it and adapt it? I am a Chinese developer, my English is not perfect, I hope to understand, I look forward to your reply. thanks.

[marudy]

Hi there!

Thank you for your kind words. It's really nice to make people who read my articles excited :) And thanks for trying this library!

Now regarding your issue, it seems that that the problem is not related with the library but instead with the bottom navigator component. It does not adapt the way this library does, and so it creates a gap in different phone screens. I assume tab navigator is an external package. Can we pass the height we want to the tab navigator? I.e. heightPercentageToDP('18.84%') or the percentage you want to? I believe that would solve the issue

[songxiaoliang]

hi,Maybe the problem I described is not clear. I am setting the layout above the navigator, which is called the ad area. I want the entire ad area to occupy all the height space except the navigator. Currently I set the height={ heightPercentageToDP ('81.16%') }, perfect in samsung s7, but on the nexus5X device there will be no height. So I want to ask for your solution, thank you again. @marudy

[marudy]

Hi there,

I got your problem yes. As I said, it's not an issue with the library. The library adapts the area you want properly. The fact that it doesn't match to another device it's not because of the library, but because of the other elements in your view (bottom navigator etc).

There are 2 ways to go about it overall:

1. Try to pass specific height to all other view element's with the use of this library as proposed previously

2. If you can't do 1. then probably it makes no sense to use the library for this screen or for other screens that have elements where their height is not controlled by you. In this case it would be better to go with flex or even "normal" percentages relative to their parent elements.

[marudy]

Hi there,

did you find a way to achieve the result you wanted? I could also help if you are willing to share some code :)

Cheers, Tasos

[songxiaoliang]

@marudy Hi there,

It doesn't matter with the bottom navigator, because the bottom navigator is absolutely positioned at the bottom, not at the same level as the above layout. The problem now is to set the height of the active module, but the height displayed on different devices is different. This blank gap will appear. The effect I want is that on any device, as with the first display, the part of the active module above is guaranteed to be outside the navigator, and I look forward to your reply.

[marudy]

Hi.

From what I see it's not a problem with library but instead how your CSS is structured overall. If you give me access to your code or paste a part it somewhere online (i.e. in expo snack) I will be able to help you out :-)

Sent from ProtonMail mobile

-------- Original Message -------- On 3 Σεπ 2018, 05:35, Songlcy wrote:

@marudy Hi there,

It doesn't matter with the bottom navigator, because the bottom navigator is absolutely positioned at the bottom, not at the same level as the above layout. The problem now is to set the height of the active module, but the height displayed on different devices is different. This blank gap will appear. The effect I want is that on any device, as with the first display, the part of the active module above is guaranteed to be outside the navigator, and I look forward to your reply.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[marudy]

@songxiaoliang,

Any update on this one? Wanna share some code with me?