This post explains How to display rounded corner border around EditText TextInput component in React Native application. We need to specify borderRadius style-sheet property in TextInput layout component.
code snippet to set rounded corner border to TextInput Component :
Step-1 : Create a new React Native project.
Step-2 : Add Platform, StyleSheet, Text, View, TextInput Component in import block.
Step-3 : Create TextInput component inside the render block and specify borderRadius, borderColor, borderWidth
property of CSS Stylesheet in TextInput Component. This CSS property will change the TextInput field border to rounded corner.
Screenshot :
This is all about adding rounded corner borders to TextInput Component in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
code snippet to set rounded corner border to TextInput Component :
<TextInput style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20, marginBottom: 20, fontSize: 18 }} // Adding hint in TextInput using Placeholder option. placeholder=" Enter Your First Name" // Making the Under line Transparent. underlineColorAndroid="transparent" />
React Native Rounded Corner Border to TextInput Component :
Lets follow the below steps to Add Rounded Corner Borders to TextInput Component in React Native.Step-1 : Create a new React Native project.
Step-2 : Add Platform, StyleSheet, Text, View, TextInput Component in import block.
Step-3 : Create TextInput component inside the render block and specify borderRadius, borderColor, borderWidth
property of CSS Stylesheet in TextInput Component. This CSS property will change the TextInput field border to rounded corner.
<TextInput style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20, marginBottom: 20, fontSize: 18 }} // Adding hint in TextInput using Placeholder option. placeholder=" Enter Your First Name" // Making the Under line Transparent. underlineColorAndroid="transparent" />
Complete Source Code for App.js
Lets see the complete source code that helps to Add Rounded Corner Borders to TextInput Component in React Native.
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from "react"; import { Platform, StyleSheet, Text, View, TextInput } from "react-native"; export default class HomeActivity extends Component { render() { return ( <View style={styles.container}> <Text style={styles.headerText}> Add Rounded Corner Borders to TextInput Component in React Native </Text> <TextInput style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20, marginBottom: 20, fontSize: 18 }} // Adding hint in TextInput using Placeholder option. placeholder=" Enter Your First Name" // Making the Under line Transparent. underlineColorAndroid="transparent" /> <TextInput style={{ height: 40, width: "95%", borderColor: 'red', borderWidth: 2, borderRadius: 20, marginBottom: 20, fontSize: 18 }} // Adding hint in TextInput using Placeholder option. placeholder="Enter Your First Name" // Making the Under line Transparent. underlineColorAndroid="transparent" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#e5e5e5" }, headerText: { fontSize: 20, textAlign: "center", margin: 10, fontWeight: "bold" } });
Screenshot :
This is all about adding rounded corner borders to TextInput Component in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
really informative post..thanks for sharing..
ReplyDeletemobile application development company in UK