Refactor Input component styles and enhance MMKVDataEditor and MMKVDataList for improved readability and animation

Author: codeAbinash

src/components/Input.tsx

@@ -20,7 +20,7 @@ export function Input({ Icon, Right, accent = Colors.accent, multiline, classNam
           style={[{ fontSize: 12.5, marginBottom: 1, paddingVertical: 0, flex: 1 }, SEMIBOLD]}
           placeholderTextColor={scheme === 'dark' ? Colors.zinc[500] : Colors.zinc[400]}
           cursorColor={accent}
-          selectionColor={accent + '55'}
+          selectionColor={accent + '77'}
           selectionHandleColor={accent}
           placeholder='Default placeholder'
           textAlignVertical={multiline ? 'top' : 'center'}

src/screens/DeveloperOptions/MMKVDataEditor.tsx

@@ -115,7 +115,7 @@ export default function MMKVDataEditor({
             </SettGroup>
           )}
           <SettText>
-            Be careful when {!isNew ? 'editing' : ' adding'} MMKV data. Wrong data can cause the app to crash. And make
+            Be careful when {!isNew ? 'editing' : ' adding'} MMKV data. Wrong data can cause the app to crash and make
             all data unreadable.
           </SettText>
           <SettGroup title='Value'>
@@ -124,7 +124,7 @@ export default function MMKVDataEditor({
               value={value}
               onChangeText={setValue}
               multiline
-              style={{ fontFamily: 'monospace', fontWeight: 'bold', lineHeight: 24 }}
+              style={{ fontFamily: 'monospace', fontWeight: 'bold', lineHeight: 18, fontSize: 12 }}
               autoCorrect={false}
             />
           </SettGroup>

src/screens/DeveloperOptions/MMKVDataList.tsx

@@ -13,9 +13,10 @@ import { useIsFocused } from '@react-navigation/native'
 import { Colors } from '@utils/colors'
 import { ls, type StorageKeys } from '@utils/storage'
 import type { NavProp } from '@utils/types'
-import { screenDelay } from '@utils/utils'
+import { delayedFadeAnimationSearch, screenDelay } from '@utils/utils'
 import React, { useEffect } from 'react'
 import { View } from 'react-native'
+import Animated from 'react-native-reanimated'
 
 export default function MMKVDataList({ navigation }: NavProp) {
   const state = useIsFocused()
@@ -64,16 +65,16 @@ export default function MMKVDataList({ navigation }: NavProp) {
 
           <SettGroup title='Stored keys' className='pb-4'>
             {searchResults?.map((item, i) => (
-              // <Animated.View key={item} entering={delayedFadeAnimationSearch(search, i)}>
-              <SettOption
-                title={item}
-                arrow
-                key={item}
-                numberOfLines={1}
-                Icon={<RoundedIcon Icon={Database02SolidIcon} className='bg-slate-500' />}
-                onPress={() => navigation.navigate('MMKVDataEditor', { key: item as StorageKeys })}
-              />
-              // </Animated.View>
+              <Animated.View key={item} entering={delayedFadeAnimationSearch(search, i)}>
+                <SettOption
+                  title={item}
+                  arrow
+                  key={item}
+                  numberOfLines={1}
+                  Icon={<RoundedIcon Icon={Database02SolidIcon} className='bg-slate-500' />}
+                  onPress={() => navigation.navigate('MMKVDataEditor', { key: item as StorageKeys })}
+                />
+              </Animated.View>
             ))}
             {initStorage?.length === 0 && (
               <>

src/screens/index.tsx

@@ -77,7 +77,7 @@ function TabBar({ state, descriptors, navigation }: BottomTabBarProps) {
               onPress={onPress}
               onLongPress={onLongPress}
               className='flex items-center justify-center p-1'
-              style={{ flex: 1, paddingTop: 13, paddingBottom: 5 }}
+              style={{ flex: 1, paddingTop: 13, paddingBottom: 8 }}
             >
               {options.tabBarIcon && options.tabBarIcon({ focused: isFocused, color, size: 22 })}
               <SemiBold style={{ color, marginTop: 4, fontSize: 8.5 }}>{label as ReactNode}</SemiBold>