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

[jtkerich]

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"
}
}

There is no write up of the problem in the readme or web pages on your package. So what are the step to make InputSpinner compile in REACT? Also please update your readme.me or webpage to describe how to fix this problem.