App crashing when using multiple 3d objects in react-native-gl-model-view

Question

I want to use 2 '3d object models' from react-native-gl-model-view simultaneously on one screen. When I use a single 3d object it works fine but as soon as I use two or more than two, every 3d object model starts flickering, and after a couple of seconds app crashes.

Here is how it works with multiple 3d objects

Here is the code:

import React, {Component} from 'react';
import {StyleSheet, View, Animated} from 'react-native';

import ModelView from 'react-native-gl-model-view';
const AnimatedModelView = Animated.createAnimatedComponent(ModelView);

export default class Multiple extends Component {
  constructor() {
    super();
    this.state = {
      rotateZ: new Animated.Value(0),
    };
  }

  componentDidMount() {
    this.animate(0);
  }

  animate(iteration) {
    Animated.timing(this.state.rotateZ, {
      toValue: ++iteration * 360,
      useNativeDriver: true,
      duration: 5000,
    }).start(this.animate.bind(this, iteration++));
  }

  renderModel() {
    return (
      <AnimatedModelView
        model={{
          uri: 'demon.obj',
        }}
        texture={{
          uri: 'demon.png',
        }}
        tint={{r: 1.0, g: 1.0, b: 1.0, a: 1.0}}
        animate
        scale={0.01}
        translateZ={-2.5}
        rotateX={270}
        rotateZ={Animated.add(this.state.rotateZ, Math.random() * 360)}
        style={styles.model}
      />
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          {this.renderModel()}
          {this.renderModel()}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  row: {
    flex: 1,
    flexDirection: 'row',
  },
  model: {
    flex: 1,
    backgroundColor: 'transparent',
  },
});

Note 1: To load a model on Android, you need to place the model in the android/app/src/main/assets folder. Create a new folder if it doesn't exist yet.

assets/models which were used in the above code.

If you want to try the code:

1. npm install react-native-gl-model-view --save
2. Add assets in location shown in Note 1.
3. create a file Muliple.js and paste above code
4. npm run android

Sorry, I wanted to show you the code in expo snack but it wasn't working and showing the following error:

requireNativeComponent: "RNGLModelView" was not found in the UIManager.

Answer 1

Sometime packages are not linked to the project or need to be rebuilt. If you sure did all of the steps for adding that , link again the package to the project:

react-native link react-native-gl-model-view

and if that not works, if you have android studio , reinstall the project on your emulator.