react-native-cube
react-native-cube copied to clipboard
ochanje210
not work in android
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.
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
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.
It's still not working for me. I think we will need to change zIndex dynamically to make it work properly.
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.
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
src_react_components_game_elements_Cube.txt this was our final thing, i remember doing a lot with the matrix
Add: backfaceVisibility: 'hidden',
to the side style
in my case - instead of zIndex: 10
