I’m working on a React Native TextInput where I want to style the decimal part differently from the whole number. I’ve set up a basic structure, but I'm facing challenges in properly styling the decimal part to be 50% smaller than the whole number after the dot.

enter image description hereenter image description here

Thnaks for the help ...

  <TextInput
    style={[
   { color: parseInt(amount) > 0 ? "black" : "gray" }, 
   amount.split('.')[1] ? { fontSize: 16 } : { fontSize: 32 }
   ]}
    value={amount}
   keyboardType="numeric"
   onChangeText={handleAmountChange}
    placeholder="0.000"
    placeholderTextColor="#aaa"
   />

I’m working on a React Native TextInput where I want to style the decimal part differently from the whole number. I’ve set up a basic structure, but I'm facing challenges in properly styling the decimal part to be 50% smaller than the whole number after the dot.

enter image description hereenter image description here

Thnaks for the help ...

  <TextInput
    style={[
   { color: parseInt(amount) > 0 ? "black" : "gray" }, 
   amount.split('.')[1] ? { fontSize: 16 } : { fontSize: 32 }
   ]}
    value={amount}
   keyboardType="numeric"
   onChangeText={handleAmountChange}
    placeholder="0.000"
    placeholderTextColor="#aaa"
   />

• react-native
• textinput

• So you want to make small number after the decimal point in textinput? – Jatin Bhuva Commented Jan 20 at 3:53

1 Answer 1

You can use text input as a wrapper component and add value as children inside text input, but if you add a children component, you can't pass a value prop in text input.

Checkout below code:

import React, { useState } from "react";
import { View, Text, TextInput, StyleSheet } from "react-native";

const App = () => {
  const [amount, setAmount] = useState("0.000");

  const handleAmountChange = (value) => {
    // Ensure input is a valid number or decimal
    const sanitizedValue = value.replace(/[^0-9.]/g, "");
    setAmount(sanitizedValue);
  };

  const [whole, decimal] = amount.split(".");

  return (
    <View style={styles.container}>
      
      <TextInput
        style={styles.textInput}
      
        keyboardType="numeric"
        onChangeText={handleAmountChange}
      >
        {/* Custom Text Styling */}
        <Text style={styles.text}>
          <Text style={styles.whole}>{whole || "0"}</Text>
          {decimal !== undefined && (
            <Text style={styles.decimal}>.{decimal}</Text>
          )}
        </Text>
      </TextInput>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  textInput: {
    width: "80%",
    fontSize: 32,
    color: "black",
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
    paddingVertical: 8,
  },
  text: {
    fontSize: 32,
    color: "black",
  },
  whole: {
    fontSize: 32,
    color: "black",
  },
  decimal: {
    fontSize: 26, 
    color: "gray",
  },
});

export default App;

You can modify how the text looks inside textinput by adding conditions and logic.