Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native: borderBottomWidth not working

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.

enter image description here

When I change it to use borderWidth it works, but I only want the bottom to have a border:

enter image description here

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"
  }
}
like image 709
bigpotato Avatar asked Oct 13 '16 20:10

bigpotato


People also ask

How do I add a bottom line in react native?

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.

How do I set the margins in react native?

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 .

How do I color text in react native?

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.

How do you use overflow in react native?

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.


1 Answers

Just wrap the Text node with View and add border bottom to the View.

contentWrapper: {
  borderBottomWidth: 5,
  borderBottomColor: "#47315a"
}
like image 144
Nagibaba Avatar answered Sep 28 '22 12:09

Nagibaba