Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification
npm install @umituz/react-native-settingsComprehensive settings management for React Native apps with modular domain-based architecture.
Complete settings solution with pre-built screens, components, and state management for React Native applications.
Main package entry: src/index.ts
``bash`
npm install @umituz/react-native-settings
Required packages (check package.json for versions):
- zustand
- @umituz/react-native-storage
- @umituz/react-native-design-system
- @umituz/react-native-localization
- @react-navigation/native
- @react-navigation/stack
- react-native-safe-area-context
The package follows Domain-Driven Design (DDD) with four layers:
1. Domain Layer: Business logic and entities
2. Application Layer: Interfaces and orchestration
3. Infrastructure Layer: Data persistence
4. Presentation Layer: UI components and screens
1. Import components from @umituz/react-native-settings
2. Use pre-built screens for standard settings
3. Customize via configuration objects
4. Extend with custom sections when needed
5. Follow design system for consistency
Each feature domain is self-contained:
- about/: App information and versionappearance/
- : Theme and color managementlegal/
- : Legal documents and policiesdisclaimer/
- : Legal notices and warningsfeedback/
- : User feedback collectionfaqs/
- : FAQ managementrating/
- : Rating systemvideo-tutorials/
- : Video tutorialscloud-sync/
- : Cloud synchronizationdev/
- : Development utilities
- Create custom settings screens from scratch
- Duplicate existing component functionality
- Mix settings logic with business logic
- Hardcode feature availability
- Bypass feature detection system
- Access storage repositories directly from UI
- Create custom settings item components
- Ignore design system tokens
- Mix UI and data layers inappropriately
- Modify internal package files
- Override core component behavior
- Skip type checking
- Use deprecated APIs
- Ignore accessibility requirements
- Bypass error boundaries
- Hardcode colors or spacing
- Create circular dependencies between layers
- Over-complicating configuration
- Creating one-off solutions
- Inconsistent styling
- Skipping proper error handling
- Not testing on both platforms
- Ignoring performance optimization
- Bypassing TypeScript strict mode
- Use TypeScript strict mode
- Import from package exports
- Follow component documentation strategies
- Reference implementation files for current patterns
- Use design system tokens for styling
- Handle errors gracefully
- Support both iOS and Android
- Include proper accessibility labels
- Test with feature flags
- Follow DDD layer separation
- Use SettingsScreen for main settings UI
- Use SettingsItemCard for all settings items
- Normalize configuration before use
- Handle loading and error states
- Provide proper TypeScript types
- Export types for reuse
- Follow naming conventions
- Document custom components
- Test all new features
- Maintain backward compatibility
- Use auto-detection for features
- Group related settings together
- Provide meaningful section titles
- Support both modal and push navigation
- Include user profile for authenticated users
- Add custom sections via config
- Use feature flags appropriately
- Optimize performance with memoization
- Follow AI agent guidelines
- Keep documentation up to date
File: src/index.ts
Screens:
- SettingsScreen: Main settings screensrc/presentation/screens/SettingsScreen.tsx
- Implementation: SETTINGS_SCREEN_GUIDE.md
- Documentation:
Components:
- SettingsItemCard: Reusable settings itemsrc/presentation/components/SettingsItemCard/SettingsItemCard.tsx
- Implementation: src/presentation/components/SettingsItemCard/STRATEGY.md
- Strategy:
- SettingsSection: Section containersrc/presentation/components/SettingsSection/SettingsSection.tsx
- Implementation:
- SettingsContent: Content composersrc/presentation/screens/components/SettingsContent/SettingsContent.tsx
- Implementation:
Hooks:
- useSettings: Main settings hooksrc/presentation/hooks/useSettings.ts
- Implementation:
- useFeatureDetection: Feature detectionsrc/presentation/screens/hooks/useFeatureDetection.ts
- Implementation:
Each domain has its own components:
Appearance:
- Screen: src/domains/appearance/presentation/screens/AppearanceScreen.tsxsrc/domains/appearance/presentation/components/
- Components: src/domains/appearance/hooks/
- Hooks:
About:
- Screen: src/domains/about/presentation/screens/AboutScreen.tsxsrc/domains/about/presentation/components/
- Components: src/domains/about/presentation/hooks/
- Hooks:
Other Domains:
- Legal: src/domains/legal/src/domains/disclaimer/
- Disclaimer: src/domains/feedback/
- Feedback: src/domains/faqs/
- FAQs: src/domains/rating/
- Rating: src/domains/video-tutorials/
- Video Tutorials: src/domains/cloud-sync/
- Cloud Sync: src/domains/dev/
- Dev:
Type definition: src/presentation/screens/types/SettingsConfig.ts
Configuration structure:
- appearance: Theme settingslanguage
- : Language selectionnotifications
- : Notification preferencesabout
- : App informationlegal
- : Legal documentsdisclaimer
- : Legal noticesuserProfile
- : User profile displayfeedback
- : Feedback systemrating
- : Rating featurefaqs
- : FAQ accesssubscription
- : Subscription/upgradewallet
- : Wallet/paymentcustomSections
- : App-specific sections
Use feature flags to control visibility:
- true: Always show featurefalse
- : Never show feature'auto'
- : Auto-detect based on navigation
1. Read Strategy Documentation First
- Check STRATEGY.md files in component directoriesAI_AGENT_GUIDELINES.md
- Review
- Understand restrictions and rules
2. Reference Implementation Files
- Check file paths in documentation
- Look at similar existing implementations
- Follow established patterns
3. No Code Examples
- Documentation contains strategy, not syntax
- Reference implementation files directly
- File paths stay valid when code changes
4. Follow Component Structure
- Use existing components from package
- Don't recreate what already exists
- Extend via configuration, not modification
5. Check Restrictions Before Coding
- Review what's forbidden
- Verify rules to follow
- Ask if unclear
Adding Settings Screen:
Reference: SETTINGS_SCREEN_GUIDE.md
- Use SettingsScreen component
- Configure via SettingsConfig
- Don't build from scratch
Adding Settings Item:
Reference: src/presentation/components/SettingsItemCard/STRATEGY.md
- Use SettingsItemCard component
- Follow props interface
- Don't create custom items
Adding Domain Feature:
Reference: Similar domain README
- Follow domain structure
- Implement required layers
- Document with strategy format
- README.md: This file - package overviewDOCUMENTATION_TEMPLATE.md
- : Template for new docsAI_AGENT_GUIDELINES.md
- : AI coding guidelinesSETTINGS_SCREEN_GUIDE.md
- : Screen strategyARCHITECTURE.md
- : Architecture overviewTESTING.md
- : Testing guide
Each domain has README.md with:
- Purpose and file paths
- Strategy for usage
- Restrictions (what not to do)
- Rules (what must be done)
- Component references
- AI agent guidelines
Each component directory may contain:
- README.md: Component referenceSTRATEGY.md
- : Detailed strategy guide
- Implementation file with TypeScript types
`typescript
// From package
import { ComponentName } from '@umituz/react-native-settings';
// Types
import type { SettingsConfig, UserProfile } from '@umituz/react-native-settings';
`
``
src/
├── domains/ # Feature domains
│ ├── about/
│ ├── appearance/
│ ├── legal/
│ └── ...
├── presentation/ # UI layer
│ ├── components/ # Shared components
│ ├── screens/ # Screens
│ ├── hooks/ # Hooks
│ └── navigation/ # Navigation
├── application/ # Interfaces
├── infrastructure/ # Data layer
└── index.ts # Package exports
- Testing: TESTING.md
- AI Guidelines: AI_AGENT_GUIDELINES.md
- Settings Screen: SETTINGS_SCREEN_GUIDE.md
- Documentation Template: DOCUMENTATION_TEMPLATE.md
- Migration: DOCUMENTATION_MIGRATION.md$3
- Contributing: CONTRIBUTING.md
- Code of Conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
- Changelog: CHANGELOG.md`MIT
See package.json for version information.