React-native-slider: Does not support typescript

[lolcookie]

Environment

Using react-native-web unfortunately so can't get diagnostics.

Description

Component explodes app with this error:

./node_modules/@react-native-community/slider/js/Slider.js
SyntaxError: /app/node_modules/@react-native-community/slider/js/Slider.js: Unexpected token (17:12)

  15 | const RCTSliderNativeComponent = require('./RNCSliderNativeComponent');
  16 | 
> 17 | import type {NativeComponent} from 'react-native/Libraries/Renderer/shims/ReactNative';
     |             ^
  18 | import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
  19 | import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
  20 | import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

Reproducible Demo

I can add if required but it looks like the flow types are tripping up, so should be easy to test on any react-native typescript project.

[michalchudziak]

TS typings are there: https://github.com/react-native-community/react-native-slider/blob/master/typings/index.d.ts

Perhaps you should use babel plugin to strip the flow types?

[lolcookie]

@michalchudziak

I cannot use a babel plugin as I am using CRA as the base.

Surely there is a better solution than making every typescript user strip the flow types with a babel plugin?

[findlay-hannam]

I had this same problem. Using https://babeljs.io/docs/en/babel-plugin-transform-flow-strip-types didn't help

[mikeaustin]

Really? I was hoping React Native components worked with React Native for Web. I'm using Create React App to start with–eventually I'll convert it to custom webpack, but I just got started.

[jonstuebe]

Doesn't seem like this should be closed. Still an issue, any ideas?

[jsnx]

Same problem here. Can we open it again please.

[fabiendem]

Adding

transformIgnorePatterns: [
    "node_modules/(?!@react-native-community).+\\.js$"
  ],

to my jest.config.js fixed the issue