=============== UNMAINTAINED ==============

ActionCable for react native.

Just import actioncable module, and let it compatiblely with react native.

Install

npm install --save react-native-actioncable

Usage

Two ways to use react-native-actioncable

Use ActionCable methods

1import ActionCable from 'react-native-actioncable'
2
3const cable = ActionCable.createConsumer('ws://localhost:3000/cable')
4
5// ... Other code
6cable.subscriptions.create('ChatChannel', {
7    received(data) {
8        console.log('Received data:', data)
9    }
10})

Use with react-actioncable-provider

In outer container:

1import ActionCable from 'react-native-actioncable'
2import ActionCableProvider from 'react-actioncable-provider'
3
4const cable = ActionCable.createConsumer('ws://localhost:3000/cable')
5
6export default function Container (props) {
7    return (
8        <ActionCableProvider cable={cable}>
9            <MyApp />
10        </ActionCableProvider>
11    )
12}

And then you can get cable object from react component's context, or you can use ActionCableProvider.ActionCable component.

Use in some UI screen directly:

1import React, { Component, PropTypes } from 'react'
2
3export default class ChatRoom extends Component {
4    static contextTypes = {
5        cable: PropTypes.object.isRequired
6    };
7
8    componentDidMount () {
9        this.subscription = this.context.cable.subscriptions.create(
10            'ChatChannel',
11            {
12                received (data) {
13                    console.log(data)
14                }
15            }
16        )
17    }
18
19    componentWillUnmount () {
20        this.subscription &&
21            this.context.cable.subscriptions.remove(this.subscription)
22    }
23
24    // ... Other code
25}

Or you can use with ActionCable component (Not react-native-actioncable)

1import React, { Component, PropTypes } from 'react'
2import { ActionCable } from 'react-actioncable-provider'
3
4export default class ChatRoom extends Component {
5    onReceived = (data) => {
6        console.log('Received data:', data)
7    }
8
9    render() {
10        return (
11            <View>
12                <ActionCable channel={{channel: 'ChatChannel'}} onReceived={this.onReceived} />
13                {/* other code */}
14            </View>
15        )
16    }
17}

Full Example

https://github.com/cpunion/TestRNActionCable