1.0.1 • Published 1 year ago

react-native-instagram-alerts v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

Getting Started

Installation

$ npm i react-native-instagram-alerts --save

Basic Usage

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

import InstagramAlert from 'react-native-instagram-alerts';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { showAlert: false };
  };

  showAlert = () => {
    this.setState({
      showAlert: true
    });
  };

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  render() {
    const {showAlert} = this.state;

    return (
      <View style={styles.container}>

        <Text>I'm Instagram Alert</Text>
        <TouchableOpacity onPress={() => {
          this.showAlert();
        }}>
          <View style={styles.button}>
            <Text style={styles.text}>Try me!</Text>
          </View>
        </TouchableOpacity>

        <InstagramAlert
          show={showAlert}
          title="Instagram Alert"
          message="I have a message for you!"
          cancelText="Cancel"
          confirmText="Delete"
          onCancelPressed={() => {
            this.hideAlert();
          }}
          onConfirmPressed={() => {
            this.hideAlert();
          }}
        />
      </View>
    );
  };
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  button: {
    margin: 10,
    paddingHorizontal: 10,
    paddingVertical: 7,
    borderRadius: 5,
    backgroundColor: "#AEDEF4",
  },
  text: {
    color: '#fff',
    fontSize: 15
  }
});

Props

Basic

PropTypeDescriptionDefault
showbooleanShow / Hide awesome alertfalse
animatedValuenumberAnimated value0.3
useNativeDriverbooleanUse native driver for animationsfalse
titlestringTitle text to displayhidden
messagestringMessage text to displayhidden
cancelTextstringCancel button textCancel
confirmTextstringConfirm button textConfirm
onCancelPressedfuncAction to perform when Cancel is pressed-
onConfirmPressedfuncAction to perform when Confirm is pressed-
onDismissfuncCallback for when alert is dismissed-
customViewobjectCustom view to render inside alertnull
modalPropsobjectAdditional props to pass for Modal-
confirmButtonTestIDstringConfirm button testIDinstagram-alert-confirm-btn
cancelButtonTestIDstringCancel button testIDinstagram-alert-cancel-btn

Styling

PropTypeDescriptionDefault
alertContainerStyleobjectAlert parent container style-
overlayStyleobjectOverlay style-
contentContainerStyleobjectAlert popup style-
contentStyleobjectAlert popup content style-
titleStyleobjectTitle style-
messageStyleobjectMessage style-
actionContainerStyleobjectAction container style-
cancelButtonStyleobjectCancel button style-
cancelButtonTextStyleobjectCancel button text style-
confirmButtonStyleobjectConfirm button style-
confirmButtonTextStyleobjectConfirm button text style-