{"id":13263,"date":"2025-08-20T06:29:04","date_gmt":"2025-08-20T06:29:04","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13263"},"modified":"2025-08-20T06:29:26","modified_gmt":"2025-08-20T06:29:26","slug":"style-the-react-native-paper-component-in-react-native","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/style-the-react-native-paper-component-in-react-native","title":{"rendered":"Style the react-native-paper Component in React Native"},"content":{"rendered":"<h2>React Native Paper TextInput Styling<\/h2>\n<p>Another simple way is to completely remove the underline\/outline effect by setting the mode to &#8220;flat&#8221; and the underlineColor to &#8220;transparent.&#8221;<\/p>\n<h3>Example<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">import * as React from 'react';\r\nimport { View, StyleSheet } from 'react-native';\r\nimport { TextInput, Provider as PaperProvider } from 'react-native-paper';\r\n\r\nexport default function App() {\r\n  const [text, setText] = React.useState('');\r\n  return (\r\n    &lt;PaperProvider&gt;\r\n      &lt;View style={styles.container}&gt;\r\n        &lt;TextInput\r\n          mode=\"flat\"\r\n          placeholder=\"Phone Number\"\r\n          underlineColor=\"transparent\"\r\n          value={text}\r\n          onChangeText={setText}\r\n          keyboardType=\"phone-pad\"\r\n          style={styles.input}\r\n        \/&gt;\r\n      &lt;\/View&gt;\r\n    &lt;\/PaperProvider&gt;\r\n  );\r\n}\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    padding: 20,\r\n    backgroundColor: '#f2f2f2',\r\n  },\r\n  input: {\r\n    backgroundColor: '#fff',\r\n    borderRadius: 20,\r\n  },\r\n});\r\n<\/pre>\n<ul>\n<li>mode=&#8221;flat&#8221; \u2192 removes the outline.<\/li>\n<li>underlineColor=&#8221;transparent&#8221; \u2192 hides the underline.<\/li>\n<li>Clean white background with rounded corners.<\/li>\n<\/ul>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/react-native-hooks-to-build-app\" target=\"_blank\">React Native Hooks<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>React Native Paper TextInput Styling Another simple way is to completely remove the underline\/outline effect by setting the mode to &#8220;flat&#8221; and the underlineColor to &#8220;transparent.&#8221; Example import * as React from &#8216;react&#8217;; import { View, StyleSheet } from &#8216;react-native&#8217;; import { TextInput, Provider as PaperProvider } from &#8216;react-native-paper&#8217;; export default function App() { const [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-13263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13263"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13263"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13263\/revisions"}],"predecessor-version":[{"id":13266,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13263\/revisions\/13266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13264"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}