DEV Community

Cover image for How to Build a Centered Input Field for Amounts in React Native
Oluwaseyi Komolafe
Oluwaseyi Komolafe

Posted on

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 style={styles.amountContainerStyle}>
      {title ? <AppText size={15}>{title}</AppText> : null}
      <View style={[styles.rowContainer, {alignItems: 'center'}]}>
        <AppText size={36} weight="bold">
          {currency}
        </AppText>
        <TextInput
          value={amount}
          style={[
            styles.amountInputTextStyle,
            !amount?.length && styles.emptyInputFieldStyle,
            {height},
          ]}
          onContentSizeChange={handleContentSizeChange}
          placeholderTextColor={colors.grey}
          underlineColorAndroid="transparent"
          placeholder="0.00"
          keyboardType="numeric"
          returnKeyType="done"
          onChangeText={onChangeText}
          onBlur={onBlur}
          editable={isEditable}
          multiline
          maxLength={MAX_AMOUNT_LENGTH_CURRENCY_SECTION}
          onSubmitEditing={Keyboard.dismiss}
          {...props}
        />
      </View>

      {error?.toString()?.length > 0 && (
        <InlineError
          style={{marginTop: 10, padding: 10, borderRadius: 18}}
          message={error}
        />
      )}
    </View>
  );
};

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;
Enter fullscreen mode Exit fullscreen mode

Example of the centered input field for the currency section

Highlights of the CurrencySection Component

  1. Dynamic Height Adjustment

    The input field dynamically resizes to match its content size, ensuring a clean and adaptive design.

  2. Automatic Currency Formatting

    The formatAmountInCurrency function ensures amounts are formatted appropriately, making them easier to read.

  3. Customizable and Reusable

    With props for titles, currency symbols, and error messages, this component is flexible enough for various use cases.

  4. Error Feedback

    Inline error messages provide immediate feedback without disrupting the flow of the UI.


Styling Choices

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

Conclusion

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.

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

Feel free to share your thoughts or questions in the comments.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay