Can't get react-native-input-spinner to work with @babel/preset-react

Question

I am trying to use the react-native-input-spinner in my project but am getting the jsx not support error.

SyntaxError: .../node_modules/react-native-input-spinner/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:9):
           7 |  const skinProps = getSkin(props.skin, props);
           8 |  const finalProps = {...props, ...skinProps};
        >  9 |  return <InputSpinner {...finalProps} ref={ref} />;
             |         ^
          10 | });
    
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.

So after googling, I installed it as follows: npm install react-native-input-spinner --save npm install --save-dev @babel/preset-react

The .babelrc file was created in the folder where the package.json was intalled. I also tried in the src directory later.

{
  "presets": ["@babel/preset-react"]
}

npm start showed no changes to the error message. I then added: npm install --save-dev @babel/preset-env

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Again no change. Then added babel.config.js as last try:

babel.config.js file:

module.exports = {
      presets: [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
    };

I am using the following package settings:

{
  "name": "rdt-frontend",
  "version": "0.1.0",
  "private": true,
  "homepage": "mcd",
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@fontsource/roboto": "^4.5.8",
    "@mui/icons-material": "^5.10.16",
    "@mui/material": "^5.10.17",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native-input-spinner": "^1.8.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.22.4",
    "@babel/preset-react": "^7.22.3",
    "react-router-dom": "^6.6.0",
    "typescript": "^4.9.4"
  }
}

What is required to make InputSpinner compile in REACT?

Answer 1

Since there has been no responses from https://github.com/marcocesarato/react-native-input-spinner/issues/98 or for the community I am close this question. I created my own react integer spinner as the workaround.