[Fix #2719] App does not fit on iPhone X screen #2856

foopang · 2017-12-30T13:52:28Z

I guess we will need another splash image for iPhone X portrait (1125px x 2436px) 🙂

status: ready

denis-sharypin · 2018-01-02T15:13:01Z

Hey, @foopang thanks for a contribution. Could you, please double check tab bar and top bar heights? Use my design as a reference.

foopang · 2018-01-02T22:42:32Z

Hi @denis-sharypin please see if this looks good now.

foopang · 2018-01-02T22:47:41Z

src/status_im/ui/screens/views.cljs

+                                                            :choose-recipient) common-styles/color-blue4
+                                                           (:accounts :login) common-styles/color-blue2
+                                                           :transparent)
+                                                         :margin-top -20}))


Seems that the new safe-area-view RN component doesn't allow us to set the padding size for top and bottom, so I come up with this kinda odd :margin-top -20 to do the trick.

denis-sharypin · 2018-01-03T08:19:34Z

@foopang Thanks! All good from a design side

denis-sharypin · 2018-01-03T08:50:58Z

@foopang Please, add also a launch screen

foopang · 2018-01-03T13:31:07Z

@denis-sharypin the launch screen has been updated!

oskarth · 2018-01-08T10:25:47Z

@foopang Sorry, got dropped out of our pipeline. Moving to REVIEW now as design seems to have been sorted. Thanks!

oskarth · 2018-01-13T09:42:47Z

