@umituz/react-native-ai-creations

@umituz/react-native-ai-creations

AI-generated creations gallery with filtering, sharing, and management for React Native apps.

Features

• Gallery screen with grid/list view
• Filtering by creation type
• Share functionality
• Delete with confirmation
• Pull-to-refresh support
• Home card component for quick access
• Design system integration
• Firestore integration
• TanStack Query for data fetching

Installation

npm install @umituz/react-native-ai-creations

Peer Dependencies

npm install @umituz/react-native-design-system @umituz/react-native-firestore @umituz/react-native-localization @umituz/react-native-sharing @tanstack/react-query firebase

Usage

Gallery Screen

import { CreationsGalleryScreen } from '@umituz/react-native-ai-creations';

// In your navigation
<Stack.Screen
  name="CreationsGallery"
  component={CreationsGalleryScreen}
/>

Home Card

import { CreationsHomeCard } from '@umituz/react-native-ai-creations';

// In your home screen
<CreationsHomeCard
  onPress={() => navigation.navigate('CreationsGallery')}
/>

Custom Hook

import { useCreations, useDeleteCreation } from '@umituz/react-native-ai-creations';

function MyComponent() {
  const { data, isLoading, refetch } = useCreations();
  const deleteMutation = useDeleteCreation();

  // Use data...
}

Configuration

import { CreationsProvider, CreationsConfig } from '@umituz/react-native-ai-creations';

const config: CreationsConfig = {
  collectionPath: 'users/{userId}/creations',
  types: [
    { id: 'santa', label: 'santa.types.santa', icon: '🎅' },
    { id: 'elf', label: 'santa.types.elf', icon: '🧝' },
  ],
  translations: {
    title: 'creations.title',
    empty: 'creations.empty',
    delete: 'creations.delete',
  },
};

<CreationsProvider config={config}>
  <App />
</CreationsProvider>

License

MIT