React Native Elements CheckBox Component Not Displaying Checkmark

Question

I'm currently working on a React Native project using TypeScript and I'm facing an issue with the CheckBox component from the react-native-elements library. The checkmark is not being displayed when the checkbox is checked.

Here's the code for the CheckBox component in my AndroidSelectableAppCard component:

import { Image, Pressable, StyleSheet, Text } from 'react-native'
import { TiedSBlurView } from '../../design-system/components/TiedSBlurView'
import { T } from '../../design-system/theme'
import { CheckBox, Icon } from 'react-native-elements'
import { InstalledApp } from '../../../core/installed-app/InstalledApp'

export function AndroidSelectableAppCard({
  app,
  onPress,
  isSelected,
}: Readonly<{
  app: InstalledApp
  onPress: () => void
  isSelected: boolean
}>) {
  const dataImagePngBase64 = 'data:image/png;base64,'

  return (
    <Pressable onPress={onPress}>
      <TiedSBlurView style={styles.container}>
        <Image
          source={{
            uri: dataImagePngBase64 + app.icon,
          }}
          style={styles.appIcon}
        />
        <Text style={styles.appName}>{app.appName}</Text>
        <CheckBox
          style={styles.checkbox}
          containerStyle={styles.checkboxContainer}
          checked={isSelected}
          checkedColor={T.color.lightBlue}
          onPress={onPress}
        />
      </TiedSBlurView>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  checkbox: {
    alignItems: 'flex-end',
  },
  checkboxContainer: {
    padding: 0,
    margin: 0,
  },
  appName: {
    color: T.color.text,
    flexGrow: 1,
    alignItems: 'flex-end',
  },
  appIcon: {
    marginRight: T.spacing.small,
    height: 20,
    width: 20,
  },
})

I've tried the following solutions but none of them worked:

• Updating the react-native-elements library to the latest version.
• Adjusting the styles of the CheckBox component.
• Explicitly setting the height and width of the CheckBox component.
• Overriding the default styles of the checkbox icon.
• Changing the color of the checkmark.

Answer 1

I discovered it's working as expected, but it doesn't support the web version, hence this issue. Even though it "works".