chat screen: Fix broken layout on iOS.

Fixes #3273.

A previous commit fixing a weird issue on Android inadvertently
broke the iOS layout:
f142452 chat screen: Work around RN bug making nav bar fail to render.

The ZulipStatusBar component is a difference between Android and iOS
as it has actual height on iOS but not on Android, we can never paint
in the status bar area of Android, we can change the color only.

This commit keeps the fix from the previous commit but simplifies it:
* removed the extra View, no need for the extra wrapper
* simplified the style, no need for the extra `flex`
* moved `ZulipStatusBar` to bottom because of
  `flexDirection: 'column-reverse'

src/chat/ChatScreen.js

@@ -22,7 +22,6 @@ type Props = {|
 const componentStyles = StyleSheet.create({
   /** A workaround for #3089, by letting us put Chat (with MessageList) first. */
   reverse: {
-    flex: 1,
     flexDirection: 'column-reverse',
   },
 });
@@ -40,13 +39,11 @@ export default class ChatScreen extends PureComponent<Props> {
 
     return (
       <ActionSheetProvider>
-        <View style={contextStyles.screen}>
+        <View style={[contextStyles.screen, componentStyles.reverse]}>
+          <Chat narrow={narrow} />
+          <OfflineNotice />
+          <ChatNavBar narrow={narrow} />
           <ZulipStatusBar narrow={narrow} />
-          <View style={componentStyles.reverse}>
-            <Chat narrow={narrow} />
-            <OfflineNotice />
-            <ChatNavBar narrow={narrow} />
-          </View>
         </View>
       </ActionSheetProvider>
     );