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

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)}
      theme={{roundness: 30}}
    />
  );
};

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

export default CustomInput;

CodePudding user response：

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

textAlign still work.

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

CodePudding user response：

maybe you can use this code on your style css

textAlignHorizontal : 'right'