tweak scroll views

Author: JClackett

apps/app/src/app/(auth)/login.tsx

@@ -39,6 +39,7 @@ export default function Login() {
     <ModalView title="Login">
       <ScrollView
         keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
         contentContainerStyle={{ paddingBottom: 400 }}
         showsHorizontalScrollIndicator={false}
       >

apps/app/src/app/(auth)/register.tsx

@@ -41,6 +41,7 @@ export default function Register() {
     <ModalView title="Register">
       <ScrollView
         keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
         contentContainerStyle={{ paddingBottom: 400 }}
         showsHorizontalScrollIndicator={false}
       >

apps/app/src/app/(home)/(timeline)/[id]/delete.tsx

@@ -28,7 +28,12 @@ export default function DeleteTask() {
 
   return (
     <ModalView title="Delete task">
-      <ScrollView className="flex-1 space-y-2">
+      <ScrollView
+        className="flex-1 space-y-2"
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
+      >
         <Text>Do you want to only delete this task or all future tasks as well?</Text>
         <Button
           isLoading={deleteTask.isLoading}

apps/app/src/app/(home)/(timeline)/backlog.tsx

@@ -24,6 +24,7 @@ export default function Backlog() {
     <ModalView title="Backlog">
       <ScrollView
         keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
         contentContainerStyle={{ flexGrow: 1, paddingBottom: 200 }}
         showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={false} onRefresh={refetch} />}

apps/app/src/app/(home)/(timeline)/elements/[elementId]/index.tsx

@@ -43,9 +43,10 @@ export default function ElementDetail() {
       ) : (
         <ScrollView
           className="space-y-4"
-          keyboardShouldPersistTaps="handled"
           contentContainerStyle={{ minHeight: "100%", paddingBottom: 400 }}
           showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="interactive"
         >
           <ElementForm error={error?.data} element={data} onUpdate={mutate} isLoading={updateLoading} />
         </ScrollView>

apps/app/src/app/(home)/(timeline)/elements/create.tsx

@@ -23,9 +23,10 @@ export default function CreateElement() {
   return (
     <ModalView title="Create element">
       <ScrollView
+        showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
         contentContainerStyle={{ paddingBottom: 100 }}
-        showsVerticalScrollIndicator={false}
       >
         <ElementForm error={error?.data} isLoading={isLoading} onCreate={mutate} />
       </ScrollView>

apps/app/src/app/(home)/(timeline)/elements/select.tsx

@@ -45,9 +45,10 @@ export default function SelectElement() {
         onChangeText={setSearch}
       />
       <ScrollView
-        keyboardShouldPersistTaps="handled"
         contentContainerStyle={{ paddingBottom: 100 }}
         showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
       >
         <View className="space-y-1 pt-2">
           {me && isLoading ? (

apps/app/src/app/(home)/(timeline)/repeat-select.tsx

@@ -19,7 +19,12 @@ export default function RepeatSelect() {
 
   return (
     <ModalView title="What period?">
-      <ScrollView className="flex-1 pt-2">
+      <ScrollView
+        className="flex-1 pt-2"
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
+      >
         {Object.entries(TaskRepeatOptions).map(([key, value]) => (
           <TouchableOpacity
             key={key}

apps/app/src/app/(home)/habits/[id].tsx

@@ -43,9 +43,10 @@ function EditHabitForm({ habit }: { habit: Habit }) {
   return (
     <KeyboardAvoidingView behavior="padding" enabled keyboardVerticalOffset={100}>
       <ScrollView
-        keyboardShouldPersistTaps="handled"
         contentContainerStyle={{ minHeight: "100%", paddingBottom: 100 }}
         showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
       >
         <HabitForm
           error={updateHabit.error?.data}

apps/app/src/app/(home)/habits/stats.tsx

@@ -41,9 +41,10 @@ export default function HabitStat() {
         />
       </View>
       <ScrollView
-        keyboardShouldPersistTaps="handled"
         contentContainerStyle={{ flexGrow: 1, paddingBottom: 200 }}
         showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
       >
         {isLoading && !data ? (
           <View className="flex items-center justify-center pt-4">

apps/app/src/app/(home)/profile/account.tsx

@@ -78,6 +78,8 @@ export default function Account() {
         <ScrollView
           className="space-y-2 pt-4"
           showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="interactive"
           contentContainerStyle={{ paddingBottom: 400 }}
         >
           <View className="flex w-full items-center justify-center pt-2">

apps/app/src/app/(home)/profile/index.tsx

@@ -52,7 +52,12 @@ export default function Profile() {
 
   return (
     <SafeAreaView className="flex-1 px-4 pt-2">
-      <ScrollView className="flex-1 space-y-6">
+      <ScrollView
+        className="flex-1 space-y-6"
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
+      >
         <View className="flex flex-row items-center space-x-4 p-2">
           {me?.avatar ? (
             <OptimizedImage

apps/app/src/app/(home)/profile/plan.tsx

@@ -12,7 +12,12 @@ export default function Plan() {
   const discountedPlanAmount = data?.subscription?.discountPercent ? 4 - (4 * 100) / data.subscription.discountPercent : null
   return (
     <ScreenView title="Plan">
-      <ScrollView contentContainerStyle={{ paddingBottom: 200 }}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
+        contentContainerStyle={{ paddingBottom: 200 }}
+      >
         {isLoading ? (
           <View className="flex w-full items-center justify-center pt-4">
             <ActivityIndicator />

apps/app/src/app/(home)/profile/settings.tsx

@@ -32,7 +32,12 @@ export function SettingsScreen() {
   if (!me) return null
   return (
     <ScreenView title="Settings">
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
+      <ScrollView
+        contentContainerStyle={{ flexGrow: 1 }}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
+      >
         <View className="pb-8">
           <Button leftIcon={<Icon icon={AlertCircle} size={16} />} variant="ghost" onPress={deleteAccountModalProps.onOpen}>
             Delete account

apps/app/src/components/LoginPlaceholder.tsx

@@ -13,7 +13,12 @@ interface Props {
 export function LoginPlaceholder(props: Props) {
   const router = useRouter()
   return (
-    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+    <ScrollView
+      contentContainerStyle={{ flexGrow: 1 }}
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="interactive"
+    >
       <View className="space-y-4">
         <View className="space-y-6">
           <Text className="text-lg">{props.text}</Text>

apps/app/src/components/TaskForm.tsx

@@ -135,6 +135,7 @@ export function TaskForm(props: Props) {
         contentContainerStyle={{ paddingBottom: 80 }}
         className="px-4"
         contentInsetAdjustmentBehavior="always"
+        keyboardDismissMode="interactive"
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
       >