Rotation of boxes doesn't work

[AlekseyKutsko]

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

[bberak]

Hi @AlekseyKutsko,

Could it be some additional styles that the Expo version includes (or doesn't include)? I haven't used MatterJS for a while (which drives the physics) so I'm not sure what would be wrong off by heart.

Are there any warning messages in the console?

In the renderer code, try the following change:

// transform: [{ rotate: angle + "rad" }],
transform: [{ rotateZ: angle + "rad" }],

[AlekseyKutsko]

@bberak thanks for your reply!

There aren't any messages in the console.

Changing to rotateZ doesn't help((

I didn't work with expo earlier. I don't know, expo has some additional styles or not. I will try to find differences.

[AlekseyKutsko]

Hi @bberak,

I started empty expo project with command expo init AwesomeProject. I tried expo 33.0.0, 34.0.0, 35.0.0 and 36.0.0 versions. Rotation didn't work only last version(36.0.0).

I downgraded react to 16.8.6 version, react-native to 0.60.6 version and the boxes began to rotate!

Package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.6",
    "matter-js": "^0.14.2",
    "react-native-game-engine": "^1.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

[bberak]

Nice debugging @AlekseyKutsko - really appreciate you taking the time to do that.

I'm really baffled as to why the React and React Native versions break the rotation - but the handbook project is quite old now, so could use some maintenance (and your info will really help).

Thanks again, and all the best with your project - let us know how you go!

Cheers!

[AlekseyKutsko]

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.

[bberak]

Cheers @AlekseyKutsko

[lexengineer]

@bberak
Looks like I am also facing similar issue. Created a new issue for that with code samples, but I think it can be the same.

Please let me know if you know in which direction I can start looking in order to fix that. We need that for our project, so I am ready to help.

[bberak]

Hi @AlekseyKutsko,

Just checking in - could your issue be similar to: #56 (comment)

Cheers.

[AlekseyKutsko]

Hi @bberak.
Perhaps it's similar issue.

Hi @oleksiikiselov.
Which version of react native do you use? I had similar issue with react-native 0.61.0 or above version. 0.61.2 version was last when I checked. Maybe, this issue was fixed in new version RN, I didn't check it. In example, which I tested, used rad for rotation but not deg.

class Box extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const width = this.props.size[0];
    const height = this.props.size[1];
    const x = this.props.body.position.x - width / 2;
    const y = this.props.body.position.y - height / 2;
    const angle = this.props.body.angle;
   
    return (
      <View
        style={
          {
            position: "absolute",
            left: x,
            top: y,
            width: width,
            height: height,
            transform: [{ rotate: angle + "rad" }],
            backgroundColor: this.props.color || "pink"
          }
        }
      />
    );
  }
}

[lexengineer]

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'],
              }),
            },
          ],
        },
      ]}
    />
  );
};

[JeffGuKang]

I solved it by referring to @oleksiikiselov's solution. Thanks

import React from 'react'
import Animated from 'react-native-reanimated'

const Box = 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 = props.body.angle

  return (
    <Animated.View
      style={{
        position: 'absolute',
        left: x,
        top: y,
        width: width,
        height: height,
        transform: [{rotateZ: angle + 'rad'}],
        backgroundColor: props.color || 'pink',
      }}
    />
  )
}

export {Box}

[bberak]

Thanks for sharing @JeffGuKang. Is const angle = props.body.angle an animated value or a regular number?

[JeffGuKang]

Thanks for sharing @JeffGuKang. Is const angle = props.body.angle an animated value or a regular number?

It is props value from the Matter.js that is why transform: [{rotateZ: angle + 'rad'}], works as animation. I didn't dig how to give the angle number from matter js.

[bberak]

Thanks @JeffGuKang. How is props.body.angle set in that case? Does it come from MatterJS? If so, what was the process to transform the number from MatterJS into an Animated value - did you use the code that @oleksiikiselov posted above #49 (comment)?

[JeffGuKang]

@bberak I refered https://github.com/bberak/react-native-game-engine-handbook/blob/master/app/physics/rigid-bodies/index.js#L39-L41

I think MatterJS transform the renderer's component defined in entities. It just my opinion and I am not dig the MatterJS code yet. 😢
Do you have any ideas?