https://github.com/maitrungduc1410/react-native-new-feature
Simple and lightweight What's New style component that shows your React Native app new features
https://github.com/maitrungduc1410/react-native-new-feature
react-native react-native- react-native-new-feature react-native-whats-new
Last synced: 4 days ago
JSON representation
Simple and lightweight What's New style component that shows your React Native app new features
- Host: GitHub
- URL: https://github.com/maitrungduc1410/react-native-new-feature
- Owner: maitrungduc1410
- License: mit
- Created: 2020-05-08T07:37:16.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-21T03:14:49.000Z (over 1 year ago)
- Last Synced: 2025-05-07T02:03:54.686Z (4 days ago)
- Topics: react-native, react-native-, react-native-new-feature, react-native-whats-new
- Language: TypeScript
- Homepage:
- Size: 5.81 MB
- Stars: 20
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-new-feature ★1 - A simple and lightweight What's New component to show your latest React native Features. (Components / UI)
- awesome-react-native - react-native-new-feature ★1 - A simple and lightweight What's New component to show your latest React native Features. (Components / UI)
README
React Native New Feature
☀️Simple and lightweight What's New style component that shows your React Native app new features☀️
If you like this project, encourage me by giving a ⭐️. Happy hacking
# Table of Contents
1. [Installation](#Installation)
2. [Basic usage](#basic-usage)
3. [List animations](#list-animations)
4. [Customization](#Customization)
1. [TitleView](#TitleView)
2. [ListItem](#ListItem)
3. [Detail Button](#Detail-Button)
4. [Completion Button](#Completion-Button)
5. [Margin and padding](#margin-and-padding)
6. [Animations](#Animations)
5. [Orientation change support](#Orientation-change-support)
6. [Demo](#Demo)
7. [Contributing](#Contributing)
# Installation
With npm:
`$ npm install react-native-new-feature --save`
With yarn:
`$ yarn add react-native-new-feature`
# Basic usage
```js
import NewFeature from 'react-native-new-feature'
const App = (props) => {
const data = {
title: {
text: 'What\'s New',
},
items: [
{
title: {
text: 'Easy setup',
},
subtitle: {
text: 'The simple and typesafe WhatsNew struct enables you to structurize your awesome new app features',
},
image: {
component: ,
}
},
],
detailButton: {
text: 'Read more',
},
completionButton: {
text: 'Continue',
}
}
return (
)
}
```
# Customization
`React Native New Feature` can be fully customized as your need. Below is detail of sub components included and list of animations available:
## TitleView
```ts
Properties:
- text: string (required)
- color: string
- size: number
- weight: '600' // same as fontWeight property. default is '600'
```
Usage:
```js
```
## ListItem
This 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:
To customize these components,read the sections below.
### Item Image
```js
Properties:
- component(required): React component, usually is a or ...,
```
### Item Title and Item Subtitle
```ts
Properties:
- text: string (required)
- color: string // default is 'black' if don't specify
- size: number // default is 17 if don't specify
- weight: 'bold' // same as fontWeight property
```
## Detail Button
```ts
Properties:
- text: string (required)
- color: string
- size: number
- weight: 'bold' // same as fontWeight property
- handler: function
```
Usage:
```js
const myHandler = () => {
console.log(1)
}
```
## Completion Button
```ts
Properties:
- text: string (required),
- color: string,
- size: number
- background: string,
- radius: number,
- weight: 'bold' // same as fontWeight property
- handler: function
```
Usage:
```js
const myHandler = () => {
console.log(1)
}
```
## Margin and Padding
`margin` and `padding` props are provided in order to help you have more control on layout. These props are applied to these components:
- `TitleView`
- `ItemImage`
- `ItemTitle`
- `ItemSubtitle`
- `DetailButton`
- `CompletionButton`
Usage:
```js
```
## Animations
This package have 2 types of animations:
- Animation on root component appear
- Animation of the ListItem
### Root component animation
Root component makes use of `Modal` component which is built-in of React Native
Usage:
```js
```
`appearAnimation` is one of:
- `none` (default if not specified)
- `fade`
- `slide`
### ListItem animation
Usage:
```js
```
`animation` is one of:
- `none` (default if not specified)
- `fade`
- `slide-up`
- `slide-down`
- `slide-right`
- `slide-left`
# Orientation change support
By using purely React Native View flex layout, this component is auto-compatible when device orientation changed
# Demo
A complete working demo is located at [example folder](./example/Home.js)
# Contributing
To start developing with this project, simply run the following commands:
```
npm install # or yarn install (to install dependencies)
npm run watch # or yarn watch (to build this project in watch mode for development)
npm run build # or yarn build (to build project in production mode)
```