[DRAFT] Android (#424)

* add android & ios folders to .gitignore

* delete android and ios dirs

* fix android build errors

* fix status bar color

* fix top cutoff on composer in android

* fix weird whitespace issue in post

* fix greyed out header android

* fix main feed getting cut off android

* fix swiping on main feed

* fix profile tabs switching on android

* A few app.json config items for iOS

* Update app.json for bgfetch

* make swiping work on android

* make splash screen cover

* add eas.json

* fix image container on android

* fix android status bar color

* use expo-splash-screen instead of react-native-splash-screen

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/App.native.tsx

@@ -2,7 +2,7 @@ import 'react-native-url-polyfill/auto'
 import React, {useState, useEffect} from 'react'
 import {Linking} from 'react-native'
 import {RootSiblingParent} from 'react-native-root-siblings'
-import SplashScreen from 'react-native-splash-screen'
+import * as SplashScreen from 'expo-splash-screen'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {observer} from 'mobx-react-lite'
@@ -28,7 +28,7 @@ const App = observer(() => {
       setRootStore(store)
       analytics.init(store)
       notifee.init(store)
-      SplashScreen.hide()
+      SplashScreen.hideAsync()
       Linking.getInitialURL().then((url: string | null) => {
         if (url) {
           handleLink(url)

src/view/com/composer/Composer.tsx

@@ -4,13 +4,13 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
-  SafeAreaView,
   ScrollView,
   StyleSheet,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
+import {SafeAreaView} from 'react-native-safe-area-context'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {RichText} from '@atproto/api'
@@ -209,7 +209,7 @@ export const ComposePost = observer(function ComposePost({
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={styles.outer}>
       <TouchableWithoutFeedback onPressIn={onPressContainer}>
-        <SafeAreaView style={s.flex1}>
+        <SafeAreaView style={[s.flex1]}>
           <View style={styles.topbar}>
             <TouchableOpacity
               testID="composerCancelButton"

src/view/com/lightbox/ImageViewing/index.tsx

@@ -26,6 +26,7 @@ import useAnimatedComponents from './hooks/useAnimatedComponents'
 import useImageIndexChange from './hooks/useImageIndexChange'
 import useRequestClose from './hooks/useRequestClose'
 import {ImageSource} from './@types'
+import {SafeAreaView} from 'react-native-safe-area-context'
 
 type Props = {
   images: ImageSource[]
@@ -97,7 +98,7 @@ function ImageViewing({
   }
 
   return (
-    <View style={styles.screen} onLayout={onLayout}>
+    <SafeAreaView style={styles.screen} onLayout={onLayout}>
       <ModalsContainer />
       <View style={[styles.container, {opacity, backgroundColor}]}>
         <Animated.View style={[styles.header, {transform: headerTransform}]}>
@@ -152,7 +153,7 @@ function ImageViewing({
           </Animated.View>
         )}
       </View>
-    </View>
+    </SafeAreaView>
   )
 }
 

src/view/com/pager/TabBar.tsx

@@ -1,4 +1,4 @@
-import React, {createRef, useState, useMemo} from 'react'
+import React, {createRef, useState, useMemo, useRef} from 'react'
 import {
   Animated,
   StyleSheet,
@@ -46,6 +46,7 @@ export function TabBar({
     [items.length],
   )
   const panX = Animated.add(position, offset)
+  const containerRef = useRef<View>(null)
 
   const indicatorStyle = {
     backgroundColor: indicatorColor || pal.colors.link,
@@ -73,7 +74,12 @@ export function TabBar({
     for (let i = 0; i < items.length; i++) {
       promises.push(
         new Promise<Layout>(resolve => {
-          itemRefs[i].current?.measure(
+          if (!containerRef.current || !itemRefs[i].current) {
+            return resolve({x: 0, width: 0})
+          }
+
+          itemRefs[i].current?.measureLayout(
+            containerRef.current,
             (x: number, _y: number, width: number) => {
               resolve({x, width})
             },
@@ -94,7 +100,11 @@ export function TabBar({
   }
 
   return (
-    <View testID={testID} style={[pal.view, styles.outer]} onLayout={onLayout}>
+    <View
+      testID={testID}
+      style={[pal.view, styles.outer]}
+      onLayout={onLayout}
+      ref={containerRef}>
       <Animated.View style={[styles.indicator, indicatorStyle]} />
       {items.map((item, i) => {
         const selected = i === selectedPage

src/view/com/posts/Feed.tsx

@@ -173,11 +173,11 @@ export const Feed = observer(function Feed({
             />
           }
           contentContainerStyle={s.contentContainer}
+          style={{paddingTop: headerOffset}}
           onScroll={onScroll}
           onEndReached={onEndReached}
           onEndReachedThreshold={0.6}
           removeClippedSubviews={true}
-          contentInset={{top: headerOffset}}
           contentOffset={{x: 0, y: headerOffset * -1}}
         />
       )}

src/view/com/profile/ProfileHeader.tsx

@@ -366,6 +366,8 @@ const styles = StyleSheet.create({
     left: 10,
     width: 30,
     height: 30,
+    overflow: 'hidden',
+    borderRadius: 15,
   },
   backBtn: {
     width: 30,

src/view/com/util/PostMeta.tsx

@@ -105,8 +105,12 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
           text={
             <>
               {sanitizeDisplayName(displayName)}
-              <Text type="md" style={[pal.textLight]}>
-                &nbsp;{handle}
+              <Text
+                type="md"
+                style={[pal.textLight]}
+                numberOfLines={1}
+                lineHeight={1.2}>
+                &nbsp;@{handle}
               </Text>
             </>
           }
@@ -130,7 +134,6 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
 const styles = StyleSheet.create({
   meta: {
     flexDirection: 'row',
-    alignItems: 'baseline',
     paddingBottom: 2,
   },
   metaTwoLine: {

src/view/com/util/Selector.tsx

@@ -1,4 +1,4 @@
-import React, {createRef, useState, useMemo} from 'react'
+import React, {createRef, useState, useMemo, useRef} from 'react'
 import {
   Animated,
   StyleSheet,
@@ -24,6 +24,7 @@ export function Selector({
   panX: Animated.Value
   onSelect?: (index: number) => void
 }) {
+  const containerRef = useRef<View>(null)
   const pal = usePalette('default')
   const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
     undefined,
@@ -68,7 +69,11 @@ export function Selector({
     for (let i = 0; i < items.length; i++) {
       promises.push(
         new Promise<Layout>(resolve => {
-          itemRefs[i].current?.measure(
+          if (!containerRef.current || !itemRefs[i].current) {
+            return resolve({x: 0, width: 0})
+          }
+          itemRefs[i].current?.measureLayout(
+            containerRef.current,
             (x: number, _y: number, width: number) => {
               resolve({x, width})
             },
@@ -86,7 +91,10 @@ export function Selector({
   }
 
   return (
-    <View style={[pal.view, styles.outer]} onLayout={onLayout}>
+    <View
+      style={[pal.view, styles.outer]}
+      onLayout={onLayout}
+      ref={containerRef}>
       <Animated.View style={[styles.underline, underlineStyle]} />
       {items.map((item, i) => {
         const selected = i === selectedIndex

src/view/shell/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {StatusBar, StyleSheet, useWindowDimensions, View} from 'react-native'
+import {StatusBar} from 'expo-status-bar'
+import {StyleSheet, useWindowDimensions, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Drawer} from 'react-native-drawer-layout'
 import {useNavigationState} from '@react-navigation/native'
@@ -43,7 +44,7 @@ const ShellInner = observer(() => {
             open={store.shell.isDrawerOpen}
             onOpen={onOpenDrawer}
             onClose={onCloseDrawer}
-            swipeEdgeWidth={winDim.width}
+            swipeEdgeWidth={winDim.width / 2}
             swipeEnabled={
               !canGoBack &&
               store.session.hasSession &&
@@ -72,11 +73,7 @@ export const Shell: React.FC = observer(() => {
   const pal = usePalette('default')
   return (
     <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
-      <StatusBar
-        barStyle={
-          theme.colorScheme === 'dark' ? 'light-content' : 'dark-content'
-        }
-      />
+      <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
       <RoutesContainer>
         <ShellInner />
       </RoutesContainer>