# react-native-instagram-alerts

> Instagram alert for React Native iOS, android and web

Latest version **1.0.1** (published 2023-01-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-instagram-alerts
pnpm add react-native-instagram-alerts
yarn add react-native-instagram-alerts
bun add react-native-instagram-alerts
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-01-18 |
| First published | 2023-01-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | barbaros-dev |
| Maintainers | barbaros-dev |
| Keywords | react-native, alerts, dialog, iOS, android |

## Links

- npm: https://www.npmjs.com/package/react-native-instagram-alerts
- Repository: https://github.com/Barbaros-Dev/react-native-instagram-alert
- Homepage: https://github.com/Barbaros-Dev/react-native-instagram-alert#readme
- Issues: https://github.com/Barbaros-Dev/react-native-instagram-alert/issues
- npm.io page: https://npm.io/package/react-native-instagram-alerts

## Dependencies (3)

- [react](https://npm.io/package/react.md) 18.1.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-native](https://npm.io/package/react-native.md) 0.70.5

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-01-18

## README

## Getting Started

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Props](#props)

### Installation
```bash
$ npm i react-native-instagram-alerts --save
```

### Basic Usage
```jsx
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

| Prop                     | Type      | Description                                    | Default |
| :----------------------- | :-------: | :--------------------------------------------: | :------ |
| show                     | `boolean` | Show / Hide awesome alert                      | false   |
| animatedValue            | `number`  | Animated value                                 | 0.3     |
| useNativeDriver          | `boolean` | Use native driver for animations               | false   |
| title                    | `string`  | Title text to display                          | hidden  |
| message                  | `string`  | Message text to display                        | hidden  |
| cancelText               | `string`  | Cancel button text                             | Cancel  |
| confirmText              | `string`  | Confirm button text                            | Confirm |
| onCancelPressed          | `func`    | Action to perform when Cancel is pressed       | -       |
| onConfirmPressed         | `func`    | Action to perform when Confirm is pressed      | -       |
| onDismiss                | `func`    | Callback for when alert is dismissed           | -       |
| customView               | `object`  | Custom view to render inside alert             | null    |
| modalProps               | `object`  | Additional props to pass for Modal             | -       |
| confirmButtonTestID      | `string`  | Confirm button testID                          | instagram-alert-confirm-btn|
| cancelButtonTestID       | `string`  | Cancel button testID                           | instagram-alert-cancel-btn|

#### Styling

| Prop                   | Type     | Description                  | Default |
| :--------------------- | :------: | :--------------------------: | :------ |
| alertContainerStyle    | `object` | Alert parent container style | -       |
| overlayStyle           | `object` | Overlay style                | -       |
| contentContainerStyle  | `object` | Alert popup style            | -       |
| contentStyle           | `object` | Alert popup content style    | -       |
| titleStyle             | `object` | Title style                  | -       |
| messageStyle           | `object` | Message style                | -       |
| actionContainerStyle   | `object` | Action container style       | -       |
| cancelButtonStyle      | `object` | Cancel button style          | -       |
| cancelButtonTextStyle  | `object` | Cancel button text style     | -       |
| confirmButtonStyle     | `object` | Confirm button style         | -       |
| confirmButtonTextStyle | `object` | Confirm button text style    | -       |

---
_Source: https://npm.io/package/react-native-instagram-alerts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._