Menu
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Fonts from '../Fonts';
import Screen from '../Screen';
const styles = StyleSheet.create({
container: {
alignItems: "center",
backgroundColor: "rgba(12, 22, 32, 0.88)",
flex: 1,
justifyContent: "center",
borderBottomWidth: 2,
borderBottomColor: "#47315a",
},
content: {
backgroundColor: "white",
alignItems: "center",
height: Screen.height() - 450.0,
width: Screen.width() - 50.0,
padding: 10,
borderBottomWidth: 2,
borderBottomColor: "#47315a",
},
header: {
alignItems: "center",
paddingBottom: 10,
justifyContent: "center",
color: "#0B1219",
fontFamily: Fonts.Knockout31JuniorMiddleWeight,
fontSize: 26.0,
borderBottomWidth: 5,
borderBottomColor: "#47315a",
fontWeight: '300',
},
});
const PlaceOrder = () => {
return (
<View style={[styles.container]}>
<View style={[styles.content]}>
<Text style={styles.header}>
HEADER TEXT
</Text>
<Text>dzfaksjads fahksl</Text>
<Text>
We'll start preparing your blah when you blah blah
</Text>
</View>
</View>
);
};
export default PlaceOrder;
However, the bottomBorderWidth and bottomBorderColor aren't working.
When I change it to use borderWidth it works, but I only want the bottom to have a border:
package.json:
{
"name": "Indigo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"lodash": "^4.13.1",
"react": "^15.1.0",
"react-native": "^0.27.1",
"react-native-apple-pay": "0.0.0",
"react-native-button": "^1.7.1",
"react-native-code-push": "^1.11.0-beta",
"react-native-loading-spinner-overlay": "^0.3.0",
"react-native-modalbox": "^1.3.8",
"react-native-navigation": "^1.0.2",
"react-native-paged-scroll-view": "^2.0.1",
"react-native-progress": "^3.0.1",
"react-redux": "latest",
"redux": "^3.0.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"eslint": "latest",
"eslint-config-airbnb": "latest",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "latest",
"eslint-plugin-react": "latest"
}
}
709
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 . Now we see a bottom border on below the text and it's blue.
Adding Margin and PaddingIf the flexDirection is row then marginStart behaves like marginLeft . If the flexDirection is row-reverse then marginStart behaves like marginRight . Also, keep in mind, “start” and “end” override marginLeft and marginRight , paddingLeft and paddingRight .
To set text color in React, we can set the style prop to an object with the color property. to set the style prop of the h1 element to an object that has the color property set to 'red' . Now we should see that the color of the text is red.
According to the article, you can use react-native-view'overflow library (a bridging header written to support the overflow in react-native android. All you need to do is wrap the overflowcomponent in the <ViewOverflow> . Hope this helps! Save this answer.
Just wrap the Text node with View and add border bottom to the View.
contentWrapper: {
borderBottomWidth: 5,
borderBottomColor: "#47315a"
}
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
