Is there outline property in react-native?

Question

Outline property is in CSS,but i tried to use outline property in react-native. I encountered the following message while using outline property with react-native. error:outline property is not a valid style property Anyone know the property instead of outline property of css in react-native without install another package. Thanks for your cooperation.

Did you mean borders: https://facebook.github.io/react-native/docs/view-style-props ?? — retr0, Nov 29 '18 at 05:21
No I means outline. In css,there are properties such as padding,border,margin,outline.but in react-native,outline is not a valid property. — Author, Nov 29 '18 at 05:52

score 1 · Answer 1 · edited Apr 18 '21 at 07:41

1

In React Native we cannot give it by using outline: "red 2px solid" instead we need to break it into individual styles. Think of it as we are styling it through a javascript object.

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    backgroundColor: "#e7622e",
    borderColor: "#fcfdfb",
    borderWidth: 2,
    outlineColor: "#523009",
    outlineStyle: "solid",
    outlineWidth: 4,
  },
  title: {
    color: "white",
  },
});

outlineColor: "#523009", outlineStyle: "solid", outlineWidth: 4 are the property name that it understands.

edited Apr 18 '21 at 07:41

Dharman

26,923
21
73
125

answered Apr 18 '21 at 07:36

Amit Mondal

269
3
8

Using `outlineColor`, `outlineStyle`, and `outlineWidth` all at once worked, thank you! Thank god. I was beginning to be afraid that `outline` simply didn't exist in React Native, but it does! – jaquinocode Aug 13 '21 at 02:23
How to do that with css modules? – VityaSchel Sep 18 '21 at 07:25

score 0 · Answer 2 · edited Jan 22 '21 at 11:58

0

style={{
        height: 40,
        width: "95%",
        borderRadius: 20,
        backgroundColor: this.state.boxColor,
        marginHorizontal: 10,
        fontFamily: ConstantFontFamily.defaultFont,
        fontWeight: "bold",
        paddingLeft: 35,
        minWidth:
            Dimensions.get("window").width >= 1100 ? 630 : 393,
        outline: "none"
    }}

edited Jan 22 '21 at 11:58

Suraj Rao

28,850
10
94
99

answered Jan 22 '21 at 11:56

praveen mishra

1

2

Could you, please, explain your answer? – Abbas Akhundov Jan 22 '21 at 12:05

Is there outline property in react-native?

2 Answers2