Menu
I am trying to make a registration form.
I created a file named Regform.js under the component directory.
I am unable to get border-bottom for the text Registration
Here is the demo link demo working link
please let me know, where I am doing wrong
Component/Regform.js
import * as React from 'react'; import { Text, View, StyleSheet, TextInput, TouchableOpacity } from 'react-native'; export default class Regform extends React.Component { render() { return ( <View> <Text style={styles.header}> Registration </Text> <TextInput style = {styles.textinput} underlineColorAndroid = "transparent" placeholder = "Enter Your Name" placeholderTextColor = "#9a73ef" onChangeText = {this.handleName}/> <TextInput style = {styles.textinput} underlineColorAndroid = "transparent" placeholder = "Enter Your Email" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handleEmail}/> </View> ); } } const styles = StyleSheet.create({ header: { fontSize: 36, alignself: 'self', color: 'red', marginBottom: 30, borderBottomColor: 'red', borderBottomWidth: 2 }, textinput: { fontSize: 18, alignself: 'self', color: 'black', marginBottom: 30, borderBottomColor: 'grey', borderBottomWidth: 2 } }); 
523
To add border bottom in React Native, we can add border bottom on the View . to set borderBottom to '1px solid blue' on the View .
Border Radius in React Native The borderRadius property can be set as the style attribute to any element. It takes a value in pixels and assigns that value to the overall border radius of that UI element. By default, the border radius of any element is 0 if you haven't added that style attribute to that element.
Introduction to React Native Border Style React Native Border Style refers to the property which helps in the styling of element’s four borders. The value of this property varies from 1 to 4. Border Style property can be used to specify a border around a box in the uniform style, with 1 value.
So in this tutorial we would going to show Add Border to only Bottom side of View in iOS Android react native application example tutorial using borderBottomWidth and borderBottomColor style attributes. 1. Import StyleSheet and View component in your project. 2. Create a Root View in render’s return block. 3.
To set a border, you must first set borderWidth. borderWidth is the size of the border, and it’s always a number. You can either set a borderWidth that applies to the entire component or choose which borderWidth you want to set specifically (top, right, bottom, or left).
It seems borderBottom doesn't work for the Text component. You can either add a View wrapper and supply borderBottom to it or add a TextInput and make editable={false}
<View style={styles.headerWrapper}> <Text style={styles.header}> Registration </Text> </View> ... headerWrapper: { borderBottomColor: 'red', borderBottomWidth: 2, marginBottom: 30, }, header: { fontSize: 36, alignSelf: 'auto', color: 'red', }, If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
