# react-native-air-chat

> Inspired by Gifted chat. Chat UI for react native.

Latest version **0.0.13** (published 2017-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-air-chat
pnpm add react-native-air-chat
yarn add react-native-air-chat
bun add react-native-air-chat
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2017-10-07 |
| First published | 2017-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Ayush Shukla |
| Maintainers | mcd-50 |
| Keywords | android, ios, react-native, react, react-component, messenger, message, chat |

## Links

- npm: https://www.npmjs.com/package/react-native-air-chat
- Repository: https://github.com/MCD-50/react-native-air-chat
- Homepage: https://github.com/MCD-50/react-native-air-chat#readme
- Issues: https://github.com/MCD-50/react-native-air-chat/issues
- npm.io page: https://npm.io/package/react-native-air-chat

## Dependencies (8)

- [md5](https://npm.io/package/md5.md) ^2.1.0
- [moment](https://npm.io/package/moment.md) ^2.13.0
- [shallowequal](https://npm.io/package/shallowequal.md) ^0.2.2
- [react-native-lightbox](https://npm.io/package/react-native-lightbox.md) github:oblador/react-native-lightbox#c84a8543d4511fe6a44c3d7820747c9c1bddd875
- [react-native-parsed-text](https://npm.io/package/react-native-parsed-text.md) ^0.0.15
- [react-native-communications](https://npm.io/package/react-native-communications.md) ^2.1.0
- [@exponent/react-native-action-sheet](https://npm.io/package/@exponent/react-native-action-sheet.md) git+https://github.com/FaridSafi/react-native-action-sheet.git
- [react-native-invertible-scroll-view](https://npm.io/package/react-native-invertible-scroll-view.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.13 (latest) — 2017-10-07
- 0.0.12 — 2017-10-07
- 0.0.10 — 2017-10-07
- 0.0.8 — 2017-10-07
- 0.0.7 — 2017-08-10
- 0.0.6 — 2017-08-10
- 0.0.5 — 2017-01-22
- 0.0.4 — 2017-01-22
- 0.0.3 — 2017-01-22
- 0.0.2 — 2017-01-22
- 0.0.1 — 2017-01-22

## README

# Air Chat
Chat UI for react native.
Inspired by Gifted chat

## Dependency
React Native minimum version `0.29.0`

## Installation
`npm install react-native-air-chat --save`

## Android installation
- Add `android:windowSoftInputMode="adjustResize"` to your Android Manifest `android/app/src/main/AndroidManifest.xml`
```xml
<!-- ... -->
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<!-- ... -->
```

- If you plan to use `AirChat` inside a `Modal`, see [#200](https://github.com/FaridSafi/react-native-gifted-chat/issues/200)


## Example
```jsx
import { AirChatUI } from 'react-native-air-chat';

class Example extends React.Component {
  constructor(props) {
    super(props);
    //pass props in route object while navigating to this page

    //isPrivate : true || false
    //isPrivate set true if in private chat else set false

    //isNotification : false || true
    //isNotification set true to display notification in middle instead of chat bubble else false

    this.state = {messages: [], 
    id: this.props.route.id, 
    isPrivate : this.props.route.isPrivate, 
    isNotification: this.props.route.isNotification, };
    this.onSend = this.onSend.bind(this);
  }
  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
          user: {
            _id: 2,
            name: 'React Native',
            isPrivate : this.state.isPrivate,
          },
          isNotification : this.props.isNotification,
        },
      ],
    });
  }
  onSend(messages = []) {
    this.setState((previousState) => {
      return {
        messages: AirChatUI.append(previousState.messages, messages),
      };
    });
  }
  render() {
    return (
      <AirChatUI
        messages={this.state.messages}
        onSend={this.onSend}
        user={{
          _id: 1,
          name : 'User',
          isPrivate : this.state.isPrivate
        }}
      />
    );
  }
}

```

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