open-index/open-npm huggingface dataset:
npm package: @skyscanner/react-native-dash
Description: A <Dash /> component for react-native to draw dashed or dotted lines
Author: Pawan Kumar
Latest version: 0.0.11

# react-native-dash
[![NPM version](https://badge.fury.io/js/react-native-dash.svg)](http://badge.fury.io/js/react-native-dash)

A super simple `<Dash />` component for react-native to draw customisable dashed lines

## Installation
```sh
npm i --save @skyscanner/react-native-dash
```

## Props
| name | desc | type | default
| --- | --- | --- | --- |
| `style` | Dash container style  | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | `{flexDirection = 'row'}`
| `dashGap` | Gap between two dashes | number | `2`
| `dashLength` | Length of each dash | number | `4`
| `dashThickness` | Thickness of each dash | number | `2`
| `dashColor` | Color of each dash | string | `black`
| `dashStyle` | Dashes style | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | {}

 - **ProTip 1**: Use `flexDirection` in style to get horizontal or vertical dashes. By default, it's `row`
 - **ProTip 2**: Use `{borderRadius: 100, overflow: 'hidden'}` in dashStyle to get rounded dotes instead of straight line dashes. 

## Usage
```javascript
import Dash from '@skyscanner/react-native-dash';

//draws a horizontal dashed line with defaults. Also works with flex
render() {
    return <Dash style={{width:100, height:1}}/>
}

//draws a vertical dashed line with defaults.
render() {
    return <Dash style={{width:1, height:100, flexDirection:'column'}}/>
}
```

### Dependenies
 [react-native-measureme](https://github.com/obipawan/react-native-measureme)
### Development

PRs highly appreciated

License
----
MIT License
npm package: @skyscanner/react-native-snackbar-component
Description: A snackbar component for Android and iOS
Author: sidevesh
Latest version: 1.1.10

# react-native-snackbar-component
A snackbar component for Android and iOS, customizable and simple.

![Snackbar demo](https://media.giphy.com/media/zChTSWog7TNmM/giphy.gif)
![With fab](https://media.giphy.com/media/6oCCk98unakbC/giphy.gif)

See [Google Material Design](https://material.io/guidelines/components/snackbars-toasts.html) for more info on Snackbars.

## Installation

```sh
npm install --save @skyscanner/react-native-snackbar-component
```

## Basic Usage

```javascript
import SnackBar from '@skyscanner/react-native-snackbar-component'
```

## Code

```js
<SnackBar visible={true} textMessage="Hello There!" actionHandler={()=>{console.log("snackbar button clicked!")}} actionText="let's go"/>
```
## Options
| Prop        | Type           | Effect  | Default Value |
| ------------- |-------------| -----| -----|
| visible | boolean | Show or hide the snackbar | none |
| textMessage | string / function | The main message text, can also supply a function returning JSX to render custom message UI | none |
| actionHandler | function | Function to be called when button is pressed, if absent no action button is shown | none |
| actionText | message | The text of action button, will be uppercased automatically | none |
| backgroundColor | color | The background color of snackbar | #484848 |
| accentColor | color | The color of action button text | orange |
| messageColor | color | The color of main message text | #FFFFFF |
| distanceCallback | function | Function to be caled whenever snackbar moves in and out or changes layout, the function will be supplied a number indicating distance taken up by snackbar on bottom or top, based on position. | (distance) => {} |
| position | string | The position of the snackbar: top, bottom | bottom |
| top / bottom / left / right | number | Use these to position the snackbar | 0 |
| autoHidingTime | number | How many milliseconds the snackbar will be hidden | 0 (Do not hide automatically) |
| containerStyle | object | Override or add style to the root container View | {} |
| messageStyle | object | Override or add style to the message Text | {} |
| actionStyle | object | Override or add style to the action button Text | {} |

## Note

* When visible prop is changed, the snackbar will be animated in/out of screen
* The snackbar will not auto-dismiss by itself, for auto-dismiss use setTimeout() and change value passed to prop to false. 
* This works great together with [react-native-fab](https://github.com/sidevesh/react-native-fab). See [demo](https://github.com/sidevesh/snackbar-and-fab-demo) for example and instructions how to.
npm package: @skyscanner/react-native-transitiongroup
Description: light port of `ReactTransitionGroup` to work in react-native
Author: Mads Lee Jensen
Latest version: 1.1.3

# react-native-transitiongroup

Works similar to [ReactTransitionGroup](https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionGroup.js) found in `react`, but reimplemented in seperate library to work better with `react-native` 

https://github.com/reactjs/react-transition-group/issues/6

## General usage

**important** to always give your `Transition` components a unique `key`.


```js
import TransitionGroup, { FadeInOutTransition } from 'react-native-transitiongroup';
```

```jsx
<TransitionGroup>
  <FadeInOutTransition key="loader">
     {this.state.isLoading ? <Loader /> : null}
  </FadeInOutTransition>
</TransitionGroup>
```


## Custom Transitions

You can easily create your own transitions, by creating your own Transition component.
`TransitionGroup` will look for the following methods to be called on its child components to animate `enter` and `leave` 

```js
componentWillEnter(callback)
componentWillLeave(callback)
```

### example of scale in/out
```js
class ScaleInOutTransition extends Component {
  constructor() {
    super();

    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentWillEnter(callback) {
    Animated.timing(this.state.progress, {
      toValue: 1,
      delay: this.props.inDelay,
      easing: this.props.easing,
      duration: this.props.inDuration,
    }).start(callback);
  }

  componentWillLeave(callback) {
    Animated.timing(this.state.progress, {
      toValue: 0,
      delay: this.props.outDelay,
      easing: this.props.easing,
      duration: this.props.outDuration,
    }).start(callback);
  }

  render() {
    const animation = {
      transform: [
        { scale: this.state.progress },
      ]
    };

    return (
      <Animated.View
        style={[this.props.style, animation]}>
        {this.props.children}
      </Animated.View>
    );
  }
}

```