src/status_im/ui/screens/views.cljs

          [(if android? menu-context view) common-styles/flex
-           [view common-styles/flex
+           [(if iphone-x? safe-area-view view) (merge common-styles/flex


This is a bit gnarly, can we break this out in a fn or so?

oskarth

Minor comments, in general looks good

oskarth · 2018-01-13T09:43:18Z

src/status_im/ui/screens/views.cljs

-            [status-im.utils.platform :refer [android?]]
-            [status-im.ui.components.react :refer [view modal]]
+            [status-im.utils.platform :refer [android? ios?]]
+            [status-im.ui.components.react :refer [view safe-area-view modal dimensions]]


Can we turn these into react/foo etc? Generally preferable (think these are leftovers)

oskarth · 2018-01-13T09:43:36Z

src/status_im/ui/components/react.cljs

@@ -36,6 +36,7 @@
 (def geolocation (when (exists? js/window)
                   js/navigator.geolocation.))
 (def view (get-class "View"))
+(def safe-area-view (get-class "SafeAreaView"))


Is this always available? What happens if it is not?

Yes, it is always available. React Native ships with SafeAreaView as of version 0.50.

oskarth · 2018-01-13T09:44:23Z

^ @jeluard @flexsurfer please review

foopang · 2018-02-08T00:53:14Z

@Serhy Sorry for bringing in so many issues in this PR. Hope all is fixed now! Please have a look.

Serhy · 2018-02-08T14:58:37Z

Thanks a lot, @foopang !
We checked https://i.diawi.com/nZrTp8 build on iPhoneX and iPhone 5s (and Android 7.0 too!) as well this PR and it was noticed small regression:
On Assets screen - the device status bar with white background while it was a blue one.

iPhoneX view:

iPhone 5s view:

Develop and mockup view:

Could you please apply on 'Wallet' -> top-right button -> 'Manage Assets' -> 'Assets' screen the blue background to device status bar and fix conflicts?

flexsurfer · 2018-02-09T11:02:57Z

@foopang could you please resolve conflicts and take a look on @Serhy comment, thanks

foopang · 2018-02-10T05:57:22Z

@Serhy Thanks for checking! All layout issues should have been fixed now.

@flexsurfer @jeluard something to note about the iPhone X screen issues, I did some hacks to workaround.

https://github.com/status-im/status-react/pull/2856/files#diff-d8aa2157cacb46da51afecaef8554e32R294 The bottom spacing is gone when in modal view. So I put an invisible view element to the bottom for adding bottom spacing. but it is not needed when the keyboard is opened up for signing transaction.

https://github.com/status-im/status-react/pull/2856/files#diff-93d9c10db297821b5145f29bdbb7b6bcR189 The transaction sent modal won't show but will block the layout from being navigated away when closing the transaction modal and immediately opening a new modal, so adding a delay here to fix.

https://github.com/status-im/status-react/pull/2856/files#diff-dc0057ed633d7dc9f584171ce43774d5R28 The top and bottom spacing has to be reduced from the height in order to get the screen viewport height of iPhone X so that "Scan QR code" screen can show properly.

https://github.com/status-im/status-react/pull/2856/files#diff-d8aa2157cacb46da51afecaef8554e32R275 The top bar and the bottom bar can't be two different background colors. To work around that I added a view with a different background color and stuck to the bottom so that it can show different background colors on Wallet screens.

GitHub
[Fix #2719] App does not fit on iPhone X screen by foopang · Pull Request #2856 · status-im/status-react
fixes #2719 I guess we will need another splash image for iPhone X portrait (1125px x 2436px) 🙂
status: ready

Serhy · 2018-02-12T16:49:13Z

Builds Android: https://i.diawi.com/jH87hH and iOS: https://i.diawi.com/ND1hGn has been tested on iPhoneX and Android 7.0 (Samsung J7).

It looks good, no issues and app fits on iPhoneX screen.

@foopang great job! Thank you a lot for the efforts in this PR!

Ready for merge!

Signed-off-by: Andrey Shovkoplyas <[email protected]>

chadyj · 2018-02-12T18:36:42Z

Thank you @foopang! This has been a much requested feature and will be a fantastic enhancement to Status.

foopang changed the title ~~[Fix #2719] iPhone X screen left empty~~ [Fix #2719] iPhone X screen left empty space Dec 30, 2017

foopang force-pushed the fix/iphone-x-screen branch from f4bdf3f to f555ba5 Compare December 30, 2017 16:17

foopang changed the title ~~[Fix #2719] iPhone X screen left empty space~~ [Fix #2719] iPhone X screen left with empty space Dec 30, 2017

foopang force-pushed the fix/iphone-x-screen branch 2 times, most recently from 3a7e350 to ff93b57 Compare December 31, 2017 02:06

flexsurfer added bounty design labels Jan 1, 2018

oskarth added the blocked label Jan 2, 2018

denis-sharypin self-assigned this Jan 2, 2018

oskarth assigned foopang Jan 2, 2018

foopang commented Jan 2, 2018

View reviewed changes

foopang force-pushed the fix/iphone-x-screen branch from f54adfd to ee2850e Compare January 3, 2018 13:27

oskarth removed blocked design labels Jan 8, 2018

oskarth requested review from jeluard and flexsurfer January 8, 2018 10:25

oskarth reviewed Jan 13, 2018

View reviewed changes

oskarth self-requested a review January 13, 2018 09:43

oskarth suggested changes Jan 13, 2018

View reviewed changes

foopang force-pushed the fix/iphone-x-screen branch 6 times, most recently from f78716d to 1f4da3a Compare February 8, 2018 00:43

status-im deleted a comment from statustestbot Feb 9, 2018

flexsurfer approved these changes Feb 9, 2018

View reviewed changes

foopang force-pushed the fix/iphone-x-screen branch 2 times, most recently from c619016 to ac6ee6f Compare February 10, 2018 04:22

status-im deleted a comment from statustestbot Feb 10, 2018

Serhy added Tested - OK and removed Tested - Issues labels Feb 12, 2018

[Fix status-im#2719] App does not fit on iPhone X screen

eba8df6

Signed-off-by: Andrey Shovkoplyas <[email protected]>

flexsurfer force-pushed the fix/iphone-x-screen branch from ac6ee6f to eba8df6 Compare February 12, 2018 17:57

flexsurfer merged commit eba8df6 into status-im:develop Feb 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fix #2719] App does not fit on iPhone X screen #2856

[Fix #2719] App does not fit on iPhone X screen #2856

foopang commented Dec 30, 2017

denis-sharypin commented Jan 2, 2018

foopang commented Jan 2, 2018

foopang Jan 2, 2018

denis-sharypin commented Jan 3, 2018

denis-sharypin commented Jan 3, 2018

foopang commented Jan 3, 2018

oskarth commented Jan 8, 2018

oskarth Jan 13, 2018

oskarth left a comment

oskarth Jan 13, 2018

oskarth Jan 13, 2018

foopang Jan 13, 2018

oskarth commented Jan 13, 2018

foopang commented Feb 8, 2018

Serhy commented Feb 8, 2018

flexsurfer commented Feb 9, 2018

foopang commented Feb 10, 2018 •

edited by ghost

Loading

Serhy commented Feb 12, 2018

chadyj commented Feb 12, 2018

[Fix #2719] App does not fit on iPhone X screen #2856

[Fix #2719] App does not fit on iPhone X screen #2856

Conversation

foopang commented Dec 30, 2017

denis-sharypin commented Jan 2, 2018

foopang commented Jan 2, 2018

foopang Jan 2, 2018

Choose a reason for hiding this comment

denis-sharypin commented Jan 3, 2018

denis-sharypin commented Jan 3, 2018

foopang commented Jan 3, 2018

oskarth commented Jan 8, 2018

oskarth Jan 13, 2018

Choose a reason for hiding this comment

oskarth left a comment

Choose a reason for hiding this comment

oskarth Jan 13, 2018

Choose a reason for hiding this comment

oskarth Jan 13, 2018

Choose a reason for hiding this comment

foopang Jan 13, 2018

Choose a reason for hiding this comment

oskarth commented Jan 13, 2018

foopang commented Feb 8, 2018

Serhy commented Feb 8, 2018

flexsurfer commented Feb 9, 2018

foopang commented Feb 10, 2018 • edited by ghost Loading

Serhy commented Feb 12, 2018

chadyj commented Feb 12, 2018

foopang commented Feb 10, 2018 •

edited by ghost

Loading