not work in android

[Rowandjj]

[ochanje210]

Hello there :) It is because in Android, child view gets bounded by its parent view. If you give the container view greater size, there won't be a problem. I will try to fix this soon.

[Rowandjj]

got it. thanks:)

[Rowandjj]

hi buddy:)
still not work after tried many ways:(

[bdanis]

Did you ever get it to draw properly? I expanded the container and it works well, unfortunately, the angles of the faces seem off, despite the values being the same as iOS and the normals of the faces seem to be inverted

[bdanis]

I've also attached the edited scripts i am using
Cube.txt

[AdamKraif]

Any solution ?

[DylanVann]

From what I've seen even when position is set to absolute Android won't respect the z values from the transform matrix when it comes to the draw order of the panels.

[juniorerico]

It's still not working for me. I think we will need to change zIndex dynamically to make it work properly.

[Kouznetsov]

zIndex does not work on android, you have to use elevation instead.
I managed to make it work by setting it dynamically.

_rotateCube(dx) {
    dx %= 360
    const origin = { x: 0, y: 0, z: -yourCubeSideSize / 2 }
    let matrix = this._rotateX(dx)
    this._transformOrigin(matrix, origin)
    this.refViewFront.setNativeProps({
      style: {elevation: dx > 90 && dx < 270 ? 1 : 10, transform: [{ perspective: 1000}, { matrix: matrix }] }
    })

    matrix = this._rotateX(dx + 180)
    this._transformOrigin(matrix, origin)
    this.refViewBack.setNativeProps({
      style: {elevation: dx > 90 && dx < 270 ? 10 : 1, transform: [{ perspective: 1000 }, { matrix: matrix }] }
    })

    matrix = this._rotateX(dx + 90)
    this._transformOrigin(matrix, origin)
    this.refViewRight.setNativeProps({
      style: {elevation: dx > 180 ? 10 : 1, transform: [{ perspective: 1000 }, { matrix: matrix }] }
    })

    matrix = this._rotateX(dx - 90)
    this._transformOrigin(matrix, origin)
    this.refViewLeft.setNativeProps({
      style: {elevation: dx < 180 ? 10 : 1, transform: [{ perspective: 1000 }, { matrix: matrix }] }
    })
  }

Edit: This was a sandbox thing, not exactly adaptable for this project, but you get the gist.

[AdamTyler]

The issue for me is exactly as @bdanis describes. The faces seem to be a little bit skewed or have the wrong angle so the cube doesn't line up properly

[bdanis]

src_react_components_game_elements_Cube.txt
this was our final thing, i remember doing a lot with the matrix

[SudarshanSuryaprakash]

Any fixes?
Android support would be great!

[raienko]

Add: backfaceVisibility: 'hidden',
to the side style
in my case - instead of zIndex: 10

[wardjk87]

@raienko that worked for me. What a simple solution! Thanks.