Style the react-native-paper Component in React Native

React Native Paper TextInput Styling

Another simple way is to completely remove the underline/outline effect by setting the mode to “flat” and the underlineColor to “transparent.”

Example

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput, Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  const [text, setText] = React.useState('');
  return (
    <PaperProvider>
      <View style={styles.container}>
        <TextInput
          mode="flat"
          placeholder="Phone Number"
          underlineColor="transparent"
          value={text}
          onChangeText={setText}
          keyboardType="phone-pad"
          style={styles.input}
        />
      </View>
    </PaperProvider>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#f2f2f2',
  },
  input: {
    backgroundColor: '#fff',
    borderRadius: 20,
  },
});

• mode=”flat” → removes the outline.
• underlineColor=”transparent” → hides the underline.
• Clean white background with rounded corners.

Also Read:

React Native Hooks