ERROR Warning: Failed prop type: Invalid prop `role` of value `image` supplied to `Image`

[vilenleung]

Description

When i use Image component will popup a error in terminal

CodeSandbox/Snack link

No response

Steps to reproduce

"@gluestack-style/react": "^1.0.7", "@gluestack-ui/config": "^1.0.3", "@gluestack-ui/themed": "^1.0.7", "react": "18.2.0", "react-native": "0.72.5", App.jsx

import React from 'react'
import { GluestackUIProvider } from "@gluestack-ui/themed"
import { config as GluestackConfig } from '@gluestack-ui/config'
import { Image } from "@gluestack-ui/themed"

const App = () => {
  return (
    <Image 
      resizeMode='contain'
      size='xl'
      alt='logo'
      source={require('./src/assets/images/logo.png')}
    />
  )
}

export default () => {
  return (
    <GluestackUIProvider config={GluestackConfig}>
      <App/>
    </GluestackUIProvider>
  )
}

ERROR Warning: Failed prop type: Invalid prop role of value image supplied to Image, expected one of ["alert","alertdialog","application","article","banner","button","cell","checkbox","columnheader","combobox","complementary","contentinfo","definition","dialog","directory","document","feed","figure","form","grid","group","heading","img","link","list","listitem","log","main","marquee","math","menu","menubar","menuitem","meter","navigation","none","note","option","presentation","progressbar","radio","radiogroup","region","row","rowgroup","rowheader","scrollbar","searchbox","separator","slider","spinbutton","status","summary","switch","tab","table","tablist","tabpanel","term","timer","toolbar","tooltip","tree","treegrid","treeitem"].

gluestack-ui Version

1.0.7

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[makkarMeenu]

Thanks for reporting, we will fix and update.

[makkarMeenu]

@vilenleung As a workaround, can you please pass role="img" to Image?

[vilenleung]

@vilenleung As a workaround, can you please pass role="img" to Image?

ok, it worked. But i think i will remove this code role="img" when repository updated and fixed.

[vilenleung]

emm, still have another problem like above. i think i will be waiting for the updated to fix it, if i need to add role={*} for each components.

import React from 'react'
import { GluestackUIProvider } from "@gluestack-ui/themed"
import { config as GluestackConfig } from '@gluestack-ui/config'
import { HStack, Text, Icon, Pressable} from "@gluestack-ui/themed"
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'

const App = () => {
  return (
    <HStack>
      <Icon as={MaterialIcons} name='search' size='xl' color='$white'/>
    </HStack>
  )
}

export default () => {
  return (
    <GluestackUIProvider config={GluestackConfig}>
      <App/>
    </GluestackUIProvider>
  )
}

ERROR Warning: Failed prop type: Invalid prop role of value image supplied to Text, expected one of ["alert","alertdialog","application","article","banner","button","cell","checkbox","columnheader","combobox","complementary","contentinfo","definition","dialog","directory","document","feed","figure","form","grid","group","heading","img","link","list","listitem","log","main","marquee","math","menu","menubar","menuitem","meter","navigation","none","note","option","presentation","progressbar","radio","radiogroup","region","row","rowgroup","rowheader","scrollbar","searchbox","separator","slider","spinbutton","status","summary","switch","tab","table","tablist","tabpanel","term","timer","toolbar","tooltip","tree","treegrid","treeitem"]. at Text in Icon (created by StyledBaseIcon) in StyledComponent (created by StyledIcon) in StyledComponent in Unknown (created by App) in RCTView (created by View) in View (created by HStack) in StyledComponent (created by App) in App (created by _default) in ToastProvider (created by GluestackUIProvider) in PortalProvider (created by GluestackUIProvider) in StyledProvider (created by GluestackUIStyledProvider) in GluestackUIStyledProvider (created by GluestackUIProvider) in GluestackUIProvider (created by _default) in _default in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer

[grillorafael]

Im still experiencing this with Inputs I believe.

[madelineleclair]

Thank you for the workaround. Also experiencing this for images.

[madelineleclair]

I'm also experiencing this with Icon. Error and code below:

 ERROR  Warning: Failed prop type: Invalid prop `role` of value `image` supplied to `Text`, expected one of ["alert","alertdialog","application","article","banner","button","cell","checkbox","columnheader","combobox","complementary","contentinfo","definition","dialog","directory","document","feed","figure","form","grid","group","heading","img","link","list","listitem","log","main","marquee","math","menu","menubar","menuitem","meter","navigation","none","note","option","presentation","progressbar","radio","radiogroup","region","row","rowgroup","rowheader","scrollbar","searchbox","separator","slider","spinbutton","status","summary","switch","tab","table","tablist","tabpanel","term","timer","toolbar","tooltip","tree","treegrid","treeitem"].
    at Text (http://192.168.0.22:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:81290:27)
    in Icon (created by Icon)
    in Icon (created by StyledBaseIcon)
    in StyledComponent (created by StyledIcon)
    in StyledComponent
    in Unknown (created by ConsumptionTile)
    in RCTView (created by View)
    in View (created by StyledBox)
    in StyledComponent (created by Pressable)
    in RCTView (created by View)
    in View (created by Pressable)
    in Pressable (created by Pressable)
    in StyledComponent (created by Pressable)
    in Pressable (created by ConsumptionTile)
    in RCTView (created by View)
    in View (created by HStack)
    in StyledComponent (created by ConsumptionTile)
    in RCTView (created by View)
    in View (created by StyledBox)
    in StyledComponent (created by ConsumptionTile)
    in RCTView (created by View)
    in View (created by StyledBox)
    in StyledComponent (created by ConsumptionTile)
    in RCTView (created by View)
    in View (created by StyledBox)
    in StyledComponent (created by CreateTile)
    in CreateTile (created by ConsumptionTile)
    in RCTView (created by View)
    in View (created by StyledBox)
    in StyledComponent (created by ConsumptionTile)
    in ConsumptionTile (created by HomeScreen)
    in RCTView (created by View)
    in View (created by StyledBox)
    in StyledComponent (created by HomeScreen)
    in RCTView (created by View)
    in View (created by VStack)
    in StyledComponent (created by HomeScreen)
    in HomeScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in ToastProvider (created by GluestackUIProvider)
    in PortalProvider (created by GluestackUIProvider)
    in StyledProvider (created by GluestackUIStyledProvider)
    in GluestackUIStyledProvider (created by GluestackUIProvider)
    in GluestackUIProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

I'm using Icon like this:

  const renderButton = (iconComponent, text, onPress) => {
    const disabled = increasingAmount;
    return (
      <Pressable key={text} disabled={disabled} onPress={!disabled && onPress}>
        {({ pressed, disabled }) => (
          <Box
            p={6}
            alignItems="center"
            opacity={disabled ? DISABLED_OPACITY : 1}
            bg={pressed ? ICON_PRESSED_BACKGROUND : "transparent"}
          >
            {iconComponent}
            <Text>{text}</Text>
          </Box>
        )}
      </Pressable>
    );
  };

 renderButton(
   <Icon size="lg" m="auto" mb={2} as={AntDesign} name="pluscircleo" />,
    "Custom",
     () => {
        showCustomAmountModal();
      }
   )

I tried adding role="img" to the Icon, similar to the suggestion for Image, but the error still shows up. The only way I can get it to clear is to remove the Icon.

[makkarMeenu]

Can you please upgrade the gluestack-ui/themed version to the latest 1.0.14 , this will resolve the issues.