React Native New Feature
Simple and lightweight What's New style component that shows your React Native app new features.
Installation
With npm:
$ npm install react-native-new-feature --save
With yarn:
$ yarn add react-native-new-feature
Basic usage
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
Usage:
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
Item Title and Item Subtitle
Detail Button
Usage:
Completion Button
Usage:
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:
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:
appearAnimation
is one of:
none
(default if not specified)fade
slide
ListItem animation
Usage:
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
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)