https://github.com/interfacekit/react-native-slider-alert
A simple React Native component to show a top message.
https://github.com/interfacekit/react-native-slider-alert
Last synced: 19 days ago
JSON representation
A simple React Native component to show a top message.
- Host: GitHub
- URL: https://github.com/interfacekit/react-native-slider-alert
- Owner: InterfaceKit
- License: mit
- Created: 2018-08-30T12:42:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-14T14:29:39.000Z (over 7 years ago)
- Last Synced: 2025-02-25T22:16:47.162Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 274 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-slider-alert
A React Native component to show a top message, useful for ScrollView or View.
## Getting started
```sh
$ yarn add react-native-slider-alert
```
## Usage
To show the message and the slider alert, you should place the `SliderAlert` element at the top of the `render` method and jsx.
Then, call `showAlert` function to display it, as the example below. This function accepts a required message (`string` type) and a optional function that will be executed when animation ends.
```js
/* @flow */
import React from 'react';
import { TouchableOpacity, StyleSheet, Text, View, Image } from 'react-native';
import SliderAlert from './lib/SliderAlert';
type Props = {};
export default class App extends React.PureComponent {
_alert: SliderAlert;
onPressButton = () => {
this._alert.showAlert('Welcome back to React Native!', () =>
console.log('onAnimationEnd');
);
};
render() {
return (
{
this._alert = ref;
}}
startValue={70}
value={0}
containerStyle={{
backgroundColor: '#F4D35E'
}}
titleStyle={{
fontSize: 18,
fontFamily: 'Avenir Next'
}}
/>
Welcome to React Native!
Show message
);
}
}
const styles = StyleSheet.create({
top: {
flex: 1
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
button: {
backgroundColor: '#DA4167'
},
title: {
margin: 20,
color: '#FFFFFF'
}
});
```
## API
| Props | Type | Description | Required |
| :--------: | :----------------: | :--------------------------------------------------: | :------: |
| startValue | number | The initial value at which the animation will expand | ✓ |
| value | number | The final value which will end the animation | ✓ |
| titleStyle | Object | Styles of the title | ✗ |
| delay | number | Delay value of the predefined animation | ✗ |
| duration | number | Duration value of the predefined animation | ✗ |
| children | React.ReactElement | Custom children prop. Accepts any React element | ✗ |
## License
MIT License
Copyright (c) 2018 [InterfaceKit](https://github.com/InterfaceKit)
## Author
Antonio Moreno Valls ``
Built with 💛 by [APSL](https://github.com/apsl).