{"id":21942666,"url":"https://github.com/zonayedpca/react-native-welcome","last_synced_at":"2025-04-22T18:44:35.280Z","repository":{"id":35459010,"uuid":"188687595","full_name":"zonayedpca/react-native-welcome","owner":"zonayedpca","description":"Simple way to add interactive user instruction to let your user know about your app before start using it...","archived":false,"fork":false,"pushed_at":"2023-01-04T11:41:51.000Z","size":2380,"stargazers_count":9,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-29T16:21:19.987Z","etag":null,"topics":["react-native","react-native-instruction","react-native-slider","react-native-welcome","react-native-welcome-screen"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-welcome","language":"JavaScript","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/zonayedpca.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}},"created_at":"2019-05-26T13:39:10.000Z","updated_at":"2023-09-14T17:48:45.000Z","dependencies_parsed_at":"2023-01-15T21:45:34.257Z","dependency_job_id":null,"html_url":"https://github.com/zonayedpca/react-native-welcome","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonayedpca%2Freact-native-welcome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonayedpca%2Freact-native-welcome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonayedpca%2Freact-native-welcome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zonayedpca%2Freact-native-welcome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zonayedpca","download_url":"https://codeload.github.com/zonayedpca/react-native-welcome/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249834787,"owners_count":21331989,"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":["react-native","react-native-instruction","react-native-slider","react-native-welcome","react-native-welcome-screen"],"created_at":"2024-11-29T03:26:02.517Z","updated_at":"2025-04-22T18:44:35.228Z","avatar_url":"https://github.com/zonayedpca.png","language":"JavaScript","readme":"# react-native-welcome\n\n[![Build Status](https://travis-ci.com/zonayedpca/react-native-welcome.svg?token=LXmMpgxtChnPA2Z3yHVr\u0026branch=master)](https://travis-ci.com/zonayedpca/react-native-welcome)\n\nWelcome your user with useful instructions. Check out these screenshots:\n\n![Welcome Screen](https://user-images.githubusercontent.com/18544717/67630621-a9e80b00-f8b0-11e9-8ac6-79a78604aee0.jpg) ![Middle Screen](https://user-images.githubusercontent.com/18544717/67630623-a9e80b00-f8b0-11e9-8c01-2369dfe37f60.jpg) ![Just Another Screen](https://user-images.githubusercontent.com/18544717/67630624-a9e80b00-f8b0-11e9-9588-6cf2aa2b3b61.jpg) ![As many as you want](https://user-images.githubusercontent.com/18544717/67630933-03eacf80-f8b5-11e9-9bed-df517609635d.jpg) ![Last Screen](https://user-images.githubusercontent.com/18544717/67630626-aa80a180-f8b0-11e9-9a3e-13ddd4aeda3b.jpg)\n\n## Getting started\n\nSimply add it as a dependency:\n\n`$ npm install --save react-native-welcome`\n\nOr if you're using yarn:\n\n`$ yarn add react-native-welcome`\n\nThat's it! You're ready to go!\n\n## Usage\n\nSimply import it:\n\n```javascript\nimport Welcome from \"react-native-welcome\";\n```\n\nAnd then Use it in a screen, you must need to set your screen so that it can take entire screen. It will take as much as it gets:\n\n```javascript\n\u003cWelcome /\u003e\n```\n\n### Props\n\nIt has a default starter appearance. But you can always modify it as much as you want by utilizing these props:\n\n- `bgColor`: Defines the color of entire background. Default is set to `#fff`\n\n- children: Pass the elements as `children` to show them on the screen individually.\n\n```javascript\n\u003cWelcome\u003e\n  \u003cText\u003eWelcome!!!\u003c/Text\u003e\n  \u003cText\u003ePeace be upon you\u003c/Text\u003e\n  \u003cText\u003eMake something great\u003c/Text\u003e\n  \u003cText\u003ePass your elements as children to control this area\u003c/Text\u003e\n  \u003cText\u003eOnce you are done, can skip it\u003c/Text\u003e\n\u003c/Welcome\u003e\n```\n\n- `elementContainerStyle`: Defines the styling of the each elements' container mentioned above. Defaults to:\n\n```javascript\n{{\n    flex: 1,\n    width: SCREEN_WIDTH,\n}}\n```\n\n- `barBgColor`: The background color of the StatusBar. Defaults to `#eee`\n\n- `barStyle`: The style of the StatusBar content. Defaults to `dark-content`. Also can be `light-content`(React native defaults)\n\n- `showIndicator`: Show indicators for the each screens. Defaults to `false`, can be `true`\n\n- `onDone`: is invoked when the user goes at the last screen and choose to finish the welcome screens\n\n- `navStyle`: Defines the styling for the nav for the screens. Defaults to:\n\n```javascript\n{{\n    padding: 20,\n    borderTopWidth: 2,\n    backgroundColor: \"#eee\",\n    borderColor: \"#333\"\n}}\n```\n\n- `prevArrow`: Defines the element for previous screen button. Can be anything.\n\n- `nextArrow`: Defines the element for screen screen button. Can be anything.\n\n- `doneIcon`: Defines the element for finished screen button. Can be anything.\n\n- `dotColor`: Defines the color of the active dots in the nav. Defaults to `#fff`\n\n- `dotBg`: Defines the color of the inactive dots in the nav. Defaults to `#000`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzonayedpca%2Freact-native-welcome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzonayedpca%2Freact-native-welcome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzonayedpca%2Freact-native-welcome/lists"}