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.