Enhancement/responsive

[tsejerome]

Resolves #15 Resolves #57

[tsejerome]

Currently tested on iPad Pro 9.7 Inch and iPhone 13 Will test on Android and iPhone 8 tomorrow before requesting @aguycalled review

[aguycalled]

Device: iPad

The 12 words should fit in one screen view without needing to scroll

Same with the text fields to confirm the words of the next step:

[aguycalled]

Device iPad:

https://user-images.githubusercontent.com/24814046/164027025-cc18664f-359d-4944-b5b5-fddca8791fe4.mp4

When tapping on a text field of the third row, the keyboard hides it and the user can't see what he is writing

[aguycalled]

On IPad/iPad Pro (9 inches)/iPad Pro (12,9 inches), the onboarding screen does not fit the whole text:

Issue is also visible, although better layer out, on iPad Air/iPad Pro (11 inch):

While iPhone 8 does fit it:

Which makes me think there is something wrong with the ratio/scaling?

[aguycalled]

iPad mini and iPad Pro (12,9 inches) have the issue we commented about scrolling the onboarding, where the middle card is ignored:

https://user-images.githubusercontent.com/24814046/164030401-35eff588-5c50-43eb-94f2-b5c25b533dd8.mp4

I think this is fixed by using

snapToOffsets={[...Array(OnBoarding.length)].map((x, i) => (i * (width-80)))}

instead of

snapToInterval={scale(width - 80)}

[aguycalled]

everything else looking good on iOS devices. haven't tried android yet

[tsejerome]

For onboarding screen, the reason for this to happen is because of the dimension differences of iPhone and iPad, I think for better asethetics, we will add a maxHeight to the Card

Relevant Fixes:

Also added some asthetics update on onboarding

[tsejerome]

For onBoarding screen button covering text issue, let's update it accordingly after the content is set

[aguycalled]

iPad main screen does not have room for the three buttons: