implement tooth chart in react native

Question

I want to implement a tooth chart like this in react native that user can select a tooth by pressing on it. How can I achieve that?

Answer 1

There are couple of ways you can do this.

One of the options is to create a component for the tooth chart. toothChart.js Then it the component you are going to return a 16 x 16 grid using two loops one for the horizontalAxis and one for the verticalAxis.

const verticalAxis-["1", 2", "3", "4", 6", "7", "8"..., "16"];

const horizontalAxis-["a", "b",e, "d", "f", "8", "h" ....];
                                                      
                                        
export default function toothChart()
  let board-[]:
  for (let j- verticalaxis.length-1;j>- 0; j--){
     for (leti-e; ic horizontalAxis.length; i++){
       board.push(
         <View style={styles.tile>[{horizontalAxis[1]}{verticalAxis[]}]</View>
       );
  return <View style={styles.toothChartBoard} >{board}</div>;

Then within the boards you can add svg/image of the individual tooth. I hope this helps.

https://www.youtube.com/watch?v=Iri__zwxwHg