[MV-336] Add custom text input

example/android/app/src/main/res/values/styles.xml

@@ -4,6 +4,8 @@
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- Customize your theme here. -->
  <item name="android:textColor">#000000</item>
+ <item name="colorAccent">@color/darkText</item>
  </style>
 
+ <color name="darkText">#001A72</color>
 </resources>

example/src/components/TextInput.tsx

@@ -0,0 +1,86 @@
+import { AdditionalColors, BrandColors, TextColors } from '@colors';
+import { TextInputTextStyle } from '@components/Typo';
+import React, { useState } from 'react';
+import { StyleSheet, TextInput as RNTextInput } from 'react-native';
+
+const TextInputStyles = StyleSheet.create({
+ main: {
+ width: '100%',
+ height: 56,
+ borderRadius: 40,
+ borderStyle: 'solid',
+ borderWidth: 2,
+ backgroundColor: AdditionalColors.white,
+ paddingLeft: 16,
+ },
+ active: {
+ color: TextColors.darkText,
+ },
+ notActive: {
+ color: AdditionalColors.grey80,
+ borderColor: AdditionalColors.grey60,
+ },
+ offFocus: {
+ borderColor: BrandColors.darkBlue100,
+ },
+ onFocus: {
+ borderColor: BrandColors.seaBlue80,
+ },
+});
+
+type OnChangeTextType = (text: string) => void;
+
+type TextInputProps = {
+ placeholder?: string;
+ value?: string;
+ editable?: boolean;
+ onChangeText?: OnChangeTextType;
+};
+
+export const TextInput = ({
+ placeholder = '',
+ value,
+ editable = true,
+ onChangeText = () => {},
+}: TextInputProps) => {
+ const [focusStyle, setFocusStyle] = useState(TextInputStyles.offFocus);
+ const placeholderTextColor = AdditionalColors.grey80;
+ const fontStyle = TextInputTextStyle.body;
+
+ const onFocus = () => {
+ setFocusStyle(TextInputStyles.onFocus);
+ };
+
+ const offFocus = () => {
+ setFocusStyle(TextInputStyles.offFocus);
+ };
+
+ const GetStyleForTextInput = () => {
+ if (editable) {
+ return [
+ TextInputStyles.main,
+ TextInputStyles.active,
+ focusStyle,
+ fontStyle,
+ ];
+ }
+
+ return [TextInputStyles.main, TextInputStyles.notActive, fontStyle];
+ };
+
+ return (
+ <RNTextInput
+ style={GetStyleForTextInput()}
+ placeholder={placeholder}
+ placeholderTextColor={placeholderTextColor}
+ value={value}
+ onFocus={onFocus}
+ onBlur={offFocus}
+ editable={editable}
+ onChangeText={onChangeText}
+ // @ts-ignore
+ colorCursor={TextColors.darkText}
+ selectionColor={TextColors.additionalLightText}
+ />
+ );
+};

example/src/components/Typo.tsx

@@ -162,6 +162,13 @@ const TextStylesCustom = StyleSheet.create({
  },
 });
 
+export const TextInputTextStyle = StyleSheet.create({
+ body: {
+ fontFamily: TextStylesSmall.bodySmall.fontFamily,
+ fontSize: TextStylesSmall.bodySmall.fontSize,
+ },
+});
+
 type VariantName =
  | 'h1'
  | 'h2'

example/src/screens/Home.tsx

@@ -1,3 +1,4 @@
+import { TextInput } from '@components/TextInput';
 import { Typo } from '@components/Typo';
 import { StandardButton } from '@components/buttons/StandardButton';
 import { SERVER_URL } from '@env';
@@ -6,7 +7,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import {
  View,
  Text,
- TextInput,
  StyleSheet,
  Platform,
  PermissionsAndroid,
@@ -98,24 +98,15 @@ export const Home = ({ navigation }) => {
  <View style={styles.container}>
  <Typo variant="h3">Room name:</Typo>
  <TextInput
- value={roomName}
+ placeholder="Room name"
  onChangeText={(val) => {
  setRoomName(val);
  }}
- style={styles.textInput}
  />
  <Text>Display name:</Text>
- <TextInput
- value={displayName}
- onChangeText={setDisplayName}
- style={styles.textInput}
- />
+ <TextInput value={displayName} onChangeText={setDisplayName} />
  <Text>Server URL:</Text>
- <TextInput
- value={serverUrl}
- onChangeText={setServerUrl}
- style={styles.textInput}
- />
+ <TextInput value={serverUrl} onChangeText={setServerUrl} />
  <View style={styles.row}>
  <Text>Simulcast:</Text>
  <Switch