confused viewBox in react-native

[GreatAuk]

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.

What happened actually?

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

Please also mention the version of react.

[rohankan]

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.

[raldred]

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