How can I declare an object property in TypeScript?

Question

enter image description here

This code snippet gives me this error:

Type 'JustifyContent | undefined' is not assignable to type '"space-around" | "space-between" | "space-evenly" | "center" | "flex-end" | "flex-start" | undefined'. Type 'string & {}' is not assignable to type '"space-around" | "space-between" | "space-evenly" | "center" | "flex-end" | "flex-start" | undefined'.

I would like help to solve this.

Constructive criticism in writing the code is welcome.

Welcome to stack overflow! It would help if you posted your code as text in your question, rather than an image. Then we can easily copy/paste/update it. — Alex Wayne, Jul 08 '21 at 23:19

score 0 · Accepted Answer · answered Jul 09 '21 at 00:20

You are trying to use a type for CSS (on the web) in react native stylesheet. Thats not going to work. React native stylesheets are heavily inspired by Web based CSS, but they are a different thing.

Looking at the types, you want FlexStyle['justifyContent'] from the react-native module.

A very simple example:

import { StyleSheet, FlexStyle } from 'react-native'

const justify: FlexStyle['justifyContent'] = 'center'

const styles = StyleSheet.create({
  foo: {
    justifyContent: justify // works fine
  }
})

I'd give you a more complete example, but I'm not going to retype all the code from your image. None the less, this should give you the right type to use.

Playground

How can I declare an object property in TypeScript?

1 Answers1