Skip to main content

Image Component Error - Works on the desktop browser but not on mobile Expo Go

Striker

I am using Expo with React Native. When the React code is converted (minified?) its changing the Image component code to using lower case img. See below.

Source code: 

<ImagecloudName="xyz"publicId={this.state.gallery[index].public_id}style={{ width: '100%' }}>
Converted Source: 

{this.state.gallery.map(img => \n \n <Image \n style={{ width: 300, height: 300, marginBottom: 15 }}\n source={require(img.public_id)}\n />)}\n\n </View>\n );\n }\n};\n"]},"metadata":{},"sourceType":"module"}

Error: 

Invariant Violation: View config getter callback for component `img` must be a function (received `undefined`). Make sure to start component names with a capital letter.

This error is located at:
in img (created by Image)
in Image (at grid.js:48)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)

0

Comments

6 comments

Date Votes
  • Mo Ip

    Hi,

    The conversion is changing the text in your code.   Are you using Cloudinary React?

    Would you create an account on https://snack.expo.io and share with us your code there so we can identify the issue?  Here is a sandbox you can use as a reference: https://snack.expo.io/@rpeltz/thoughtful-banana

    Thanks,

    Mo

    0
  • Striker

    Yes, I am using Cloudinary React.  Is it possible to use import Cloudinary with snack.expo?  I tried to point to the Cloudinary github but its not working.

    https://snack.expo.io/@strikerjax/sampleimage

    Its a simple use of Image component from Cloudinary. It works when I run it on the browser 

    But when using "Expo Go" app. I can point to the QR code on expo - Metro builder and it launches the app on my mobile. This is where I get the error.

     

    0
  • Mo Ip

    Hi,

    To start off, you need to add "cloudinary-react": "^1.7.0", to your package.json.

    After that, I do see the error "View config getter callback for compoment `img` must be a function (received `undefined`)."  This may be because the cloudinary-react implementation is class-based instead of function base.  I will check with our Dev and let you know once I get some insights.

    Thanks,

    Mo

    0
  • Striker

    I was able to use Cloudinary in the package.json and now the error comes up when I scan the QR code and run it on android using Expo Go.

     

    0
  • Striker

    Wondering if you guys have any leads on this. thanks.

    0
  • Mo Ip

    Hi,

    Our react component is aimed for the web, therefore outputs an img tag, which is not valid in React Native. You can use the JSv2 (@cloudinary/base) SDK, which is currently in beta. If you do so, you should use the react-native Image component and build the source with the SDK.

    Let me know if this helps.  I can share with you a sample piece of code if you need it.

    Regards,

    Mo

    0

Post is closed for comments.

Didn't find what you were looking for?

New post