https://github.com/haxcod/expo-ui-components
Provides ui components for expo app
https://github.com/haxcod/expo-ui-components
npm-package packages
Last synced: 5 months ago
JSON representation
Provides ui components for expo app
- Host: GitHub
- URL: https://github.com/haxcod/expo-ui-components
- Owner: haxcod
- Created: 2024-12-27T02:49:37.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-10T14:40:13.000Z (over 1 year ago)
- Last Synced: 2025-01-10T16:30:10.133Z (over 1 year ago)
- Topics: npm-package, packages
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/expo-ui-components
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# expo-ui-components
This library provides reusable and customizable UI components for React Native projects. It is designed to streamline the development process and ensure consistency across applications.
---
## Installation
Use the package manager [npm](https://www.npmjs.com/) to install the library.
```bash
npm i expo-ui-components
```
---
## Current Components
### 1. SplashScreenView
The `SplashScreenView` component provides a customizable splash screen for React Native applications with animations, gradients, and a skip button.
#### Props
- **`logo`** (any, optional): Image source for the logo.
- **`backgroundColor`** (string, optional): Background color of the splash screen (default: `#000`).
- **`gradientColors`** (string[], optional): Array of gradient colors for the background (default: `["#000", "#333"]`).
- **`text`** (string, optional): Text to display (default: `"Welcome"`).
- **`textColor`** (string, optional): Color of the text (default: `#fff`).
- **`textFontSize`** (number, optional): Font size of the text (default: `24`).
- **`duration`** (number, optional): Duration of the splash screen in milliseconds (default: `3000`).
- **`onFinish`** (function, optional): Callback function to execute when the splash screen finishes.
- **`animationType`** (`"fade"` | `"slide"`, optional): Type of animation (default: `"fade"`).
- **`showSkip`** (boolean, optional): Whether to show a skip button (default: `true`).
#### Example Usage
```javascript
import React from "react";
import SplashScreenView from "expo-ui-components";
const App = () => {
const handleFinish = () => {
console.log("Splash Screen Finished");
};
return (
);
};
export default App;
```
---
### 2. TextView
The `TextView` component is a simple and customizable component for displaying text.
#### Props
- **`text`** (string, required): The content to display.
- **`style`** (TextStyle, optional): Custom styles for the text.
- **`onPress`** (function, optional): Function to execute when the text is pressed.
#### Example Usage
```javascript
import { TextView } from "expo-ui-components";
alert("Text pressed!")}
/>;
```
---
### 3. ButtonView
The `ButtonView` component is a versatile button with customizable styles and states.
#### Props
- **`title`** (string, required): The text to display on the button.
- **`onPress`** (function, required): Function to execute when the button is pressed.
- **`buttonStyle`** (ViewStyle, optional): Custom styles for the button container.
- **`textStyle`** (TextStyle, optional): Custom styles for the button text.
- **`disabled`** (boolean, optional): Disables the button if set to `true`.
#### Example Usage
```javascript
import { ButtonView } from "expo-ui-components";
alert("Button pressed!")}
/>;
```
---
### 4. CardView
The `CardView` component is a reusable container with customizable styles.
#### Props
- **`children`** (ReactNode, required): Content inside the card.
- **`onPress`** (function, optional): Callback for touch interaction (enabled only if `isClickable` is `true`).
- **`cardStyle`** (ViewStyle, optional): Custom styles for the card container.
- **`isClickable`** (boolean, optional): Enables touch interactions (default: `false`).
- **`activeOpacity`** (number, optional): Opacity when the card is pressed (default: `0.7`).
#### Example Usage
```javascript
import { CardView } from "expo-ui-components";
alert("Card Pressed!")}
/>;
```
---
### 5. HeaderView
The `HeaderView` component is a customizable header for React Native applications.
#### Props
- **`title`** (string, required): The text displayed as the title of the header.
- **`onBackPress`** (function, required): Callback for back button press.
- **`isMenu`** (boolean, optional): Whether to display a menu icon.
- **`onMenuPress`** (function, optional): Callback for menu button press.
- **`isSearch`** (boolean, optional): Whether to display a search icon.
- **`onSearchPress`** (function, optional): Callback for search button press.
- **`backgroundColor`** (string, optional): Header background color.
- **`titleStyle`** (TextStyle, optional): Custom styles for the title text.
- **`isElevated`** (boolean, optional): Adds elevation/shadow to the header.
#### Example Usage
```javascript
import { HeaderView } from "expo-ui-components";
alert("Back Pressed!")}
isMenu
onMenuPress={() => alert("Menu Pressed!")}
backgroundColor="#4CAF50"
/>;
```
---
## Upcoming Components
- **InputField**: A styled input component for text entry.
- **ImageView**: A customizable image component with placeholders and loading indicators.
---
## Usage
Import and use the available components in your React Native project:
```javascript
import {
SplashScreenView,
TextView,
ButtonView,
CardView,
HeaderView,
} from "expo-ui-components";
```
---
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
---
Let me know if additional sections need to be added!