Input component 86937xxay <new>

src/components/TextInput/TextInput.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextInput as ReactTextInput,
+  View,
+} from 'react-native';
+
+import { useTheme } from '@/hooks';
+
+type Props = React.ComponentPropsWithRef<typeof ReactTextInput> & {
+  label: string;
+  secureTextEntry?: boolean;
+  onSubmit: (text: string) => void;
+};
+
+const TextInput = ({ label, secureTextEntry, onSubmit }: Props) => {
+  const { themedStyles } = useTheme();
+  return (
+    <View style={styles.container}>
+      <Text style={{ ...styles.label, color: themedStyles.text }}>{label}</Text>
+      <ReactTextInput
+        style={{
+          ...styles.input,
+          backgroundColor: themedStyles.inputBackground,
+          color: themedStyles.text,
+          borderColor: themedStyles.inputBorder,
+        }}
+        secureTextEntry={secureTextEntry}
+        onSubmitEditing={(value) => 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 TextInput;

src/components/TextInput/index.ts

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

src/screens/Components.tsx

@@ -6,6 +6,7 @@ import { globalStyles } from 'style';
 
 import { PrimaryButton } from '@/components/Button';
 import { ConversationTile } from '@/components/ConversationTile';
+import { TextInput } from '@/components/TextInput';
 import { SwitchTheme } from '@/components/Theme';
 import { RootStackParamList } from '@/types/param';
 
@@ -16,12 +17,18 @@ const Home = ({ navigation }: Props) => {
 
   return (
     <View style={styles.container}>
+      <Text>Components screen</Text>
       <Text>{t('Hello')}</Text>
       <PrimaryButton
         text="Wróć do Home Screen"
         onPress={() => navigation.navigate('Home')}
       />
       <PrimaryButton text="primary button" onPress={() => {}} />
+      <TextInput
+        label="Email"
+        placeholder="Enter your email"
+        onSubmit={(text) => console.log(text)}
+      />
       <SwitchTheme />
       <ConversationTile
         image={{

style.ts

@@ -28,10 +28,14 @@ export const darkColors = {
   background: '#2F2F2F',
   text: '#FFFFFF',
   textSecondary: '#FFFFFF',
+  inputBackground: '#2d2d2d',
+  inputBorder: '#c7c4d6',
 };
 
 export const lightColors = {
   background: '#FFFFFF',
   text: '#010000',
   textSecondary: '#73828A',
+  inputBackground: '#f0f0f0',
+  inputBorder: '#c7c4d6',
 };