React native Question posted in
The official React Native documentation can be found here.

React native – Style the decimal part differently from the whole number

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"
   />
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    To style the decimal part of a number in a React Native TextInput differently from the whole number, you can achieve this by using two Text components inside a TextInput or managing the display using a separate Text component layered beneath/above the TextInput.

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

const StyledTextInput = () => {
  const [value, setValue] = useState("");

  const splitValue = (text) => {
    const [whole, decimal] = text.split(".");
    return { whole: whole || "", decimal: decimal || "" };
  };

  const handleTextChange = (text) => {
    // Ensure only valid numbers are entered (optional)
    if (/^d*(.d*)?$/.test(text)) {
      setValue(text);
    }
  };

  const { whole, decimal } = splitValue(value);

  return (
    <View style={styles.container}>
      {/* Layered Text for styling */}
      <View style={styles.inputWrapper}>
        <Text style={styles.whole}>{whole}</Text>
        {decimal !== "" && (
          <Text style={styles.decimal}>.{decimal}</Text>
        )}
      </View>

      {/* Transparent TextInput */}
      <TextInput
        style={styles.textInput}
        value={value}
        keyboardType="decimal-pad"
        onChangeText={handleTextChange}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: "relative",
    width: "80%",
    margin: 20,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    padding: 8,
  },
  inputWrapper: {
    position: "absolute",
    top: 8,
    left: 8,
    flexDirection: "row",
    pointerEvents: "none", // Prevent blocking TextInput interactions
  },
  whole: {
    fontSize: 18,
    color: "#000",
  },
  decimal: {
    fontSize: 18,
    color: "#888", // Lighter color for decimals
  },
  textInput: {
    fontSize: 18,
    color: "transparent", // Make the text invisible
    textAlign: "left",
    letterSpacing: 1,
  },
});

export default StyledTextInput;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search