Add keyboard accessories for faster email and task input using react-native-keyboard-controller

[Copilot]

Fixes #18 by implementing keyboard accessories that appear above the virtual keyboard to help users quickly complete common text patterns.

What's Changed

Added two new keyboard accessory components using KeyboardExtender from the existing react-native-keyboard-controller library:

EmailKeyboardAccessory

• Displays common email domain suggestions (@gmail.com, @outlook.com, @yahoo.com, @hotmail.com, @icloud.com)
• Integrated with the email field in the Auth component for faster registration
• Smart domain completion that replaces existing domains or appends to partial emails
• Shows only when the email field is focused

TaskKeyboardAccessory

• Provides French task prefix suggestions (Acheter, Appeler, Envoyer, Réserver, Planifier, Faire)
• Integrated with the todo input in playground-todos for faster task creation
• Helps users quickly start typing common task types
• Shows only when the todo input field is focused

Technical Implementation

Both components use the same pattern:

• KeyboardExtender wraps suggestion buttons that appear above the keyboard
• Horizontal scrolling list of touchable suggestions
• Conditional rendering based on input field focus state
• NativeWind styling matching the app's design system

<KeyboardExtender enabled={isFieldFocused}>
  <View className="bg-border/70 border-t border-border px-4 py-2">
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      <View className="flex-row gap-2">
        {suggestions.map((suggestion) => (
          <TouchableOpacity
            key={suggestion}
            onPress={() => onSuggestionPress(suggestion)}
            className="rounded-lg bg-primary px-3 py-2">
            <Text className="text-sm text-primary-foreground">{suggestion}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </ScrollView>
  </View>
</KeyboardExtender>

User Experience

Users can now:

1. Tap the email field during registration and see domain suggestions above their keyboard
2. Tap any domain suggestion to quickly complete their email address
3. Create todos faster by tapping common action prefixes instead of typing them

This significantly reduces typing effort and potential errors, especially on mobile devices where typing can be cumbersome.

Files Changed

• components/keyboard/EmailKeyboardAccessory.tsx - New email domain suggestions component
• components/keyboard/TaskKeyboardAccessory.tsx - New task prefix suggestions component
• components/Auth.tsx - Added email keyboard accessory integration
• app/(settings)/playground-todos.tsx - Added task keyboard accessory integration
• docs/keyboard-accessories.md - Implementation documentation

The implementation leverages the existing KeyboardProvider setup and doesn't require any additional dependencies.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• cdp.expo.dev
  • Triggering command: node /home/REDACTED/work/kidgo/kidgo/node_modules/.bin/expo start --web (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.