react-native-game-engine: Rotation of boxes doesn't work

Hello! I start new project with command npx react-native init AwesomeProject. I inserted code from react-native-game-engine-handbook/app/physics/rigid-bodies/. App work but boxes don’t rotate. If I start with expo, boxes rotate. What is the problem?

All code was copied from react-native-game-engine-handbook/app/physics/rigid-bodies/. I don’t change nothing

Package.json

{
  "name": "AwesomeProjec",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "matter-js": "^0.14.2",
    "react-native-game-engine": "^1.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Video Boxes.mov.zip

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 1
Comments: 15 (6 by maintainers)

Most upvoted comments

Hi @bberak @AlekseyKutsko

I made it work by using Animated.Value and Animated.View.

const Item = props => {
  const width = props.size[0];
  const height = props.size[1];
  const x = props.body.position.x - width / 2;
  const y = props.body.position.y - height / 2;

  const angle = useRef(new Animated.Value(0)).current;

  useEffect(() => {
      angle.setValue(props.bodyAngle);
  }, [props.bodyAngle]);

  return (
    <Animated.View
      style={[
        { position: 'absolute', width, height },
        {
          left: x,
          top: y,
          transform: [
            {
              rotate: angle.interpolate({
                inputRange: [0, 360],
                outputRange: ['0deg', '360deg'],
              }),
            },
          ],
        },
      ]}
    />
  );
};

lexengineer on Jun 25, 2020

Hi @bberak

The problem with react-native 0.61.0 or above version. I started new project with react 16.9.0 and react-native 0.60.6 - the rotation works. But if I start a project with react-native 0.61.0, the rotation won’t work.

AlekseyKutsko on Feb 22, 2020