rn-chatbubbles-experiments's Introduction

React Native Chat Bubbles Experiments

Experiments for efficient chat bubbles list view in React Native

Adding another implementation

Add your code in src/ or in native (Xcode for iOS), depending on your need.
If you are creating a native UI component, make sure to follow the Facebook documentation here. See ALBubblesViewManager as an example.
Wrap your implementation in a React component. Your component can receive props either as an array of bubble data (using generateSimpleDataset()) or receive 2 props (using generateDataset()):

rowsById - map of row id (string) -> row data (object)

rowIds - array of row ids (in the order that they should appear)

You will receive a large number of rows (around 2000).

The structure of the row data is:

For text bubbles:

 {
   type: 'text',
   text: 'hello world content goes here',
   owner: 'me' // can be 'else' too
 }

For image bubbles:

 {
   type: 'image',
   url: 'https://loremflickr.com/250/150?random=234',
   owner: 'me' // can be 'else' too
 }

Compare your implementation to the default JavaScript ListView
In iOS, add a cell to the ChatBubblesScene storyboard and create a view controller. You can copy an existing one.
Create a segue from the cell to the created view controller by using Control+Drag from the cell to the controller. Select "Show" as the segue action.
Create a view controller class for your code. You can copy an existing class logic, such as the JSNaiveViewController. Make sure to send the correct module name for your RN component.