#239

package.json

@@ -4,7 +4,7 @@
     "native": "220214",
     "major": 3,
     "minor": 5,
-    "patch": 3,
+    "patch": 4,
     "expo": "44.0.0"
   },
   "description": "tooot app for Mastodon",

src/components/Instance.tsx

@@ -180,7 +180,11 @@ const ComponentInstance: React.FC<Props> = ({
             keyboardAppearance={mode}
             {...(scrollViewRef && {
               onFocus: () =>
-                setTimeout(() => scrollViewRef.current?.scrollToEnd(), 150)
+                setTimeout(
+                  () =>
+                    scrollViewRef.current?.scrollTo({ y: 0, animated: true }),
+                  150
+                )
             })}
             autoCorrect={false}
             spellCheck={false}
@@ -276,7 +280,7 @@ const styles = StyleSheet.create({
   imageContainer: { flexDirection: 'row' },
   image: { resizeMode: 'contain', flex: 1, aspectRatio: 16 / 9 },
   base: {
-    marginVertical: StyleConstants.Spacing.L,
+    marginTop: StyleConstants.Spacing.L,
     marginHorizontal: StyleConstants.Spacing.Global.PagePadding
   },
   inputRow: {

src/screens/Tabs/Me/Switch.tsx

@@ -11,7 +11,7 @@ import {
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   KeyboardAvoidingView,
@@ -56,6 +56,9 @@ const TabMeSwitch: React.FC = () => {
   const instanceActive = useSelector(getInstanceActive, () => true)
 
   const scrollViewRef = useRef<ScrollView>(null)
+  useEffect(() => {
+    scrollViewRef.current?.scrollToEnd({ animated: true })
+  }, [])
 
   return (
     <KeyboardAvoidingView
@@ -67,8 +70,19 @@ const TabMeSwitch: React.FC = () => {
         style={styles.base}
         keyboardShouldPersistTaps='always'
       >
+        <View>
+          <Text style={[styles.header, { color: colors.primaryDefault }]}>
+            {t('me.switch.new')}
+          </Text>
+          <ComponentInstance
+            scrollViewRef={scrollViewRef}
+            disableHeaderImage
+            goBack
+          />
+        </View>
+
         <View
-          style={[styles.firstSection, { borderBottomColor: colors.border }]}
+          style={[styles.firstSection, , { borderTopColor: colors.border }]}
         >
           <Text style={[styles.header, { color: colors.primaryDefault }]}>
             {t('me.switch.existing')}
@@ -99,17 +113,6 @@ const TabMeSwitch: React.FC = () => {
               : null}
           </View>
         </View>
-
-        <View style={styles.secondSection}>
-          <Text style={[styles.header, { color: colors.primaryDefault }]}>
-            {t('me.switch.new')}
-          </Text>
-          <ComponentInstance
-            scrollViewRef={scrollViewRef}
-            disableHeaderImage
-            goBack
-          />
-        </View>
       </ScrollView>
     </KeyboardAvoidingView>
   )
@@ -126,12 +129,9 @@ const styles = StyleSheet.create({
   },
   firstSection: {
     marginTop: StyleConstants.Spacing.S,
+    paddingTop: StyleConstants.Spacing.M,
     marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
-    paddingBottom: StyleConstants.Spacing.S,
-    borderBottomWidth: StyleSheet.hairlineWidth
-  },
-  secondSection: {
-    paddingTop: StyleConstants.Spacing.M
+    borderTopWidth: StyleSheet.hairlineWidth
   },
   accountButtons: {
     flex: 1,