This RN Component:

import { getRandomColor } from '@shared/lib/helpers'

import { AvatarContainer, InitialText } from './styles'

export const InitialAvatar = ({ name }) => {
  const backgroundColor = getRandomColor()
  const initial = name.charAt(0).toUpperCase()
  // TODO - FIX -this crashes the app when accessing the screen in iOS.
  // Somehow it works fine on Android
  console.log({ initial })
  console.log({ backgroundColor })
  return (
    <AvatarContainer style={{ backgroundColor }}>
      <InitialText>{initial}</InitialText>
    </AvatarContainer>
  )
}

with these styles:

import sc from 'styled-components/native'

export const AvatarContainer = sc.View`
  width: 50px;
  height: 50px;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
`

export const InitialText = sc.Text`
  color: white;
  font-size: 20px;
  font-weight: bold;
`

also using this helper:

export const getRandomColor = () => {
  const colors = ['#FFCDD2', '#BBDEFB', '#C8E6C9', '#FFE082', '#E1BEE7']
  return colors[Math.floor(Math.random() * colors.length)]
}

and console.loging correct values:

 LOG  {"initial": "S"}
 LOG  {"backgroundColor": "#E1BEE7"}
 LOG  {"initial": "R"}
 LOG  {"backgroundColor": "#C8E6C9"}
 LOG  {"initial": "H"}
 LOG  {"backgroundColor": "#FFCDD2"}
 LOG  {"initial": "S"}
 LOG  {"backgroundColor": "#BBDEFB"}
 LOG  {"initial": "H"}
 LOG  {"backgroundColor": "#E1BEE7"}

is somehow making my App fully crash on iOS when I try to access the screen where the InitialAvatar is placed in.

If I comment out {/* <InitialText>{initial}</InitialText> */} it renders all fine again. But I would like to understand why. No errors logged. Try / catch results in a successfull try, but the App crashes anyway.

It all works perfectly fine on Android.

Has anyone an idea what can be the issue here? I appreciate any hint.

I tried to narrow down the error until I found that is the problem. But I do not understand why.