# useWaitlist()

The `useWaitlist()` hook provides access to the [Waitlist](https://clerk.com/docs/expo/reference/types/waitlist.md) object, which provides methods and properties to manage waitlist entries in your application. This hook is useful for building a custom flow instead of using the prebuilt [<Waitlist />](https://clerk.com/docs/expo/reference/components/authentication/waitlist.md) component.

## Returns

| Name        | Type                 | Description                                                    |
| ----------- | -------------------- | -------------------------------------------------------------- |
| waitlist    | Waitlist             | The current active Waitlist instance, for use in custom flows. |
| errors      | Errors               | The errors that occurred during the last API request.          |
| fetchStatus | 'idle' | 'fetching' | The fetch status of the underlying Waitlist resource.          |

## Example

The following example demonstrates how to use the `useWaitlist()` hook to create a custom waitlist form. Users can submit their email address to join the waitlist, and the component displays appropriate feedback based on the submission state.

filename: src/app/(auth)/waitlist.tsx
```tsx
import { useWaitlist } from '@clerk/expo'
import { useState } from 'react'
import { View, Text, TextInput, Button, StyleSheet } from 'react-native'

export default function WaitlistScreen() {
  const { waitlist, errors, fetchStatus } = useWaitlist()
  const [emailAddress, setEmailAddress] = useState('')

  const handleSubmit = async () => {
    const { error } = await waitlist.join({ emailAddress })
    if (error) {
      console.error('Failed to join waitlist:', error)
    }
  }

  if (waitlist.id) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Successfully joined the waitlist!</Text>
        <Text style={styles.message}>We'll notify you when you're approved.</Text>
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Join the Waitlist</Text>
      <TextInput
        style={styles.input}
        placeholder="Email address"
        value={emailAddress}
        onChangeText={setEmailAddress}
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="email"
      />
      {errors.fields.emailAddress && (
        <Text style={styles.error}>{errors.fields.emailAddress.longMessage}</Text>
      )}
      <Button
        title={fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
        onPress={handleSubmit}
        disabled={fetchStatus === 'fetching'}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  message: {
    fontSize: 16,
    color: '#666',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    marginBottom: 10,
  },
  error: {
    color: 'red',
    marginBottom: 10,
  },
})
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)