1.0.0 β€’ Published 10 months ago

@bpsmartdesign/nativesmart-ui v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

NativeSmart-UI

NativeSmart-UI is a React Native UI library that provides pre-built, customizable, and reusable components to help you build beautiful, consistent, and accessible mobile applications efficiently.

Features

  • πŸ›  Pre-built Components: A set of high-quality components like buttons, inputs, modals, etc.
  • 🎨 Customizable: Easily override styles and create custom themes.
  • πŸ“± Responsive: Optimized for both Android and iOS.
  • ⚑ Performance: Designed with performance and scalability in mind.
  • πŸš€ Easy to use: Simple APIs for rapid development.

Installation

To use NativeSmart-UI in your React Native project, simply install it using npm or yarn:

npm install @bpsmartdesign/nativesmart-ui

or

yarn add @bpsmartdesign/nativesmart-ui

Make sure you have the necessary peer dependencies installed, such as React Native and React:

npm install react-native react

Usage

Here’s a quick example of how you can use the NativeSmart-UI components in your app:

import React from 'react';
import { View } from 'react-native';
import { Button, Input } from '@bpsmartdesign/nativesmart-ui';

const MyApp = () => {
  return (
    <View style={{ padding: 20 }}>
      <Input placeholder="Enter your name" />
      <Button title="Submit" onPress={() => alert('Submitted!')} />
    </View>
  );
};

export default MyApp;

Available Components

ComponentDescription
ButtonCustomizable button component
InputText input component
ModalPre-styled modal component
CardCard component
...More components coming soon

Theming and Customization

You can easily customize the components or create your own theme. Here's an example:

import React from 'react';
import { ThemeProvider } from '@bpsmartdesign/nativesmart-ui';
import { Button } from '@bpsmartdesign/nativesmart-ui';

const customTheme = {
  colors: {
    primary: '#ff6347',
    secondary: '#4caf50',
  },
  button: {
    borderRadius: 10,
  },
};

const MyApp = () => {
  return (
    <ThemeProvider theme={customTheme}>
      <Button title="Custom Button" />
    </ThemeProvider>
  );
};

export default MyApp;

Contributing

We welcome contributions! Feel free to submit issues, feature requests, and pull requests. Check out our contribution guidelines for more information.

  1. Fork the repository
  2. Create a new branch
  3. Make your changes
  4. Submit a pull request

License

This project is licensed under the MIT License.