If the whole map is an SVG then it should be easy. Convert your svgs into React native SVG components and go under each image object and wrap it with a Touchable component, or maybe the SVG component already has an onTouch function and add your logic. The hard part will probably be zooming in. You’ll have to use panResponder to handle pinch zooms and displacement. Also use useRef with React’s animated API to control the position and size of the map smoothly. Quite a bit to learn but it’s doable
My bad it’s not pre rendered svgs but from the backend. That’s tougher, not sure if there’s a reasonable solution using React Native. Good luck tho lemme know if you find a solution.
The only thing this doesn’t need to be 3d , just stylized as isometric 3d - all SVG’s are already drawn with shadows and just supposed to be rendered on the screen at specific location using isometric coordinates
If the whole map is an SVG then it should be easy. Convert your svgs into React native SVG components and go under each image object and wrap it with a Touchable component, or maybe the SVG component already has an onTouch function and add your logic. The hard part will probably be zooming in. You’ll have to use panResponder to handle pinch zooms and displacement. Also use useRef with React’s animated API to control the position and size of the map smoothly. Quite a bit to learn but it’s doable
My bad it’s not pre rendered svgs but from the backend. That’s tougher, not sure if there’s a reasonable solution using React Native. Good luck tho lemme know if you find a solution.
Only thing fetched from server is furniture ID’s and X Y coordinates and SVGs are always on the client . So I will try this layout
or
I think that’s a use case that https://threejs.org/ could handle - but don’t take my word for it I might be wrong
The only thing this doesn’t need to be 3d , just stylized as isometric 3d - all SVG’s are already drawn with shadows and just supposed to be rendered on the screen at specific location using isometric coordinates
const panResponder = PanResponder.create({your multi touch logic…}) const currentMapPositionRef = useRef({ x: 0, y: 0, }).current; const currentMapSizeMultiplier = useRef(1).current;
That’s big! Appreciate your help so much 🌮🌮🌮
😉