Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 2 months ago
JSON representation

Simple and lightweight What's New style component that shows your React Native app new features

Lists

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)

```