replace native-base usage in FormInput

src/components/FormInput.tsx

@@ -1,7 +1,9 @@
-import { Input, Text, WarningOutlineIcon, FormControl, IInputProps } from 'native-base';
 import React from 'react';
 import { Controller, UseControllerProps } from 'react-hook-form';
-import { ReturnKeyTypeOptions } from 'react-native';
+import { ReturnKeyTypeOptions, Text, StyleSheet } from 'react-native';
+import { TextField, TextFieldProps } from 'react-native-ui-lib';
+
+import theme from 'src/theme';
 
 type FormInputProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12,7 +14,7 @@ type FormInputProps = {
   label: string;
   rules?: UseControllerProps['rules'];
   returnKeyType?: ReturnKeyTypeOptions;
-} & IInputProps;
+} & TextFieldProps;
 
 const FormInput = ({
   errors,
@@ -31,26 +33,41 @@ const FormInput = ({
       control={control}
       rules={rules}
       render={({ field: { onChange, onBlur, value, ref } }) => (
-        <FormControl isInvalid={Boolean(fieldError)}>
-          <FormControl.Label>{label}</FormControl.Label>
-          <Input
+        <>
+          <TextField
             ref={ref}
+            label={label}
             returnKeyType={returnKeyType}
             onChangeText={onChange}
             onBlur={onBlur}
+            fieldStyle={[styles.field, fieldError ? styles.fieldWithError : undefined]}
             value={value}
             {...rest}
           />
-          {fieldError && (
-            <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
-              <Text>{fieldError.message?.toString()}</Text>
-            </FormControl.ErrorMessage>
-          )}
-        </FormControl>
+          {fieldError && <Text style={styles.errorMessage}>{fieldError.message?.toString()}</Text>}
+        </>
       )}
       name={name}
       defaultValue=""
     />
   );
 };
+
+const styles = StyleSheet.create({
+  field: {
+    borderColor: theme.colors.gray1,
+    borderWidth: 1,
+    borderRadius: 4,
+    padding: 4,
+    marginVertical: 4,
+  },
+  fieldWithError: {
+    borderColor: theme.colors.danger,
+  },
+  errorMessage: {
+    color: theme.colors.danger,
+    marginBottom: 4,
+  },
+});
+
 export default FormInput;

src/modules/login/Login.tsx

@@ -19,9 +19,9 @@ const Login = () => {
         <FormInput
           name="email"
           label="E-post / Brukernavn"
-          keyboardType="email-address"
           control={control}
           errors={errors}
+          keyboardType="email-address"
           autoFocus
           autoCapitalize="none"
           autoCorrect={false}

src/theme.ts

@@ -13,6 +13,7 @@ const colors = {
   neufBlue: '#0A0F6D',
   neufWhite: '#FFFFFF',
   neufBlack: '#161516',
+  gray1: '#dddddd',
 };
 
 const card = {