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
The difference between outline and border is that outline overlays on top of the element, while border adds extra thickness (depending on the border width) and therefore will alter the height/width of the element you apply it to. Outline is perfect for debugging purposes, quickly identifying and color coding elements based on their component type for example. — Adonis K. Kakoulidis, Dec 19 '22 at 16:36

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

3

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

30,962
25
85
135

answered Apr 18 '21 at 07:36

Amit Mondal

329
3
10

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
4

Those who want to use it, note it is available only for web – Anton Liannoi Sep 13 '22 at 07:03

Aamir Hussain · Answer 2 · 2022-11-20T08:47:09.613

0

 
     searchInput: {
                width: "25rem",
                padding: 6,
                outlineColor: "green",
                outlineStyle: "solid",
                outlineWidth: 4,
                borderRadius:10,
                color:"#fff",
              }

we are dividing outline property into color, style & width

edited Nov 20 '22 at 08:47

answered Nov 08 '22 at 09:56

Aamir Hussain

1
1
3

4

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Nov 09 '22 at 00:32

siddharth Alagesan · Answer 3 · 2023-04-14T15:47:59.317

0

can do something like below

 if (Platform.OS === 'web') (inputStyle as any).outline = "none"

edited Apr 14 '23 at 15:47

answered Apr 14 '23 at 12:57

siddharth Alagesan

116
6

1

`as any` is never safe – Kapobajza Apr 14 '23 at 15:43

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

-2

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

29,388
11
94
103

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?

4 Answers4