CODEWITHSUNDEEP
typescriptreact-native
Michael
Michael

Reputation: 513

Why does the string conflict with this union type?

I get a type error in react-native using typescript using the borderStyle property. The borderStyle property is declared as a union-type in react-natives' declaration file (index.d.ts). Used to flow I set the value in my style definitions simply with a string but now I get an error in typescript.

Question: How do I handle the style property of borderStyle the right way that I don't violate the typescript rule?

My borderStyle property which causes the error:

style: {
    borderStyle: 'solid',
},

borderStyle is typed as:

borderStyle?: "solid" | "dotted" | "dashed";

Resulting error message using my style:

Type 'string' is not assignable to type '"solid" | "dotted" | "dashed" | undefined'

Update 1: How do I declare the styles in detail

  1. I have a common.styles.ts file with common styles (that makes the error)
import { StyleSheet } from 'react-native';
import theme from './theme.styles';

export default {
    borders: {
        normal: {
            borderColor: '#E8E8E8',
            borderStyle: 'solid',
        },
        light: {
            borderColor: '#F1F1F1',
            borderStyle: 'solid',
        },
    },
};
  1. I use these common styles in my style declaration file (Component.styles.ts) using a spread operator:
import { StyleSheet } from 'react-native';
import common from './../../../styles/common.styles';

export default StyleSheet.create({
    container: {
        ...common.borders.normal,
        borderBottomWidth: 1,
    },
});

Upvotes: 2

Views: 351

Answers (2)

amirhosein
amirhosein

Reputation: 921

try do this: <View style={{ borderStyle: 'solid' }}/> i dont get any error in this code,i think maybe error is because of how importing style... styles in this 3 way dont get any error:

  1. create style direct in view like line one

  2. get value from somewhere (maybe props...) and set them to direct key of view style,you cant do this in styleSheet

  3. create a const style object like this:

    import { StyleSheet } from 'react-native';

then

const mstyle = StyleSheet.create({
      boredr: {
                 borderStyle: 'solid'
              }
})

and call it like this:

<View style={mstyle.border}/>

Upvotes: 1

cmaynard
cmaynard

Reputation: 2860

This is a referential integrity issue in typescript. In this block:

style: {  borderStyle: 'solid'}

The type for borderStyle is string which is wider type than "solid" | "dotted" | "dashed"

Try

style: {  borderStyle: <"solid" | "dotted" | "dashed">'solid'}

To cast the string solid to the proper type.

Upvotes: 2

Related Questions