How can I declare an object property in TypeScript?

Question

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.

Answer 1

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