Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6295

Problem with import component in react-native - typeScript

$
0
0

I have a problem with import my component when it's in ./src/components/CustomButton/index.tsx and when im using defined paths in tsconfig. Then my import looks likeimport CustomButton from '@components/CustomButton'

But when i save it not in index.tsx and without using directory but just in /components/CustomButton.tsx and thenimport CutomButton from '../components/CustomButton.tsx'everything works fine.

How to make first version work properly?

Import error: enter image description here

CustomButton index.tsx

import {Button} from 'native-base';const CustomButton = ({  children,  dark,  onPress,  isDisabled,  bold,  isLoading,  mt,}: any) => (<Button    _text={{      color: `${dark ? 'white' : 'black'}`,      fontWeight: `${bold ? 'bold' : 'normal'}`,      fontSize: 16,    }}    bg={dark ? 'muted.20' : 'muted.10'}    colorScheme="muted"    onPress={onPress}    isDisabled={isDisabled}    isLoading={isLoading}    style={{borderRadius: 10}}    p="4"    mt={mt}>    {children}</Button>);export default CustomButton;

tsconfig

{"extends": "@tsconfig/react-native/tsconfig.json","compilerOptions": {"target": "esnext","module": "commonjs","moduleResolution": "node","outDir": "dist","sourceMap": false,"jsx": "react-native","allowJs": true,"noUnusedLocals": true,"noUnusedParameters": true,"noImplicitReturns": true,"noFallthroughCasesInSwitch": true,"declaration": true,"noEmit": true,"isolatedModules": true,"strict": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"skipLibCheck": true,"resolveJsonModule": true,"experimentalDecorators": true,"forceConsistentCasingInFileNames": true,"baseUrl": "./src","paths": {"@*": ["/*"],"@api/*": ["/apiActions/*"],"@components/*": ["/components/*"      ],"@context/*": ["/Context/*"      ],"@interfaces/*": ["/Interfaces/*"      ],"@utils/*": ["/utils/*"      ]    }  },"exclude": ["node_modules","babel.config.js","metro.config.js",  ]}

How to make first version work properly? I've search a lot here and in other pages but i didn't find the answer


Viewing all articles
Browse latest Browse all 6295

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>