Friends Sharing UX Improvements

June 18, 2025 · View on GitHub

Summary

Improved the friends sharing user experience to make it consistent with photo sharing in the WiSaw app.

Changes Made

1. Added Manual Share Button to Friends List

  • Location: src/screens/FriendsList/index.js
  • Description: Added a prominent share button to each friend item in the friends list
  • Features:
    • Blue colored button with white share icon (consistent with photo sharing)
    • Shadow and elevation for visual prominence
    • Positioned before edit and delete buttons for logical flow

2. Removed Auto-Share on Friend Creation

  • Location: src/screens/FriendsList/reducer.js
  • Description: Made friendship sharing optional instead of automatic
  • Benefits:
    • Users have control over when to share
    • Consistent with photo sharing behavior (manual action required)
    • Better user experience (no unexpected sharing)

3. Enhanced UI/UX Features

  • Long Press Sharing: Long press on any friend item to quickly share
  • Haptic Feedback: Added tactile feedback for better responsiveness
  • Pending Status Sharing: Added inline share button for pending friendships
  • Visual Improvements:
    • Adjusted button spacing and sizing
    • Added share button highlighting
    • Improved layout for 3 action buttons

4. User Guidance

  • First Friend Tip: Shows helpful toast message when user adds their first friend
  • Updated Empty State: Better description explaining the sharing workflow
  • Consistent Messaging: Error and success messages match photo sharing patterns

Technical Implementation

Components Modified:

  1. src/screens/FriendsList/index.js

    • Added handleShareFriend function
    • Enhanced UI with share buttons
    • Added haptic feedback
    • Improved styling and layout

  2. src/screens/FriendsList/reducer.js

    • Modified createFriendship to accept autoShare parameter
    • Updated default behavior to not auto-share
    • Improved error handling and user feedback

Dependencies:

  • Uses existing linkingAndSharingHelper.shareWithNativeSheet
  • Added haptic feedback with expo-haptics
  • Consistent with existing design system and colors

User Experience Flow

Before:

  1. User adds friend → Automatic share dialog appears
  2. No way to re-share existing friendships
  3. Inconsistent with photo sharing

After:

  1. User adds friend → Friend appears in list with share button
  2. User can share anytime using:
    • Share button tap
    • Long press on friend item
    • Inline share for pending friends
  3. Consistent experience with photo sharing

Benefits

  1. Consistency: Friends sharing now matches photo sharing UX patterns
  2. Control: Users decide when to share friendship invitations
  3. Accessibility: Multiple ways to trigger sharing (button, long press)
  4. Feedback: Clear visual and haptic feedback for all actions
  5. Guidance: Helpful tips and improved empty states

Future Enhancements

  1. ShareModal Integration: Could integrate the existing ShareModal component for richer sharing options
  2. Batch Sharing: Allow sharing multiple friendship invitations at once
  3. Share History: Track and display sharing status/history
  4. Custom Messages: Allow users to customize invitation messages