For example in my project there are a few Input elements in different files. The styling of the Input elements has to be the same in all the files. The styling of the Input elements are written in a different file(Input.ts
) in theme/components folder like this:
import { spacing } from "theme/spacing";import { colors } from "theme/colors";import { InputProps } from "react-native-elements";import { typography } from "theme/typography";export const Input = {containerStyle: { marginVertical: spacing.small},errorStyle: { marginLeft: spacing.tiny, marginBottom: 0},inputContainerStyle: { borderWidth: 1, backgroundColor: colors.palette.offWhite, borderRadius: typography.size * 2, paddingVertical: 0},inputStyle: { alignSelf: 'center', alignItems: 'center', fontFamily: typography.primary, color: colors.text, lineHeight:typography.size * 1.5, textAlignVertical: 'center', fontSize: typography.size, paddingLeft: typography.size, paddingVertical: spacing.small},leftIcon: { size: typography.size, color: colors.dim}} as InputProps;
I want to use these styles in login.tsx
file:
<Input placeholder="Email" />
But I don't understand how to import this Input.ts
file or use this Input.ts
file.