Give explicit names to MobX observer components (#1413)

* Consider observer(...) as components

* Add display names to MobX observers

* Temporarily suppress nested components

* Suppress new false positives for react/prop-types

src/view/shell/Composer.tsx

@@ -6,73 +6,71 @@ import {ComposerOpts} from 'state/models/ui/shell'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {usePalette} from 'lib/hooks/usePalette'
 
-export const Composer = observer(
-  ({
-    active,
-    winHeight,
-    replyTo,
-    onPost,
-    onClose,
-    quote,
-    mention,
-  }: {
-    active: boolean
-    winHeight: number
-    replyTo?: ComposerOpts['replyTo']
-    onPost?: ComposerOpts['onPost']
-    onClose: () => void
-    quote?: ComposerOpts['quote']
-    mention?: ComposerOpts['mention']
-  }) => {
-    const pal = usePalette('default')
-    const initInterp = useAnimatedValue(0)
+export const Composer = observer(function ComposerImpl({
+  active,
+  winHeight,
+  replyTo,
+  onPost,
+  onClose,
+  quote,
+  mention,
+}: {
+  active: boolean
+  winHeight: number
+  replyTo?: ComposerOpts['replyTo']
+  onPost?: ComposerOpts['onPost']
+  onClose: () => void
+  quote?: ComposerOpts['quote']
+  mention?: ComposerOpts['mention']
+}) {
+  const pal = usePalette('default')
+  const initInterp = useAnimatedValue(0)
 
-    useEffect(() => {
-      if (active) {
-        Animated.timing(initInterp, {
-          toValue: 1,
-          duration: 300,
-          easing: Easing.out(Easing.exp),
-          useNativeDriver: true,
-        }).start()
-      } else {
-        initInterp.setValue(0)
-      }
-    }, [initInterp, active])
-    const wrapperAnimStyle = {
-      transform: [
-        {
-          translateY: initInterp.interpolate({
-            inputRange: [0, 1],
-            outputRange: [winHeight, 0],
-          }),
-        },
-      ],
+  useEffect(() => {
+    if (active) {
+      Animated.timing(initInterp, {
+        toValue: 1,
+        duration: 300,
+        easing: Easing.out(Easing.exp),
+        useNativeDriver: true,
+      }).start()
+    } else {
+      initInterp.setValue(0)
     }
+  }, [initInterp, active])
+  const wrapperAnimStyle = {
+    transform: [
+      {
+        translateY: initInterp.interpolate({
+          inputRange: [0, 1],
+          outputRange: [winHeight, 0],
+        }),
+      },
+    ],
+  }
 
-    // rendering
-    // =
+  // rendering
+  // =
 
-    if (!active) {
-      return <View />
-    }
+  if (!active) {
+    return <View />
+  }
 
-    return (
-      <Animated.View
-        style={[styles.wrapper, pal.view, wrapperAnimStyle]}
-        aria-modal
-        accessibilityViewIsModal>
-        <ComposePost
-          replyTo={replyTo}
-          onPost={onPost}
-          onClose={onClose}
-          quote={quote}
-          mention={mention}
-        />
-      </Animated.View>
-    )
-  },
-)
+  return (
+    <Animated.View
+      style={[styles.wrapper, pal.view, wrapperAnimStyle]}
+      aria-modal
+      accessibilityViewIsModal>
+      <ComposePost
+        replyTo={replyTo}
+        onPost={onPost}
+        onClose={onClose}
+        quote={quote}
+        mention={mention}
+      />
+    </Animated.View>
+  )
+})
 
 const styles = StyleSheet.create({
   wrapper: {