Gluestack-ui Setup Skill

This skill covers Gluestack-ui component library for React Native.

When to Use

Use this skill when:

• Need pre-built accessible components
• Implementing forms with inputs, selects, etc.
• Building modals, tooltips, popovers
• Want shadcn/ui-like experience for mobile

Core Principle

ACCESSIBLE BY DEFAULT - Gluestack components are built with accessibility in mind.

Installation

npx gluestack-ui init

Follow the prompts to configure:

• Style engine (NativeWind recommended)
• TypeScript
• Path aliases

Available Components

Form Components

import {
  Input,
  InputField,
  InputSlot,
  InputIcon,
} from '@gluestack-ui/themed';

<Input>
  <InputSlot>
    <InputIcon as={SearchIcon} />
  </InputSlot>
  <InputField
    placeholder="Search..."
    accessibilityLabel="Search input"
  />
</Input>

Button

import { Button, ButtonText, ButtonIcon } from '@gluestack-ui/themed';

<Button size="md" variant="solid" action="primary">
  <ButtonText>Click Me</ButtonText>
</Button>

<Button size="lg" variant="outline" action="secondary">
  <ButtonIcon as={PlusIcon} />
  <ButtonText>Add Item</ButtonText>
</Button>

Select

import {
  Select,
  SelectTrigger,
  SelectInput,
  SelectPortal,
  SelectBackdrop,
  SelectContent,
  SelectItem,
} from '@gluestack-ui/themed';

<Select>
  <SelectTrigger>
    <SelectInput placeholder="Select option" />
  </SelectTrigger>
  <SelectPortal>
    <SelectBackdrop />
    <SelectContent>
      <SelectItem label="Option 1" value="1" />
      <SelectItem label="Option 2" value="2" />
      <SelectItem label="Option 3" value="3" />
    </SelectContent>
  </SelectPortal>
</Select>

Checkbox

import {
  Checkbox,
  CheckboxIndicator,
  CheckboxIcon,
  CheckboxLabel,
} from '@gluestack-ui/themed';
import { CheckIcon } from 'lucide-react-native';

<Checkbox value="agree">
  <CheckboxIndicator>
    <CheckboxIcon as={CheckIcon} />
  </CheckboxIndicator>
  <CheckboxLabel>I agree to terms</CheckboxLabel>
</Checkbox>

Modal

import {
  Modal,
  ModalBackdrop,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  ModalCloseButton,
} from '@gluestack-ui/themed';

const [showModal, setShowModal] = useState(false);

<Modal isOpen={showModal} onClose={() => setShowModal(false)}>
  <ModalBackdrop />
  <ModalContent>
    <ModalHeader>
      <Heading>Modal Title</Heading>
      <ModalCloseButton />
    </ModalHeader>
    <ModalBody>
      <Text>Modal content goes here</Text>
    </ModalBody>
    <ModalFooter>
      <Button onPress={() => setShowModal(false)}>
        <ButtonText>Close</ButtonText>
      </Button>
    </ModalFooter>
  </ModalContent>
</Modal>

Toast

import { useToast, Toast, ToastTitle, ToastDescription } from '@gluestack-ui/themed';

function Component(): React.ReactElement {
  const toast = useToast();

  const showToast = () => {
    toast.show({
      placement: 'top',
      render: ({ id }) => (
        <Toast nativeID={id} action="success">
          <ToastTitle>Success!</ToastTitle>
          <ToastDescription>Your action was completed.</ToastDescription>
        </Toast>
      ),
    });
  };

  return (
    <Button onPress={showToast}>
      <ButtonText>Show Toast</ButtonText>
    </Button>
  );
}

Alert

import { Alert, AlertIcon, AlertText } from '@gluestack-ui/themed';
import { InfoIcon } from 'lucide-react-native';

<Alert action="info">
  <AlertIcon as={InfoIcon} />
  <AlertText>This is an informational alert.</AlertText>
</Alert>

<Alert action="error">
  <AlertIcon as={AlertCircleIcon} />
  <AlertText>Something went wrong!</AlertText>
</Alert>

Combining with NativeWind

import { Button, ButtonText } from '@gluestack-ui/themed';

// Use className for additional styling
<Button className="bg-blue-600 rounded-full">
  <ButtonText className="text-white font-bold">
    Custom Styled
  </ButtonText>
</Button>

Form Example

import { View, Text } from 'react-native';
import {
  Input,
  InputField,
  Button,
  ButtonText,
  FormControl,
  FormControlLabel,
  FormControlLabelText,
  FormControlError,
  FormControlErrorText,
} from '@gluestack-ui/themed';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
});

type FormData = z.infer<typeof schema>;

export function LoginForm(): React.ReactElement {
  const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <View className="gap-4">
      <FormControl isInvalid={!!errors.email}>
        <FormControlLabel>
          <FormControlLabelText>Email</FormControlLabelText>
        </FormControlLabel>
        <Controller
          control={control}
          name="email"
          render={({ field: { onChange, value } }) => (
            <Input>
              <InputField
                value={value}
                onChangeText={onChange}
                keyboardType="email-address"
                autoCapitalize="none"
              />
            </Input>
          )}
        />
        <FormControlError>
          <FormControlErrorText>{errors.email?.message}</FormControlErrorText>
        </FormControlError>
      </FormControl>

      <FormControl isInvalid={!!errors.password}>
        <FormControlLabel>
          <FormControlLabelText>Password</FormControlLabelText>
        </FormControlLabel>
        <Controller
          control={control}
          name="password"
          render={({ field: { onChange, value } }) => (
            <Input>
              <InputField
                value={value}
                onChangeText={onChange}
                secureTextEntry
              />
            </Input>
          )}
        />
        <FormControlError>
          <FormControlErrorText>{errors.password?.message}</FormControlErrorText>
        </FormControlError>
      </FormControl>

      <Button onPress={handleSubmit(onSubmit)}>
        <ButtonText>Sign In</ButtonText>
      </Button>
    </View>
  );
}

Theming

// gluestack-ui.config.ts
import { config } from '@gluestack-ui/config';

export default {
  ...config,
  tokens: {
    ...config.tokens,
    colors: {
      ...config.tokens.colors,
      primary500: '#3B82F6',
      primary600: '#2563EB',
    },
  },
};

Notes

• Gluestack components work seamlessly with NativeWind
• All components support accessibility attributes
• Use FormControl for form validation feedback
• Toast requires ToastProvider at app root
• Modal requires OverlayProvider for proper rendering