nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

    react-native-slider-alert

    1.0.2 • Public • Published

    react-native-slider-alert

    A React Native component to show a top message, useful for ScrollView or View.

    Getting started

    $ 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.

    /* @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<Props> {
      _alert: SliderAlert;
     
      onPressButton = () => {
        this._alert.showAlert('Welcome back to React Native!', () =>
          console.log('onAnimationEnd');
        );
      };
     
      render() {
        return (
          <View style={styles.top}>
            <SliderAlert
              ref={(ref: any) => {
                this._alert = ref;
              }}
              startValue={70}
              value={0}
              containerStyle={{
                backgroundColor: '#F4D35E'
              }}
              titleStyle={{
                fontSize: 18,
                fontFamily: 'Avenir Next'
              }}
            />
            <View style={styles.container}>
              <Text style={styles.welcome}>Welcome to React Native!</Text>
              <TouchableOpacity style={styles.button} onPress={this.onPressButton}>
                <Text style={styles.title}>Show message</Text>
              </TouchableOpacity>
            </View>
          </View>
        );
      }
    }
     
    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

    Author

    Antonio Moreno Valls <amoreno at apsl.net>

    Built with 💛 by APSL.

    Install

    npm i react-native-slider-alert

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    442 kB

    Total Files

    14

    Last publish

    Collaborators

    • apsl