{"id":27944006,"url":"https://github.com/pspatel5/react-native-app-intro","last_synced_at":"2026-05-01T19:32:40.329Z","repository":{"id":143779717,"uuid":"373815391","full_name":"PSPatel5/react-native-app-intro","owner":"PSPatel5","description":"A fully customizable React Native component aimed to beautify the onboarding experience.","archived":false,"fork":false,"pushed_at":"2021-06-10T06:15:56.000Z","size":14238,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T18:06:55.924Z","etag":null,"topics":["material-intro-screen","onboarding","react-native","react-native-intro","react-native-onboard"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@pspatel/react-native-app-intro","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PSPatel5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-06-04T11:10:35.000Z","updated_at":"2024-01-17T11:39:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0b9a23d-338f-4d34-b9a8-1db46d060174","html_url":"https://github.com/PSPatel5/react-native-app-intro","commit_stats":null,"previous_names":["parth-coditas/react-native-app-intro"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSPatel5%2Freact-native-app-intro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSPatel5%2Freact-native-app-intro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSPatel5%2Freact-native-app-intro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PSPatel5%2Freact-native-app-intro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PSPatel5","download_url":"https://codeload.github.com/PSPatel5/react-native-app-intro/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252874100,"owners_count":21817757,"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":["material-intro-screen","onboarding","react-native","react-native-intro","react-native-onboard"],"created_at":"2025-05-07T12:20:17.317Z","updated_at":"2026-05-01T19:32:40.246Z","avatar_url":"https://github.com/PSPatel5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native App Intro\n\n![React Native App Intro License](https://img.shields.io/github/license/Parth-coditas/react-native-app-intro)\n![React Native App Intro Version](https://img.shields.io/badge/version-v1.1.0-blue)\n![React Native App Intro Release](https://img.shields.io/badge/release-june-yellow)\n![React Native App Intro Top Language](https://img.shields.io/github/languages/top/Parth-coditas/react-native-app-intro)\n![React Native App Intro TypeScript](https://img.shields.io/badge/language-ts-blue)\n\nThis project is a [React Native](https://facebook.github.io/react-native/) onboarding library that can be used to beautify user onboarding experience.\n\nThe library is completely written in typescript and highly customizable.\n\n## Demo\n\n|                                                                                 Expand                                                                                  |                                                                               Scale Dot                                                                               |                                                                               Slide Dot                                                                               |                                                                                Slide Border                                                                                 |\n| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| \u003cimg src=\"https://raw.githubusercontent.com/Parth-coditas/react-native-app-intro/main/.github/Expand%20animation.gif\" height=\"450\" width=\"600\" alt=\"Expand Animation\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Parth-coditas/react-native-app-intro/main/.github/Scaling%20Dot.gif\" height=\"450\" width=\"600\" alt=\"Scale dot Animation\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Parth-coditas/react-native-app-intro/main/.github/Sliding%20Dot.gif\" height=\"450\" width=\"600\" alt=\"Slide dot Animation\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Parth-coditas/react-native-app-intro/main/.github/Sliding%20Border.gif\" height=\"450\" width=\"600\" alt=\"Slide border Animation\"/\u003e |\n\n## Library Highlights\n\nSome of the key highlights of this library is as below:\n\n- Beautiful pagination animations.\n- Custom pagination component support.\n- Custom Next and Skip button component support.\n- Completely written in typescript.\n- Cross-platform support.\n- Highly customizable.\n\n## Properties\n\n##### Interfaces\n\n```typescript\n// page indicator animation whlie changing screen.\ntype animationType =\n  | \"sliding-border\"\n  | \"sliding-dot\"\n  | \"scaling-dot\"\n  | \"expanding\";\n\ninterface renderSkipButtonProps {\n  activeIndex: number;\n  totalSlides: number;\n  goToSlide: (slideNumber: number) =\u003e void;\n  onSkipPress: () =\u003e void; // same function that you sent via BottomProps\n}\n\ninterface renderNextButtonProps {\n  activeIndex: number;\n  totalSlides: number;\n  goToSlide: (slideNumber: number) =\u003e void;\n  isLastPage: boolean;\n  onNextPress: (activeIndex: number, nextIndex: number) =\u003e void; // same function that you sent via BottomProps\n}\n\n// Bottom Button Props\ninterface BottomProps {\n  showSkipButton?: boolean;\n  skipButtonText?: string;\n  nextButtonText?: string;\n  skipTextStyle?: StyleProp\u003cTextStyle\u003e;\n  nextTextStyle?: StyleProp\u003cTextStyle\u003e;\n  skipContainerStyle?: StyleProp\u003cViewStyle\u003e;\n  nextContainerStyle?: StyleProp\u003cViewStyle\u003e;\n  bottomContainerStyle?: StyleProp\u003cViewStyle\u003e;\n  onSkipPress?: () =\u003e void;\n  onNextPress?: (activeIndex: number, nextIndex: number) =\u003e void;\n  onDonePress?: () =\u003e void;\n  renderSkipButton?: (props: renderSkipButtonProps) =\u003e ReactNode; // To render custom Skip button. Refer RenderSkipButtonProps Interface above for further details.\n  renderNextButton?: (props: renderNextButtonProps) =\u003e ReactNode; // To render custom Next button. Refer RenderNextButtonProps Interface above for further details.\n}\n\n// Pagination component props\ninterface PaginationProps {\n  activeDotColor?: string;\n  inactiveDotColor?: string;\n  dotSize?: number;\n  dotSpacing?: number;\n  animationType?: animationType;\n  dotStyle?: StyleProp\u003cViewStyle\u003e;\n  containerStyle?: StyleProp\u003cViewStyle\u003e;\n  activeDotStyle?: StyleProp\u003cViewStyle\u003e;\n}\n\n// Page Component Props\ninterface PageProps {\n  title: string;\n  image: ImageSourcePropType;\n  description?: string;\n  containerStyle?: StyleProp\u003cViewStyle\u003e;\n  titleStyle?: StyleProp\u003cTextStyle\u003e;\n  imageStyle?: StyleProp\u003cImageStyle\u003e;\n  descriptionStyle?: StyleProp\u003cTextStyle\u003e;\n}\n```\n\n|  Property Name   |                                     Expected Type                                      | Default Value | Required |\n| :--------------: | :------------------------------------------------------------------------------------: | :-----------: | :------: |\n|  showPagination  |                                        boolean                                         |     false     |  -   |\n| paginationProps  | [Pagination Props](https://github.com/Parth-coditas/react-native-app-intro#interfaces) |   undefined   |  -   |\n|   buttonProps    |   [Bottom Props](https://github.com/Parth-coditas/react-native-app-intro#interfaces)   |   undefined   |  -   |\n| renderPagination |                ( activeIndex:number , totalSlides:number ) =\u003e ReactNode                |   undefined   |  -   |\n|  onSlideChange   |                   (currentIndex: number, prevIndex: number) =\u003e void                    |   undefined   |  -   |\n\n## Start\n\nTo add this library, simply run :\n\n```bash\n$ npm install @pspatel/react-native-app-intro\n```\n\nor\n\n```bash\n$ yarn add @pspatel/react-native-app-intro\n```\n\n## Usage\n\n```javascript\nimport React from \"react\";\nimport { View, Text } from \"react-native\";\nimport { IntroSlider } from \"@pspatel/react-native-app-intro\";\n\nconst Screen = ({ title }) =\u003e {\n  return (\n    \u003cView style={{ flex: 1, justifyContent: \"center\", alignItems: \"center\" }}\u003e\n      \u003cText\u003e{title}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cIntroSlider\n      showPagination\n      buttonProps={{\n        showSkipButton: true,\n      }}\n    \u003e\n      \u003cIntroSlider.Page\n        title={\"Any Title\"}\n        image={require(\"./path-to-image\")}\n        desciption={\"screen description\"}\n        // Read more about supported props in interfaces section\n      /\u003e\n      \u003cScreen title={\"Screen 2\"} /\u003e\n      \u003cScreen title={\"Screen 3\"} /\u003e\n    \u003c/IntroSlider\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpspatel5%2Freact-native-app-intro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpspatel5%2Freact-native-app-intro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpspatel5%2Freact-native-app-intro/lists"}