React Native UI component library for Alfred project
npm install krl-alfred-react-nativeA comprehensive React Native UI component library for the Alfred project by Kiralarsın. This library provides a complete set of modern, accessible, and customizable components built with TypeScript and styled-components.
- 50+ Components: Comprehensive set of UI components for React Native applications
- TypeScript Support: Full TypeScript support with type definitions
- Theme System: Built-in theme system with colors, typography, and spacing
- Storybook Integration: Interactive component documentation and testing
- Accessibility: Components built with accessibility best practices
- Customizable: Highly customizable components with consistent API
- Modern Design: Clean, modern design following current UI/UX trends
- Performance Optimized: Optimized for React Native performance
``bash`
npm install krl-alfred-react-nativeor
yarn add krl-alfred-react-native
Make sure you have these peer dependencies installed in your project:
`bash`
npm install react react-native styled-componentsor
yarn add react react-native styled-components
The library includes a comprehensive theme system with:
`javascript
import React from 'react';
import { View } from 'react-native';
import {
Button,
Alert,
Icon,
Checkbox,
theme
} from 'krl-alfred-react-native';
const MyComponent = () => {
return (
title="Click me"
onPress={() => console.log('Button pressed')}
variant="primary"
/>
message="Operation completed successfully!"
/>
size={24}
color={theme.colors.primary}
/>
onChange={(checked) => console.log('Checkbox:', checked)}
/>
);
};
`
`javascript
import React from 'react';
import { View, Text } from 'react-native';
import { theme } from 'krl-alfred-react-native';
const ThemedComponent = () => {
return (
padding: theme.spacing.md
}}>
Themed Text
);
};
`
`javascript
import { toast } from 'krl-alfred-react-native';
// Show success toast
toast.success('Operation completed successfully!');
// Show error toast
toast.error('Something went wrong!');
// Show info toast
toast.info('Here is some information');
`
To run Storybook for development and component testing:
`bashFor iOS
yarn storybook:ios
$3
To build the library for production:
bash
yarn build
`$3
bash
Start development server
yarn startRun on iOS
yarn iosRun on Android
yarn androidRun on web
yarn webBuild with watch mode
yarn build:watch
`📚 Component Documentation
Each component includes:
- Props Interface: Complete TypeScript interface
- Styled Components: Separate styling files
- Storybook Stories: Interactive examples
- Default Props: Sensible defaults for all props
🎨 Icon Library
The library includes 240+ custom icons covering:
- Social Media: Facebook, Instagram, Twitter, LinkedIn, YouTube, TikTok
- UI Elements: Buttons, forms, navigation, actions
- E-commerce: Shopping, payments, products, reviews
- Communication: Messages, calls, notifications
- System: Settings, security, user management
- Brand Specific: Custom icons for the Alfred platform
🔧 Customization
$3
javascript
import { theme } from 'krl-alfred-react-native';// Access theme values
const customStyle = {
backgroundColor: theme.colors.primary,
fontSize: theme.typography.bodyRegular14.fontSize,
padding: theme.spacing.md,
};
``All components accept custom styles and can be themed using the built-in theme system.
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests and stories
5. Submit a pull request
MIT License - see LICENSE file for details.
This library is developed by Kiralarsın for the Alfred project. It provides a comprehensive set of UI components designed specifically for React Native applications with a focus on performance, accessibility, and developer experience.
For support and questions:
- Contact the development team at Kiralarsın
---
Made with ❤️ by Kiralarsın