How to Build a Centered Input Field for Amounts in React Native

A clean, centered input field for entering amounts is a small but significant part of any financial app. It enhances user experience, provides clarity, and ensures ease of use. In this article, we’ll walk through creating a reusable CurrencySection component in React Native.

This component is simple yet powerful, featuring:

• Dynamic height adjustment for the input field.
• Automatic formatting for amounts in a specified currency.
• Inline error messaging for better user feedback.

Let’s dive into the details!

---

What the CurrencySection Does

The CurrencySection component is designed to:

1. Allow users to input amounts in a visually appealing, centered format.
2. Automatically format amounts into the specified currency.
3. Provide flexibility to customize elements such as the currency symbol, placeholder text, and error messages.

---

Implementation

Here’s the full implementation of the CurrencySection component:

/* 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<currencysectionprops> = ({
  title = 'Enter amount',
  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<textinputcontentsizechangeeventdata>) => {
      setHeight(e.nativeEvent.contentSize.height);
    },
    [],
  );

  return (
    <view>




<hr>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173624596347120.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Build a Centered Input Field for Amounts in React Native"></p>
<h3>
  
  
  Highlights of the CurrencySection Component
</h3>

<ol>
<li><p><strong>Dynamic Height Adjustment</strong><br><br>
The input field dynamically resizes to match its content size, ensuring a clean and adaptive design.  </p></li>
<li><p><strong>Automatic Currency Formatting</strong><br><br>
The formatAmountInCurrency function ensures amounts are formatted appropriately, making them easier to read.  </p></li>
<li><p><strong>Customizable and Reusable</strong><br><br>
With props for titles, currency symbols, and error messages, this component is flexible enough for various use cases.  </p></li>
<li><p><strong>Error Feedback</strong><br><br>
Inline error messages provide immediate feedback without disrupting the flow of the UI.  </p></li>
</ol>


<hr>

<h3>
  
  
  Styling Choices
</h3>

<ul>
<li>
<strong>Alignment</strong>: Centering the input and currency symbol creates a clean, balanced layout.
</li>
<li>
<strong>Font Size and Weight</strong>: The bold and large font for the currency and input fields ensures they stand out.
</li>
<li>
<strong>Colors</strong>: Neutral placeholder colors and transparent backgrounds maintain focus on the content.
</li>
</ul>


<hr>

<h3>
  
  
  Conclusion
</h3>

<p>This CurrencySection component is a simple yet effective addition to any financial app. It’s designed to handle core input requirements while keeping the UI visually appealing and functional.  </p>

<p>Give it a try, customize it to suit your app’s style, and let your users enjoy a seamless experience!  </p>

<p><em>Feel free to share your thoughts or questions in the comments.</em></p>


          

            
        </view></textinputcontentsizechangeeventdata></currencysectionprops>

The above is the detailed content of How to Build a Centered Input Field for Amounts in React Native. For more information, please follow other related articles on the PHP Chinese website!