How to align text in TextInput for react-native-paper

Question

I am using "react-native-paper": "^4.12.5" & "react-native": "0.70.4"

I want to transform the layout on the left to the one on the right using react-native-paper. But I have found a problem. I don't know how to center the input, and the placeholder of a TextInput. I would also like to hide the cursor.

I have tried to inject "textAlign" using the style prop of the paper component, but it does not seem to work, and the native props of paper do not allow this transformation. Do you know how I can adapt the paper component, or do you think I have to design my own?

import * as React from 'react';
import {StyleSheet} from 'react-native';
import {TextInput} from 'react-native-paper';
import {useTheme} from 'react-native-paper';

type textInputProps = {
  placeholder: string;
  style: object;
};

const CustomInput = ({placeholder, style}: textInputProps) => {
  const {colors} = useTheme();

  return (
    <TextInput
      mode="outlined"
      placeholder={placeholder}
      outlineColor={colors.border}
      style={(styles.custom, style)} // Here is the error!
      // style={[styles.custom, style]} This is how to do it
      theme={{roundness: 30}}
    />
  );
};

const styles = StyleSheet.create({
  custom: {
    textAlign: 'center',
  },
});

export default CustomInput;

----- Edit -----

As pointed out by Vu and Nitin, it is perfectly possible to style a paper TextInput to center the cursor using the style prop and the textAlign property. My error was in the way I was passing the style prop, not the style itself.

Upsss my bad, as pointed by Vu Phung I was incorrectly defining the style prop. I had parentheses not square brackets. I'm not going to delete the question, I still think it could be useful to someone. — Mateo Lara, Nov 10 '22 at 11:05

score 1 · Accepted Answer · answered Nov 10 '22 at 03:03

1

Syntax error found: style={(styles.custom, style)}

textAlign still work.

Change to: style={[styles.custom, style]} or style={{...styles.custom, ...style}} to resolve.

answered Nov 10 '22 at 03:03

Vu Phung

548
3
8

score 1 · Answer 2 · answered Nov 10 '22 at 08:32

Firstly to get TextInput and its placeholder to centre you have to modify your TextInput style:

//remove () bracket and style from style

<TextInput
 mode="outlined"
 placeholder={placeholder}
 outlineColor={colors.border}
 style={styles.custom}
 theme={{roundness: 30}}
/>

or you can directly add inLine style

<TextInput
 mode="outlined"
 placeholder={placeholder}
 outlineColor={colors.border}
 style={{
 textAlign: 'center'
 }}

Second, to hide the cursor from textInput you have to add to TextInput

caretHidden={true}

which will look like:

<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={styles.custom}
theme={{roundness: 30}}
caretHidden={true}
/>

This is how you will achieve you desired results

score 0 · Answer 3 · answered Nov 10 '22 at 03:51

0

maybe you can use this code on your style css

textAlignHorizontal : 'right'

answered Nov 10 '22 at 03:51

M Naufal Helmi

97
4

How to align text in TextInput for react-native-paper

3 Answers3