These are equivalent, but Greg prefers this form because it seems
cleaner. See
  https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Flow.20types-first/near/1239060.

Like we did in 4aedc4c.

Like we did in 4aedc4c.

Like we did in 4aedc4c.

Use `useRef` for `animatedValue` [1] [2].

Greg points out that we should choose `useEffect` over
`useLayoutEffect` [3].

[1] https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
[2] https://reactnative.dev/docs/animated
[3] zulip#4914 (comment)

Currently, AnimatedComponent has only one caller, and it always
starts by passing `false` for `visible`. Since it never passes
`true` initially, the new path isn't exercised. But we should make
it so future callers that pass `true` initially will actually see
the element start as visible. So, do that.

See more discussion at
  zulip#4914 (comment).

It's intentional that both of these expressions do the same thing:
the point is that when the component first renders, it should start
out in the desired state, and then when the desired state changes
and causes a rerender it'll animate to the new desired state.

So, we can make that explicit (and avoid some future change causing
an accidental discrepancy) by writing the expression just once.

Also because `visible` is already boolean, we can skip the `=== true`.

Instead of on every render, where it often ends up being unnecessary
work.

Using `useContext(TranslationContext)` for the `GetText` function,
instead of `withGetText`. (Since this is now a function component,
we can subscribe to two different contexts, the other one being
`ThemeContext`.)

Greg points out [1] that `canBeCleared` is always the same as
`text.length > 0`. So, just drop this piece of state and compute the
value we need when we need it.

[1] zulip#4914 (comment)

…ents.

Using `useRef` for `unsubscribeFocusListener` [1]. We'll simplify
the navigation-focus logic with `useFocusEffect` in the next commit.

[1] https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

Following the doc at
  https://reactnavigation.org/docs/use-focus-effect/.

Greg points out [1] that `useFocusEffect` seems to have the effect
of calling the callback even on the component's first mount (if the
screen is focused), whereas the old listener-based code would not.
That doesn't seem to have a practical effect, here; empirically, it
looks like the input gets focused anyway before this change. That's
probably due to the `autoFocus` prop we pass to the `TextInput`.

[1] zulip#4914 (comment).

This is much easier to do now that we've converted these to function
components in this series.

This will help move us along toward Flow's new "Types-First" mode;
switching entirely is zulip#4907.

Prefer the `Node` type exported from React over `React$Node`.
They're equivalent, but Greg prefers `Node` as it seems cleaner; see
  https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Flow.20types-first/near/1239060.