autocomplete not working

[emdile]

I don't get autocomplete with typescript.

typescript 5.1.6
expo 50.0.6
dripsy 4.3.4

config for dripsy

No autocomplete with theme type

[nandorojo]

Does commenting out any of the fields help? #297 seems related

[nandorojo]

Please share your full theme

[emdile]

Please share your full theme

Is in light.ts file

import { makeTheme } from 'dripsy';

// Palette #CACACA44
const p = {
	white: 'white',
	black: 'black',
	gray: {
		'50': '#f9fafb',
		'100': '#f3f4f6',
		'200': '#e5e7eb',
		'300': '#d1d5db',
		'400': '#9ca3af',
		'500': '#6b7280',
		'600': '#4b5563',
		'700': '#374151',
		'800': '#1f2937',
		'900': '#111827',
		'950': '#030712',
	},
	zinc: {
		'50': '#fafafa',
		'100': '#f4f4f5',
		'200': '#e4e4e7',
		'300': '#d4d4d8',
		'400': '#a1a1aa',
		'500': '#71717a',
		'600': '#52525b',
		'700': '#3f3f46',
		'800': '#27272a',
		'900': '#18181b',
		'950': '#09090b',
	},
	red: '#DC2626',
	blue: 'blue',
	yellow: 'yellow',
	paper00: '#ffffff',
	paper10: '#f5f5f4',
	paper20: '#e6e6e6',
	paper100: '#aeaeae',
	paper200: '#CACACA77',
	paper300: '#767577',
	paper900: '#202020',
	blue1: '#3f89c6',
	blue2: '#2185d0',
	blue3: '#57E2E5',
	green1: '#4ADE80',
	green2: '#16A34A',
	orange1: '#FED7AA',
	orange2: '#F29137',
	navy20: '#171a21',
	navy900: '#b9babc',
};

const theme = makeTheme({
	// types: {
	// 	onlyAllowThemeValues: 'always',
	// },
	colors: {
		white: p.white,
		black: p.black,
		red: p.red,
		blue: p.blue,
		yellow: p.yellow,
		gray: p.gray,
		zinc: p.zinc,
		green: {
			1: p.green1,
			2: p.green2,
		},
		orange: {
			$1: p.orange1,
			$2: p.orange2,
		},

		$primary: p.blue1,
		$secondary: p.orange2,
		$accent: p.blue3,
		$background: p.paper10,
		$elementBackground: p.paper00,
		$foreground: p.paper900,
		$liteForeground: p.gray[700],
		$navbarBackground: p.paper10,
		$rippleColor: p.paper200,
		$borderColor: p.gray[300],
		$iconColor: p.gray[500],
		$error: 'red',
	},
	space: {
		$0: 0,
		$1: 4,
		$2: 8,
		$3: 12,
		$4: 16,
		$5: 20,
		$6: 24,
		$7: 28,
		$8: 32,
		$9: 36,
		$10: 40,
		$15: 60,
		$20: 80,
		$25: 100,
		$30: 120,
		$35: 140,
		$40: 160,
	},
	fontSizes: {
		xs: 12,
		sm: 14,
		md: 16,
		lg: 18,
		xl: 24,
		'2xl': 28,
		hg: 32,
	},
	radii: {
		$1: 4,
		$1m: 6,
		$2: 8,
		$3: 12,
		$4: 16,
		$5: 20,
		$6: 24,
		$7: 28,
		$8: 32,
		$9: 36,
		$10: 40,
		$32: 128,
		$35: 140,
		sm: 12,
		xl: 128,
	},
	shadows: {
		md: {
			shadowOffset: {
				width: 0,
				height: 10,
			},
			shadowOpacity: 0.8,
			shadowRadius: 14,
			elevation: 25,
			shadowColor: '$background',
		},
	},
});

export default theme;

export type Theme = typeof theme;

declare module 'dripsy' {
	interface DripsyCustomTheme extends Theme {}
}

[Elie-A-98]

Can you share where do you expect to get autocomplete ? With a comment of what you expect ?

[emdile]

Can you share where do you expect to get autocomplete ? With a comment of what you expect ?

import { shadow } from '@/contants/theme';
import { LabelInput } from '@/design/input';
import { Col, Row } from '@/design/layout';
import { Button } from '@/design/touchable';
import { H4 } from '@/design/typography';
import { SxProp, TextInput } from 'dripsy';
import { Modal } from 'react-native';

type AddFolderModalProps = {
	disabled?: boolean;
	visible: boolean;
	loading?: boolean;
	onClose: () => void;
	validate: () => void;
	handleOnChange: (t: string, field: string) => void;
};

export const AddFolderModal = ({
	disabled,
	validate,
	visible,
	onClose,
	handleOnChange,
}: AddFolderModalProps) => {
	return (
		<Modal
			animationType="fade"
			transparent={true}
			visible={visible}
			onRequestClose={() => {
				onClose();
			}}
		>
			<Col
				sx={{
					flex: 1,
					justifyContent: 'center',
					alignItems: 'center',
				}}
				style={{ backgroundColor: '#00000011' }}
			>
				<Col
					sx={{
						backgroundColor: 'white',
						padding: 16,
						boxShadow: 'md',
						// ...(shadow.dark as any),
					}}
					// style={[shadow.dark]}
				>
					<H4>Ajout de dossier</H4>
					<LabelInput
						label="Nom dossier"
						onChangeText={(t) => handleOnChange(t, 'name')}
					/>
					<Row
						sx={{
							rowGap: 8,
							justifyContent: 'flex-end',
						}}
					>
						<TextInput sx={{dis}} >Trdfdf</TextInput>
						<Button
							title="Annuler"
							containerStyle={{ bg: '$background', color: '$black', mr: '$2' }}
							onPress={onClose}
						/>
						<Button
							title="Sauvegarder"
							disabled={disabled}
							onPress={validate}
						/>
					</Row>
				</Col>
			</Col>
		</Modal>
	);
};

my components have props of type SxProp, but no autocomplete

I tried TextInput component form dripsy, same thing

[nandorojo]

Do you have @types/react-native installed? It shouldn't be installed. Try

yarn why @types/react-native

[Elie-A-98]

Also make sure to restart ts language server after you do the interface merging

[nandorojo]

Can you also try installing [email protected]

[emdile]

Do you have @types/react-native installed? It shouldn't be installed. Try

yarn why @types/react-native

yarn why @types/react-native
yarn why v1.22.5
[1/4] Why do we have the module "@types/react-native"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@types/[email protected]"
info Has been hoisted to "@types/react-native"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "20KB"
info Disk size with unique dependencies: "75.79MB"
info Disk size with transitive dependencies: "212.65MB"
info Number of shared dependencies: 216
Done in 3.00s.

[emdile]

Can you also try installing [email protected]

No change

[emdile]

Also make sure to restart ts language server after you do the interface merging

I did that

[Elie-A-98]

Try removing @types/react-native and restart ts languagr server again. Basiclly don't let ts use the types from @types/react-native

[emdile]

Try removing @types/react-native and restart ts languagr server again. Basiclly don't let ts use the types from @types/react-native

No change. I don't understand. In my solito project it is work with:
dripsy 4.3.3
typscript 5.1.3

but in simple expo project with same config it is not work.

[Elie-A-98]

I tried it with an expo project as well, and it works fine for me. Can you publish a minimal reproducable example ?

[emdile]

I decided to create a new expo project, I installed dripsy and created the theme it worked. Then I copied the code from the old project and everything works. I do not know why.

Thank you for the time you gave me.