title: Split outer vs. inner wrapper-styles in TitlePrivate.
title: Split outer vs. inner wrapper-styles in TitlePrivate.

In the recent commit 8f99a6222, we made the outermost component
rendered by `TitlePrivate` a `Touchable`, where it had been a `View`;
and we kept passing it the same `style` prop as before.

This worked fine on Android, where our `Touchable` implementation
passes its `style` prop through to an inner wrapper `View`.  But
on iOS, our `Touchable` passes its `style` instead to the outer
`TouchableHighlight`, and makes an inner wrapper `View` with no
`style` prop at all.

The consequence is that certain style properties, notably
`flexDirection`, have no effect -- `flexDirection` is reset to the
default `column` by the inner wrapper `View`.  The other user's
avatar ends up stacked above their name and ActivityText -- see
screenshot at #3380.

We can fix that by moving the style in TitlePrivate to an inner
wrapper `View` of its own.  On the other hand if we do that with
the whole `styles.navWrapper`, then `flex: 1` has no effect --
disrupting the horizontal layout of the nav bar by letting the
"info" button move left.

So, separate the outward-facing style property `flex: 1` from the
inward-facing properties like `flexDirection`, and put them each
in an appropriate spot.

The existing `Touchable` interface doesn't support this
distinction.  That interface should be changed to at a minimum
make the behavior consistent between platforms and clear; for now
to fix the bug, just handle things explicitly at this call site.

This also follows up on 7048e7939 "TitleStream: Move single-use
styles into file" by eliminating another reference to the global
`navWrapper` style in favor of explicit styles in the file where
they're used.

Thanks to @jainkuniya for spotting this issue, and for debugging
and draft fixes that helped illuminate the problem.

vishwesh3/zulip-mobile,vishwesh3/zulip-mobile,vishwesh3/zulip-mobile,vishwesh3/zulip-mobile