{"id":4346,"url":"https://github.com/maitrungduc1410/react-native-new-feature","last_synced_at":"2025-06-25T06:37:57.399Z","repository":{"id":38895001,"uuid":"262257894","full_name":"maitrungduc1410/react-native-new-feature","owner":"maitrungduc1410","description":"Simple and lightweight What's New style component that shows your React Native app new features","archived":false,"fork":false,"pushed_at":"2023-10-21T03:14:49.000Z","size":6096,"stargazers_count":20,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T02:04:00.310Z","etag":null,"topics":["react-native","react-native-","react-native-new-feature","react-native-whats-new"],"latest_commit_sha":null,"homepage":"","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/maitrungduc1410.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,"roadmap":null,"authors":null}},"created_at":"2020-05-08T07:37:16.000Z","updated_at":"2024-10-18T19:19:48.000Z","dependencies_parsed_at":"2024-01-08T01:02:54.271Z","dependency_job_id":"cd02c2d5-ebf4-4e83-8211-a51c2c1dd65e","html_url":"https://github.com/maitrungduc1410/react-native-new-feature","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":"0.11111111111111116","last_synced_commit":"4075b3f4922d1339b023cb165eaaacfb24822c23"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/maitrungduc1410/react-native-new-feature","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-new-feature","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-new-feature/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-new-feature/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-new-feature/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maitrungduc1410","download_url":"https://codeload.github.com/maitrungduc1410/react-native-new-feature/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Freact-native-new-feature/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261416261,"owners_count":23155035,"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-","react-native-new-feature","react-native-whats-new"],"created_at":"2024-01-05T20:17:09.040Z","updated_at":"2025-06-25T06:37:57.366Z","avatar_url":"https://github.com/maitrungduc1410.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"\u003ch1 align=\"center\"\u003e\n  React Native New Feature\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  ☀️Simple and lightweight What's New style component that shows your React Native app new features☀️\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-new-feature\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/react-native-new-feature\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/react-native-new-feature\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-native-new-feature\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/maitrungduc1410/react-native-new-feature/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/maitrungduc1410/react-native-new-feature\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/maitrungduc1410/react-native-new-feature\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/maitrungduc1410/react-native-new-feature?style=social\" /\u003e\n  \u003c/a\u003e\n  \u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./demo_android.gif\" style=\"margin-right: 30px;\" /\u003e\n  \u003cimg src=\"./demo_ios.gif\" /\u003e\n\u003c/div\u003e\n\u003ch2 align=\"center\"\u003e\n  If you like this project, encourage me by giving a ⭐️. Happy hacking\n\u003c/h2\u003e\n\n# Table of Contents\n1. [Installation](#Installation)\n2. [Basic usage](#basic-usage)\n3. [List animations](#list-animations)\n4. [Customization](#Customization)\n    1. [TitleView](#TitleView)\n    2. [ListItem](#ListItem)\n    3. [Detail Button](#Detail-Button)\n    4. [Completion Button](#Completion-Button)\n    5. [Margin and padding](#margin-and-padding)\n    6. [Animations](#Animations)\n5. [Orientation change support](#Orientation-change-support)\n6. [Demo](#Demo)\n7. [Contributing](#Contributing)\n\n# Installation\nWith npm:\n`$ npm install react-native-new-feature --save`\n\nWith yarn:\n`$ yarn add react-native-new-feature`\n# Basic usage\n```js\nimport NewFeature from 'react-native-new-feature'\n\nconst App = (props) =\u003e {\n  const data = {\n    title: {\n      text: 'What\\'s New',\n    },\n    items: [\n      {\n        title: {\n          text: 'Easy setup',\n        },\n        subtitle: {\n          text: 'The simple and typesafe WhatsNew struct enables you to structurize your awesome new app features',\n        },\n        image: {\n          component: \u003cImage source={require('./assets/icons8-approval-100.png')} style={{ width: 45, height: 45, tintColor: 'red' }}/\u003e,\n        }\n      },\n    ],\n    detailButton: {\n      text: 'Read more',\n    },\n    completionButton: {\n      text: 'Continue',\n    }\n  }\n\n  return (\n    \u003cNewFeature\n      visible={true}\n      title={data.title}\n      items={data.items}\n      detailButton={{\n        ...data.detailButton,\n      }}\n      completionButton={{\n        ...data.completionButton,\n      }}\n    /\u003e\n  )\n}\n```\n# Customization\n`React Native New Feature` can be fully customized as your need. Below is detail of sub components included and list of animations available:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./overview.png\" /\u003e\n\u003c/div\u003e\n\n## TitleView\n```ts\nProperties:\n- text: string (required)\n- color: string\n- size: number\n- weight: '600' // same as fontWeight property. default is '600'\n```\n\nUsage:\n```js\n\u003cNewFeature\n  title={{\n    text: 'Title',\n    color: 'black',\n    size: 35\n  }}\n  {...other props}\n/\u003e\n```\n\n## ListItem\nThis component uses `ScrollView` to render list of new features, each row is a `ItemView` component which made from 3 sub-components `ItemImage`, `ItemTitle` and `ItemSubtitle` as described in picture below:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./item_view.png\" /\u003e\n\u003c/div\u003e\n\nTo customize these components,read the sections below.\n\n### Item Image\n```js\nProperties:\n- component(required): React component, usually is a \u003cImage\u003e or \u003cIcon\u003e ...,\n```\n### Item Title and Item Subtitle\n```ts\nProperties:\n- text: string (required)\n- color: string // default is 'black' if don't specify\n- size: number // default is 17 if don't specify\n- weight: 'bold' // same as fontWeight property\n```\n\n## Detail Button\n```ts\nProperties:\n- text: string (required)\n- color: string\n- size: number\n- weight: 'bold' // same as fontWeight property\n- handler: function\n```\n\nUsage:\n```js\nconst myHandler = () =\u003e {\n  console.log(1)\n}\n\n\u003cNewFeature\n  detailButton={{\n    text: 'Read more',\n    color: 'red',\n    size: 17,\n    handler: myHandler\n  }}\n  {...other props}\n/\u003e\n```\n\n## Completion Button\n```ts\nProperties:\n- text: string (required),\n- color: string,\n- size: number\n- background: string,\n- radius: number,\n- weight: 'bold' // same as fontWeight property\n- handler: function\n```\n\nUsage:\n```js\nconst myHandler = () =\u003e {\n  console.log(1)\n}\n\n\u003cNewFeature\n  completionButton={{\n    text: 'Read more',\n    color: 'red',\n    background: 'blue',\n    radius: 14\n    size: 17,\n    handler: myHandler\n  }}\n  {...other props}\n/\u003e\n```\n\n## Margin and Padding\n`margin` and `padding` props are provided in order to help you have more control on layout. These props are applied to these components:\n- `TitleView`\n- `ItemImage`\n- `ItemTitle`\n- `ItemSubtitle`\n- `DetailButton`\n- `CompletionButton`\n\nUsage:\n```js\n\u003cNewFeature\n  title={{\n    margin: {\n      top: 1,\n      right: 2,\n      bottom: 3,\n      left: 4\n    },\n    padding: {\n      top: 5,\n      right: 6,\n      bottom: 7,\n      left: 8\n    }\n  }}\n  {...other props}\n/\u003e\n```\n\n## Animations\nThis package have 2 types of animations:\n- Animation on root component appear\n- Animation of the ListItem\n### Root component animation\nRoot component makes use of `Modal` component which is built-in of React Native\nUsage:\n```js\n\u003cNewFeature\n  appearAnimation={'fade'}\n/\u003e\n```\n\n`appearAnimation` is one of:\n- `none` (default if not specified)\n- `fade`\n- `slide`\n### ListItem animation\nUsage:\n```js\n\u003cNewFeature\n  animation={'slide-down'}\n/\u003e\n```\n\n`animation` is one of:\n- `none` (default if not specified)\n- `fade`\n- `slide-up`\n- `slide-down`\n- `slide-right`\n- `slide-left`\n\n# Orientation change support\nBy using purely React Native View flex layout, this component is auto-compatible when device orientation changed\n\n# Demo\nA complete working demo is located at [example folder](./example/Home.js)\n\n# Contributing\nTo start developing with this project, simply run the following commands:\n```\nnpm install # or yarn install (to install dependencies)\n\nnpm run watch # or yarn watch (to build this project in watch mode for development)\n\nnpm run build # or yarn build (to build project in production mode)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Freact-native-new-feature","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaitrungduc1410%2Freact-native-new-feature","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Freact-native-new-feature/lists"}