Open nallakshyams opened 1 week ago
kristerkari
commented
1 week ago Thanks @nallakshyams,
It's quite difficult to help out with your exact problem, but I suspect that something might have gone wrong when you updated react-native or react-native-svg to a newer version.
I have the example app for this library that is using the latest versions of both libraries: https://github.com/kristerkari/react-native-svg-example
nallakshyams
commented
6 days ago Thanks for the reply @kristerkari .
I am experiencing an out of memory error when bundling SVGs using react-native-svg-transformer. My project involves a large number of SVG images (around 300), and I have modified the code to dynamically import these images rather than importing each one as an independent component.
Code Implementation Here's a summary of my implementation:
App.js
import {SafeAreaView, ScrollView} from 'react-native';
import images from './images';
import ImageComponent from './ImageComponent';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView} contentContainerStyle={styles.containerStyles}>
<ImageComponent source={images.bower}/>
<ImageComponent source={images.composer}/>
{/* Other components */}
</ScrollView>
</SafeAreaView>
);
}
}
const styles = {
logo: {
marginTop: 20,
marginBottom: 20,
},
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#efefef',
},
scrollView: {
width: '100%',
},
containerStyles: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
};images.js
const imageObjects = {
bower: import('./logos/bower.svg'),
composer: import('./logos/composer.svg'),
//and so on for about 300 images
};
class Images {
constructor() {
this.ImageAssets = imageObjects;
}
static getInstance() {
if (!this.instance) {
this.instance = new Images();
}
return this.instance;
}
get bower() {
return this.ImageAssets.bower;
}
get composer() {
return this.ImageAssets.composer;
}
//and so on for about 300 images
}
const images = Images.getInstance();
export default images;ImageComponent.js
import { View } from 'react-native';
const MyCustomImage = props => {
const { source } = props;
const DynamicComponent = React.lazy(() => source);
return (
<Suspense fallback={<View />}>
<View>
<DynamicComponent style={{marginTop: 20, marginBottom: 20}}/>
</View>
</Suspense>
);
};
export default React.memo(MyCustomImage);After modifying the code to dynamically import SVG images, Metro bundler throws an "out of memory" error when attempting to bundle these images. This issue arises particularly when dealing with a large number of images (around 300 in my case).
Request Could you please provide guidance on how to handle such a scenario effectively? Are there any recommended practices or adjustments that can be made to react-native-svg-transformer to accommodate large-scale SVG imports without running into memory issues?
Thank you for your assistance! @kristerkari
nallakshyams
commented
3 days ago Hi @kristerkari , On more observation. Even when importing just two images dynamically after altering the sample(https://github.com/kristerkari/react-native-svg-example) as mentioned above, the SVGs are being bundled in Metro. if i import SVG directly same as given in the example, i don't see they are bundled.
I recently upgraded my React Native project from version 0.67.5 to 0.74.0. Since the upgrade, I have been encountering an error while bundling SVGs on both Android and iOS.
Error:
Environment:
Step(s) to Reproduce:
-Upgrade React Native from 0.67.5 to 0.74.0 and follow react-native-svg and react-native-svg-transformer docs.
Tried below but issue persist: 1.Attempt to bundle the project for Android using the following script:
"bundle:android": "NODE_OPTIONS='--max_old_space_size=8192' npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",2.Attempt to increase the node memory using the following script:
"start": "node --expose-gc --max-old-space-size=8192 node_modules/.bin/react-native start --reset-cache",Additional Context:
The issue occurs only after the upgrade. It seems to be related to the memory allocation during the bundling process.
Any guidance or suggestions to resolve this issue would be greatly appreciated. Thank you!