react-content-loader icon indicating copy to clipboard operation
react-content-loader copied to clipboard

confused viewBox in react-native

Open GreatAuk opened this issue 4 years ago • 2 comments

What did you do?

Please include the actual source code causing the issue.

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

const MyLoader = (props) => (
  <ContentLoader
    speed={2}
    width="100%"
    height="100%"
    viewBox="0 0 100 60"
    backgroundColor="#f3f3f3"
    style={{ backgroundColor: 'red' }}
    foregroundColor="#ecebeb"
    // {...props}
  >
    <Rect x="0" y="0" rx="2" ry="2" width="40" height="60" />
    <Rect x="45" y="0" rx="2" ry="2" width="40" height="60" />
  </ContentLoader>
)

export default MyLoader
// use
<View style={{ height: 75, width: '100%' }}>
  <MyCodeLoader />
</View>

What did you expect to happen?

Please mention the expected behaviour. image

What happened actually?

image

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

Please also mention the version of react.

GreatAuk avatar May 19 '21 14:05 GreatAuk

I'm also facing this issue while using Metro with React Native v0.64.1 and react-content-loader v6.0.3. After changing the viewBox property on a ContentLoader and reloading the app with Metro, the viewBox does not update.

However, a temporary solution I found was to rebuild the app: after changing the viewBox property on a ContentLoader, rebuilding the app causes the viewBox to update correctly.

rohankan avatar Aug 12 '21 22:08 rohankan

I have removed the viewbox attribute entirely when using ContentLoader, just using width and height and containing in a regular View component

raldred avatar Aug 28 '21 18:08 raldred