View config not found for name rect

[mahdidavoodi7]

What did I do?

I write this code and I expected to run properly
this is my code :

const MyLoader = props => (
  <ContentLoader
    height={130}
    width={400}
    speed={2}
    primaryColor="#f3f3f3"
    secondaryColor="#ecebeb"
    {...props}
  >
    <rect x="19" y="45" rx="3" ry="3" width="245" height="5" /> 
    <circle cx="333.5" cy="78.76" r="49.5" /> 
    <rect x="19" y="75" rx="3" ry="3" width="245" height="5" /> 
    <rect x="19" y="105" rx="3" ry="3" width="245" height="5" />
  </ContentLoader>
)

render() {
  return(
      <MyLoader/>
  )
}

And i got this error

Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: View config not found fot name rect

I used the last version of this library

[danilowoz]

Hey @mahdidavoodi7
Have you put the render method into a class component? Because as you wrote the code it's supposed to not work.

Take a look your code working using a dumb component:
https://codesandbox.io/s/5x39pv1v7k

And using a class component:
https://codesandbox.io/s/8n27qqr19j

Can you see and understand the difference?

[arkolesen]

HI, @danilowoz!
Seems, I've got similar trouble
but with title. As i see from updates (~6 days ago) - title Tag was added.
View config not found for name title.
I've deeped into sources and removed everything related to rendering title.
Than i got fail on circle tag..
What could it be?

Thanks, Regards

[danilowoz]

Hey @arkolesen
Could you please send an example of how you did the component?

Thanks

[FuriioS]

Same here!

Invariant Violation: View config not found for name title

...
import { Facebook, Instagram } from 'react-content-loader'
const MyFacebookLoader = () => <Facebook />

export default class Shopping extends Component {
    render() {
        return (
            <ScrollView style={styles.container}>
                <MyFacebookLoader />
            </ScrollView>
        );
    }
}

[danilowoz]

@FuriioS Is it React Native?

[arkolesen]

@danilowoz Hi!
Sorry for delayed response - I was on vacation.

I resolved my needs via react-native-svg
So, unfortunately, I don't have that code (it wasn't commited). But As I remember, I tried example from repo:

const MyLoader = () => (
  <ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
    {/* Pure SVG */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

If I will have time today/tomorrow - I can try again and write to you

Thanks a lot!

[danilowoz]

But I just would like to remember you guys that this is a package to React Web, not to React Native.
For RN you can check here or if you have a way to use this package in React Native, please let me know, maybe there are more people want to know this approach.

Thanks

[FuriioS]

@FuriioS Is it React Native?

Yes. I thought the library was compatible :3

But I just would like to remember you guys that this is a package to React Web, not to React Native.
For RN you can check here or if you have a way to use this package in React Native, please let me know, maybe there are more people want to know this approach.

Thanks

Thank you for the quick response and the clarification : )

[danilowoz]

🎉 This issue has been resolved in version 4.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release