![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@kesha-antonov/react-native-action-cable
Advanced tools
Use Rails 5+ ActionCable channels with React Native for realtime magic.
Use Rails 5+ ActionCable channels with React Native for realtime magic.
This is a fork from https://github.com/schneidmaster/action-cable-react
The react-native-action-cable
package exposes two modules: ActionCable, Cable.
ActionCable
: holds info and logic of connection and automatically tries to reconnect when connection is lost.Cable
: holds references to channels(subscriptions) created by action cable.yarn add @kesha-antonov/react-native-action-cable
Import:
import {
ActionCable,
Cable,
} from '@kesha-antonov/react-native-action-cable'
Define once ActionCable and Cable in your application setup in your store (like Redux
or MobX
).
Create your consumer:
const actionCable = ActionCable.createConsumer('ws://localhost:3000/cable')
Right after that create Cable instance. It'll hold info of our channels.
const cable = new Cable({})
Then, you can subscribe to channel:
const channel = cable.setChannel(
`chat_${chatId}_${userId}`, // channel name to which we will pass data from Rails app with `stream_from`
actionCable.subscriptions.create({
channel: 'ChatChannel', // from Rails app app/channels/chat_channel.rb
chatId,
otherParams...
})
)
channel
.on( 'received', this.handleReceived )
.on( 'connected', this.handleConnected )
.on( 'rejected', this.handleDisconnected )
.on( 'disconnected', this.handleDisconnected )
...later we can remove event listeners and unsubscribe from channel:
const channelName = `chat_${chatId}_${userId}`
const channel = cable.channel(channelName)
if (channel) {
channel
.removeListener( 'received', this.handleReceived )
.removeListener( 'connected', this.handleConnected )
.removeListener( 'rejected', this.handleDisconnected )
.removeListener( 'disconnected', this.handleDisconnected )
channel.unsubscribe()
delete( cable.channels[channelName] )
}
You can combine React's lifecycle hook useEffect
to subscribe and unsubscribe from channels. Or implement custom logic in your store
.
Here's example how you can handle events:
function Chat ({ chatId, userId }) {
const [isWebsocketConnected, setIsWebsocketConnected] = useState(false)
const onNewMessage = useCallback(message => {
// ... ADD TO MESSAGES LIST
}, [])
const handleReceived = useCallback(({ type, message }) => {
switch(type) {
'new_incoming_message': {
onNewMessage(message)
}
...
}
}, [])
const handleConnected = useCallback(() => {
setIsWebsocketConnected(true)
}, [])
const handleDisconnected = useCallback(() => {
setIsWebsocketConnected(false)
}, [])
const getChannelName = useCallback(() => {
return `chat_${chatId}_${userId}`
}, [chatId, userId])
const createChannel = useCallback(() => {
const channel = cable.setChannel(
getChannelName(), // channel name to which we will pass data from Rails app with `stream_from`
actionCable.subscriptions.create({
channel: 'ChatChannel', // from Rails app app/channels/chat_channel.rb
chatId,
otherParams...
})
)
channel
.on( 'received', handleReceived )
.on( 'connected', handleConnected )
.on( 'disconnected', handleDisconnected )
}, [])
const removeChannel = useCallback(() => {
const channelName = getChannelName()
const channel = cable.channel(channelName)
if (!channel)
return
channel
.removeListener( 'received', handleReceived )
.removeListener( 'connected', handleConnected )
.removeListener( 'disconnected', handleDisconnected )
channel.unsubscribe()
delete( cable.channels[channelName] )
}, [])
useEffect(() => {
createChannel()
return () => {
removeChannel()
}
}, [])
return (
<View>
// ... RENDER CHAT HERE
</View>
)
}
Send message to Rails app:
cable.channel(channelName).perform('send_message', { text: 'Hey' })
cable.channel('NotificationsChannel').perform('appear')
ActionCable
top level methods:
.createConsumer(websocketUrl, headers = {})
- create actionCable consumer and start connecting.
websocketUrl
- url to your Rails app's cable
endpointheaders
- headers to send with connection request.startDebugging()
- start logging.stopDebugging()
- stop loggingActionCable
instance methods:
.open()
- try connect.connection.isOpen()
- check if connected
.connection.isActive()
- check if connected
or connecting
.subscriptions.create({ channel, otherParams... })
- create subscription to Rails app.disconnect()
- disconnects from Rails appCable
instance methods:
.setChannel(name, actionCable.subscriptions.create())
- set channel to get it later.channel(name)
- get channel by namechannel
methods:
.perform(action, data)
- send message to channel. action - string
, data - json
.removeListener(eventName, eventListener)
- unsubscribe from event.unsubscribe()
- unsubscribe from channel.on(eventName, eventListener)
- subscribe to events. eventName can be received
, connected
, rejected
, disconnected
or value of data.action
attribute from channel message payload.Custom action example:
{
"identifier": "{\"channel\":\"ChatChannel\",\"id\":42}",
"command": "message",
"data": "{\"action\":\"speak\",\"text\":\"hello!\"}"
}
Above message will be emited with eventName = 'speak'
Obviously, this project is heavily indebted to the entire Rails team, and most of the code in lib/action_cable
is taken directly from Rails 5. This project also referenced fluxxor for implementation details and props binding.
MIT
FAQs
Use Rails 5+ ActionCable channels with React Native for realtime magic.
The npm package @kesha-antonov/react-native-action-cable receives a total of 4,325 weekly downloads. As such, @kesha-antonov/react-native-action-cable popularity was classified as popular.
We found that @kesha-antonov/react-native-action-cable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.