I'm interested in importing a Button component that can be reused from the theme folder.
The path to the Button component is as follows:
\app\theme\components\Button.ts
Here is the code for Button.ts:
import { typography } from "theme/typography";
import { ButtonProps } from "react-native-elements";
export const Button = {
titleStyle: {
fontSize: typography.size,
fontFamily: typography.primaryMedium,
lineHeight: typography.size,
letterSpacing: 0,
marginHorizontal: typography.size
},
containerStyle: {
borderRadius: typography.size * 2 + typography.size * 2
},
buttonStyle: {
borderRadius: typography.size * 2 + typography.size
}
} as ButtonProps
The specific component I want to import this Button into is named organizationdetails-screen.tsx.
Its location is at
\app\screens\superadmin-screens\organizationdetails-screen.tsxMy attempt at importing the Button looks like this:
import { Button } from '../../theme/components/Button';
However, I am encountering an error during this process.
You can view the error message here.
This is how I am utilizing the Button:
<Button
title="Add User"
onPress={() => this.props.navigation.navigate('AddNewUser')}
/>
Upon hovering over the button in Visual Studio Code, I receive the following error:
You can view the error details here.
Are there any suggestions on how to successfully import and use this reusable Button?