{"id":24173113,"url":"https://github.com/haxcod/expo-ui-components","last_synced_at":"2026-02-09T11:32:57.988Z","repository":{"id":269915228,"uuid":"908807241","full_name":"haxcod/expo-ui-components","owner":"haxcod","description":"Provides ui components for expo app","archived":false,"fork":false,"pushed_at":"2025-01-10T14:40:13.000Z","size":193,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-10T16:30:10.133Z","etag":null,"topics":["npm-package","packages"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/expo-ui-components","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/haxcod.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-27T02:49:37.000Z","updated_at":"2025-01-10T14:40:16.000Z","dependencies_parsed_at":"2024-12-27T06:24:28.664Z","dependency_job_id":"9f9d8967-7b8e-424f-a3f6-06ef36708714","html_url":"https://github.com/haxcod/expo-ui-components","commit_stats":null,"previous_names":["haxcod/expo-ui-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxcod%2Fexpo-ui-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxcod%2Fexpo-ui-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxcod%2Fexpo-ui-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxcod%2Fexpo-ui-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haxcod","download_url":"https://codeload.github.com/haxcod/expo-ui-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233678688,"owners_count":18712984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["npm-package","packages"],"created_at":"2025-01-13T01:14:29.344Z","updated_at":"2025-09-20T17:32:44.217Z","avatar_url":"https://github.com/haxcod.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# expo-ui-components\n\nThis library provides reusable and customizable UI components for React Native projects. It is designed to streamline the development process and ensure consistency across applications.\n\n---\n\n## Installation\n\nUse the package manager [npm](https://www.npmjs.com/) to install the library.\n\n```bash\nnpm i expo-ui-components\n```\n\n---\n\n## Current Components\n\n### 1. SplashScreenView\n\nThe `SplashScreenView` component provides a customizable splash screen for React Native applications with animations, gradients, and a skip button.\n\n#### Props\n\n- **`logo`** (any, optional): Image source for the logo.\n- **`backgroundColor`** (string, optional): Background color of the splash screen (default: `#000`).\n- **`gradientColors`** (string[], optional): Array of gradient colors for the background (default: `[\"#000\", \"#333\"]`).\n- **`text`** (string, optional): Text to display (default: `\"Welcome\"`).\n- **`textColor`** (string, optional): Color of the text (default: `#fff`).\n- **`textFontSize`** (number, optional): Font size of the text (default: `24`).\n- **`duration`** (number, optional): Duration of the splash screen in milliseconds (default: `3000`).\n- **`onFinish`** (function, optional): Callback function to execute when the splash screen finishes.\n- **`animationType`** (`\"fade\"` | `\"slide\"`, optional): Type of animation (default: `\"fade\"`).\n- **`showSkip`** (boolean, optional): Whether to show a skip button (default: `true`).\n\n#### Example Usage\n\n```javascript\nimport React from \"react\";\nimport SplashScreenView from \"expo-ui-components\";\n\nconst App = () =\u003e {\n  const handleFinish = () =\u003e {\n    console.log(\"Splash Screen Finished\");\n  };\n\n  return (\n    \u003cSplashScreenView\n      logo={require(\"./assets/logo.png\")}\n      backgroundColor=\"#123456\"\n      gradientColors={[\"#123456\", \"#abcdef\"]}\n      text=\"Welcome to My App\"\n      textColor=\"#ffffff\"\n      textFontSize={28}\n      duration={4000}\n      onFinish={handleFinish}\n      animationType=\"slide\"\n      showSkip={true}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n---\n\n### 2. TextView\n\nThe `TextView` component is a simple and customizable component for displaying text.\n\n#### Props\n\n- **`text`** (string, required): The content to display.\n- **`style`** (TextStyle, optional): Custom styles for the text.\n- **`onPress`** (function, optional): Function to execute when the text is pressed.\n\n#### Example Usage\n\n```javascript\nimport { TextView } from \"expo-ui-components\";\n\n\u003cTextView\n  text=\"Hello, World!\"\n  style={{ fontSize: 18, color: \"blue\" }}\n  onPress={() =\u003e alert(\"Text pressed!\")}\n/\u003e;\n```\n\n---\n\n### 3. ButtonView\n\nThe `ButtonView` component is a versatile button with customizable styles and states.\n\n#### Props\n\n- **`title`** (string, required): The text to display on the button.\n- **`onPress`** (function, required): Function to execute when the button is pressed.\n- **`buttonStyle`** (ViewStyle, optional): Custom styles for the button container.\n- **`textStyle`** (TextStyle, optional): Custom styles for the button text.\n- **`disabled`** (boolean, optional): Disables the button if set to `true`.\n\n#### Example Usage\n\n```javascript\nimport { ButtonView } from \"expo-ui-components\";\n\n\u003cButtonView\n  title=\"Click Me\"\n  buttonStyle={{ backgroundColor: \"green\", padding: 10 }}\n  textStyle={{ color: \"white\", fontSize: 16 }}\n  onPress={() =\u003e alert(\"Button pressed!\")}\n/\u003e;\n```\n\n---\n\n### 4. CardView\n\nThe `CardView` component is a reusable container with customizable styles.\n\n#### Props\n\n- **`children`** (ReactNode, required): Content inside the card.\n- **`onPress`** (function, optional): Callback for touch interaction (enabled only if `isClickable` is `true`).\n- **`cardStyle`** (ViewStyle, optional): Custom styles for the card container.\n- **`isClickable`** (boolean, optional): Enables touch interactions (default: `false`).\n- **`activeOpacity`** (number, optional): Opacity when the card is pressed (default: `0.7`).\n\n#### Example Usage\n\n```javascript\nimport { CardView } from \"expo-ui-components\";\n\n\u003cCardView\n  cardStyle={{ backgroundColor: \"#fff\" }}\n  isClickable\n  onPress={() =\u003e alert(\"Card Pressed!\")}\n/\u003e;\n```\n\n---\n\n### 5. HeaderView\n\nThe `HeaderView` component is a customizable header for React Native applications.\n\n#### Props\n\n- **`title`** (string, required): The text displayed as the title of the header.\n- **`onBackPress`** (function, required): Callback for back button press.\n- **`isMenu`** (boolean, optional): Whether to display a menu icon.\n- **`onMenuPress`** (function, optional): Callback for menu button press.\n- **`isSearch`** (boolean, optional): Whether to display a search icon.\n- **`onSearchPress`** (function, optional): Callback for search button press.\n- **`backgroundColor`** (string, optional): Header background color.\n- **`titleStyle`** (TextStyle, optional): Custom styles for the title text.\n- **`isElevated`** (boolean, optional): Adds elevation/shadow to the header.\n\n#### Example Usage\n\n```javascript\nimport { HeaderView } from \"expo-ui-components\";\n\n\u003cHeaderView\n  title=\"Home\"\n  onBackPress={() =\u003e alert(\"Back Pressed!\")}\n  isMenu\n  onMenuPress={() =\u003e alert(\"Menu Pressed!\")}\n  backgroundColor=\"#4CAF50\"\n/\u003e;\n```\n\n---\n\n## Upcoming Components\n\n- **InputField**: A styled input component for text entry.\n- **ImageView**: A customizable image component with placeholders and loading indicators.\n\n---\n\n## Usage\n\nImport and use the available components in your React Native project:\n\n```javascript\nimport {\n  SplashScreenView,\n  TextView,\n  ButtonView,\n  CardView,\n  HeaderView,\n} from \"expo-ui-components\";\n```\n\n---\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n---\n\nLet me know if additional sections need to be added!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaxcod%2Fexpo-ui-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaxcod%2Fexpo-ui-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaxcod%2Fexpo-ui-components/lists"}