TypeScript warning: missing types

[AndreCosta101]

Hi,

I'm getting a message for types missing.

I couldn't install the @types package, so I guess there isn't one.

Alternatively, it asks to add a new declaration. Can anyone help me with that? I have no idea how to do it. Thanks

Could not find a declaration file for module 'react-native-progress/Bar'. '/Users/[...]/node_modules/react-native-progress/Bar.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-native-progress if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-progress/Bar';ts(7016)

[rimselis]

I'm getting an error Could not find a declaration file for module 'react-native-progress/Bar'. when importing ProgressBar directly using import ProgressBar from 'react-native-progress/Bar';.

[ericdsw]

You could try importing it like this:

import { Bar as ProgressBar } from 'react-native-progress';

const MyComponent = () => (
  <ProgressBar progress={0.5} /> // <--- Should auto complete props
);

You should have no problems with tree shaking configured in your project.

[soliloquyx]

You could try importing it like this:

import { Bar as ProgressBar } from 'react-native-progress';

const MyComponent = () => (
  <ProgressBar progress={0.5} /> // <--- Should auto complete props
);

You should have no problems with tree shaking configured in your project.

This still requires react-native-svg to be installed.

They way I solved it:

1. I created a types folder inside my src folder, then react-native-progress folder and inside there index.d.ts file with declare module 'react-native-progress/Bar'

[GunnarAK]

@soliloquyx 's solution worked fine for me in the beginning, but when revisiting the project I find myself fiddling with this error again. I will just start messing around with things and after a while it will suddenly start working again (??). This happens often.

Things I do:

• delete watcher cache
• reset metro cache
• delete node_modules and reinstall
• messing around with progressbar import in ProgressScreen.js

error: Error: Unable to resolve module react-native-svg from /Users/.../node_modules/react-native-progress/Circle.js: react-native-svg could not be found within the project or in these directories:
  node_modules
  ../../../node_modules

My setup:

import React from 'react';
import { Modal, View } from 'react-native';
import { Bar as ProgressBar } from 'react-native-progress';

type Props = {
  onDone: () => void;
  progress: number;
  visible: boolean;
};

function ProgressScreen({ progress = 0, visible = false }: Props) {
  return (
    <Modal visible={visible}>
      <View style={styles.container}>
        <ProgressBar color={colors.primary} progress={progress} width={200} />
      </View>
    </Modal>
  );
}

export default ProgressScreen;

types/react-native-progress/index.d.ts:

// Fix for not requiring react-native-svg: https://github.com/oblador/react-native-progress/issues/226#issuecomment-944223473
declare module 'react-native-progress/Bar';

My issue sounds a lot like https://github.com/oblador/react-native-progress/issues/26, but his fix did not work for me. Any suggestions?

[Rishabh-Chowdhry]

so can we use it using typescript or not