fix: Input icon alignment on Android

src/components/Input.tsx

@@ -1,13 +1,45 @@
+import React from 'react';
+import { Platform, TextInputProps } from 'react-native';
 import styled, { css } from 'styled-components/native';
+import useDefaultStyles from './Colors';
+import { Gap } from './Utility';
 
-const Input = styled.TextInput<{ icon?: boolean }>`
+export interface InputProps extends TextInputProps {
-    margin: 10px 0;
+    icon?: React.ReactNode
+}
+
+const Container = styled.View`
+    margin: 6px 0;
     border-radius: 8px;
-    padding: 15px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     
-    ${(props) => props.icon && css`
+    ${Platform.select({
-        padding-left: 40px;
+        ios: css`padding: 12px;`,
-    `}
+        android: css`padding: 4px 12px;`,
+    })}
 `;
 
+const InputWrapper = styled.TextInput`
+    margin: 0;
+    padding: 0;
+`;
+
+function Input({ icon = null, style, ...rest }: InputProps) {
+    const defaultStyles = useDefaultStyles();
+
+    return (
+        <Container style={[defaultStyles.input, style]}>
+            {icon && (
+                <>
+                    {icon}
+                    <Gap size={8} />
+                </>
+            )}
+            <InputWrapper {...rest} />
+        </Container>
+    );
+}
+
 export default Input;

src/components/Utility.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View } from 'react-native';
+
+export interface GapProps {
+    size: number;
+    direction?: 'horizontal' | 'vertical';
+}
+
+export function Gap({ size, direction = 'horizontal' }: GapProps) {
+    return <View style={{ [direction === 'horizontal' ? 'width' : 'height']: size }} />;
+}

src/screens/Search/index.tsx

@@ -70,13 +70,6 @@ const SearchResult = styled.View`
     height: 54px;
 `;
 
-const SearchIndicator = styled(SearchIcon)`
-    position: absolute;
-    left: 16px;
-    top: 26px;
-`;
-
-
 const fuseOptions: Fuse.IFuseOptions<Album> = {
     keys: ['Name', 'AlbumArtist', 'AlbumArtists', 'Artists'],
     threshold: 0.1,
@@ -229,10 +222,9 @@ export default function Search() {
                         onChangeText={setSearchTerm}
                         style={[defaultStyles.input, { marginBottom: 12 }]}
                         placeholder={t('search') + '...'}
-                        icon
+                        icon={<SearchIcon width={14} height={14} fill={defaultStyles.textHalfOpacity.color} />}
                         testID="search-input"
                     />
-                    <SearchIndicator width={14} height={14} fill={defaultStyles.textHalfOpacity.color} />
                     {isLoading && <Loading><ActivityIndicator /></Loading>}
                 </View>
             </Container>