React native styled components align-items not working by props

I am trying to implement a generic FlexRow component to my application to be able to pass direction, alignment and justify-content by props. It is not working out to well and I can't seem to understand why this is the case.

See code

export enum LayoutOptions {  FlexStart = 0,  Flexend,  Center}const FlexRowConstruct = styled(View)<{ align: LayoutOptions, justify: LayoutOptions }>`  display: flex;  flex-direction: row;  ${({align}) => {    switch(align) {      case LayoutOptions.FlexStart:        return `align-items : flex-start;`      case LayoutOptions.Flexend:        return `align-items : flex-end;`      case LayoutOptions.Center:        return `align-items : center;`    }   }  }  ${({justify}) => {    switch(justify) {      case LayoutOptions.FlexStart:        return `justify-content : flex-start;`      case LayoutOptions.Flexend:        return `justify-content : flex-end;`      case LayoutOptions.Center:        return `justify-content : center;`    }  }}`;

What is confusing me regarding this is that everything works as expected if I write align items: center; directly in text in the styled component as well as the fact that the justification work where the same code logic is applied. Any help on why this may not be working is appriciated.