Як створити центроване поле вводу для сум у React Native

Створення користувацького інтерфейсу для введення суми з Adyen та React + TypeScript

Чисте, центроване поле вводу для введення сум — це невелика, але важлива частина будь-якого фінансового додатку. Воно покращує досвід користувача, забезпечує ясність і простоту використання. У цій статті ми розглянемо створення повторно використовуваного компонента CurrencySection у React Native.

Цей компонент простий, але потужний, і має такі особливості:

• Динамічне налаштування висоти для поля вводу.
• Автоматичне форматування сум у заданій валюті.
• Повідомлення про помилки, що відображаються безпосередньо, для кращого зворотного зв'язку з користувачем.

Давайте перейдемо до деталей!

Що робить компонент CurrencySection

Компонент CurrencySection призначений для того, щоб:

1. Дозволяти користувачам вводити суми в привабливому та центрованому форматі.
2. Автоматично форматувати суми в заданій валюті.
   3.
   Надайте гнучкість для налаштування елементів, таких як символ валюти, текст підказки та повідомлення про помилки.

Реалізація

Ось повна реалізація компонента CurrencySection:

/* eslint-disable react-native/no-inline-styles */  
import React, {useCallback, useState} from 'react';  
import {  
 Keyboard,  
 NativeSyntheticEvent,  
 Platform,  
 StyleSheet,  
 TextInput,  
 TextInputContentSizeChangeEventData,  
 TextInputProps,  
 View,  
} from 'react-native';  
import {  
 formatAmountInCurrency,  
 MAX_AMOUNT_LENGTH_CURRENCY_SECTION,  
 trimNumber,  
} from '../../utils/functions';  
import colors from '../../utils/helpers/colors';  
import {InlineError} from '../../utils/helpers/Reusables';  
import AppText from '../texts/appText';

interface CurrencySectionProps extends TextInputProps {  
 title?: string;  
 amount?: string;  
 error?: string;  
 onChangeAmount?: (amount: string) => void;  
 isEditable?: boolean;  
 currency?: string;  
}const CurrencySection: React.FC = ({  
 title = 'Введіть суму',  
 amount = '',  
 error = '',  
 onChangeAmount,  
 isEditable = true,  
 currency = '₦',  
 ...props  
}) => {  
 const [height, setHeight] = useState(42); const onChangeText = useCallback(  
 (text: string) => {  
 onChangeAmount?.(trimNumber(text));  
 },  
 [onChangeAmount],  
 ); const onBlur = useCallback(() => {  
 if (amount) {  
 const formattedAmount = formatAmountInCurrency(  
 Number(amount.replaceAll(',', '')),  
 ).replaceAll(',', '');  
 onChangeAmount?.(formattedAmount);  
 }  
 }, [amount, onChangeAmount]); const handleContentSizeChange = useCallback(  
 (e: NativeSyntheticEvent) => {  
 setHeight(e.nativeEvent.contentSize.height);  
 },  
 [],  
 ); return (  

 {title ? {title} : null}  


 {currency}  


  {error?.toString()?.length > 0 && (  

 )}  

 );  
};const styles = StyleSheet.create({  
 amountContainerStyle: {  
 alignItems: 'center',  
 backgroundColor: 'transparent',  
 },  
 rowContainer: {  
 flexDirection: 'row',  
 alignItems: 'center',  
 },  
 amountInputTextStyle: {  
 fontSize: 36,  
 fontWeight: '600',  
 backgroundColor: 'transparent',  
 ...(Platform.OS === 'ios' ? {paddingBottom: 6} : {}),  
 },  
 emptyInputFieldStyle: {width: 100},  
});export default CurrencySection;

приклад відображення центрування секції валюти

Основні особливості компонента CurrencySection

1. Динамічне налаштування висоти
   Поле вводу динамічно змінює свій розмір, відповідно до вмісту, що забезпечує чистий і адаптивний дизайн.
2. Автоматичне форматування валюти
   Функція formatAmountInCurrency забезпечує коректне форматування сум, роблячи їх легшими для сприйняття.
3. Налаштовуваний та повторно використовуваний
   Завдяки пропсах для заголовків, символів валют і повідомлень про помилки, цей компонент досить гнучкий для різних випадків використання.
   4.
   Зворотний зв'язок про помилки
   Вбудовані повідомлення про помилки надають миттєвий зворотний зв'язок, не порушуючи потік користувацького інтерфейсу (UI).

Варіанти стилізації

• Вирівнювання: Центрування поля вводу та символу валюти створює чистий і збалансований макет.
• Розмір шрифта та вага: Жирний і великий шрифт для валют і полів вводу забезпечує їх помітність.
• Кольори: Нейтральні кольори підказок і прозорі фони дозволяють зосередитись на вмісті.

Висновок

Цей компонент CurrencySection є простим, але ефективним доповненням до будь-якого фінансового додатку. Він розроблений для обробки основних вимог до вводу при збереженні візуальної привабливості та функціональності UI.

Спробуйте його, налаштуйте під стиль вашого додатку та надайте користувачам безперешкодний досвід!

Не соромтеся ділитися своїми думками чи питаннями в коментарях.

Перекладено з: How to Build a Centered Input Field for Amounts in React Native