react-content-loader: Text error

What did you do?

Please include the actual source code causing the issue. import { Facebook } from ‘react-content-loader’; // then in render method return <Facebook />;

What did you expect to happen?

Please mention the expected behaviour. See the facebook loader

What happened actually?

Invariant Violation: Text string must be rendered within a <Text> component, error located at title in Svg

Which versions of react-content-loader, and which browser are affected by this issue?

Please also mention the version of react. Everything is the latest

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 17 (7 by maintainers)

Commits related to this issue

feat(platform support): react native re #148, re #137, re #106, re #89, re #16, re #6 — committed to danilowoz/react-content-loader by danilowoz 5 years ago
React Native Support (#153) * feat(platform support): react native re #148, re #137, re #106, re #89, re #16, re #6 * build(rollup): native bundle * feat(native): stylized components * bu... — committed to danilowoz/react-content-loader by danilowoz 5 years ago
feat(codebase): react native support (#153) re #148, re #137, re #106, re #89, re #16, re #6 * build(rollup): native bundle * feat(native): stylized components * build(typescript): react native ch... — committed to danilowoz/react-content-loader by danilowoz 5 years ago

Most upvoted comments

Hey, it seems that you’re using React Dom version on React Native.

Are you importing the package from the native version? Like this:

+ import ContentLoader, { Rect, Circle } from 'react-content-loader/native'

const MyLoader = () => (
  <ContentLoader>
+    <Circle cx="30" cy="30" r="30" />
+    <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>
)

danilowoz on Jan 11, 2020

@danilowoz shoot, I didn’t mention it since it was that simple custom loader example found in the readme:

const MyLoader = () => (
  <ContentLoader>
    {/* Only SVG shapes */}    
    <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>
)

But I imported the non native ContentLoader, this explains the error. Sorry 😃

giacomocerquone on Sep 30, 2019

@danilowoz Thanks - sorry about the confusion.

bfine9618 on Feb 21, 2019