Input component 86937xxay <new>

src/components/Input/Input.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+
+import { useTheme } from '@/hooks';
+
+type Props = React.ComponentPropsWithRef<typeof TextInput> & {
+  label: string;
+  secureTextEntry?: boolean;
+  onSubmit: (text: string) => void;
+};
+
+const Input = ({ ...props }: Props) => {
+  const { themedStyles } = useTheme();
+  return (
+    <View style={styles.container}>
+      <Text style={{ ...styles.label, color: themedStyles.text }}>
+        {props.label}
+      </Text>
+      <TextInput
+        style={{
+          ...styles.input,
+          backgroundColor: themedStyles.inputBackground,
+          color: themedStyles.text,
+          borderColor: themedStyles.inputBorder,
+        }}
+        defaultValue=""
+        secureTextEntry={props.secureTextEntry}
+        onSubmitEditing={(value) => props.onSubmit(value.nativeEvent.text)}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 10,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 5,
+    fontFamily: '',
+  },
+  input: {
+    borderWidth: 2.3,
+    borderRadius: 10,
+    width: 300,
+    height: 40,
+    padding: 10,
+    fontSize: 16,
+  },
+});
+
+export default Input;

src/components/Input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input';

src/screens/Components.tsx

@@ -5,6 +5,7 @@ import { globalStyles } from 'style';
 
 import { SwitchTheme } from '@/components';
 import { PrimaryButton } from '@/components/Button';
+import { Input } from '@/components/Input';
 import { RootStackParamList } from '@/types/param';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Components'>;
@@ -13,6 +14,11 @@ const Home = ({ navigation }: Props) => {
   return (
     <View style={styles.container}>
       <Text>Components screen</Text>
+      <Input
+        label="Email"
+        placeholder="Enter your email"
+        onSubmit={(text) => console.log(text)}
+      />
       <PrimaryButton
         title="Wróć do Home Screen"
         onPress={() => navigation.navigate('Home')}

style.ts

@@ -16,8 +16,14 @@ export const globalStyles = StyleSheet.create({
 
 export const darkColors = {
   primary: 'blue',
+  inputBackground: '#2d2d2d',
+  text: 'white',
+  inputBorder: '#c7c4d6',
 };
 
 export const lightColors = {
   primary: 'green',
+  inputBackground: '#f0f0f0',
+  Text: 'black',
+  inputBorder: '#c7c4d6',
 };