@shopify/flash-list 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,159 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+- `data` prop change will force update items only if `renderItem` is also updated
+  - https://github.com/Shopify/flash-list/pull/453
+
+## [1.0.0] - 2022-06-17
+
+- Upgrade recyclerlistview to v3.3.0-beta.2
+  - https://github.com/Shopify/flash-list/pull/445
+- Added web support
+  - https://github.com/Shopify/flash-list/pull/444
+- Added `disableAutoLayout` prop to prevent conflicts with custom `CellRendererComponent`
+  - https://github.com/Shopify/flash-list/pull/452
+
+## [0.6.1] - 2022-05-26
+
+- Fix amending layout on iOS
+  - https://github.com/Shopify/flash-list/pull/412
+- Define `FlashList` props previously inherited from `VirtualizedList` and `FlatList` explicitly
+  - https://github.com/Shopify/flash-list/pull/386
+- Make `estimatedItemSize` optional
+  - https://github.com/Shopify/flash-list/pull/378
+- Change `overrideItemType` prop name to `getItemType`
+  - https://github.com/Shopify/flash-list/pull/369
+- Added `useBlankAreaTracker` hook for tracking blank area in production
+  - https://github.com/Shopify/flash-list/pull/411
+- Added `CellRendererComponent` prop
+  - https://github.com/Shopify/flash-list/pull/362
+- Added automatic height measurement for horizontal lists even when parent isn't deterministic
+  - https://github.com/Shopify/flash-list/pull/409
+
+## [0.5.0] - 2022-04-29
+
+- Fix finding props with testId
+  - https://github.com/Shopify/flash-list/pull/357
+- Reuse cached layouts on orientation change
+  - https://github.com/Shopify/flash-list/pull/319
+
+## [0.4.6] - 2022-04-13
+
+- Match FlashList's empty list behavior with FlatList
+  - https://github.com/Shopify/flash-list/pull/312
+
+## [0.4.5] - 2022-04-13
+
+- Upgrade recyclerlistview to v3.2.0-beta.4
+
+  - https://github.com/Shopify/flash-list/pull/315
+
+- Add viewability callbacks
+
+  - https://github.com/Shopify/flash-list/pull/301
+
+- Calculate average item sizes automatically
+  - https://github.com/Shopify/flash-list/pull/296
+
+## [0.4.4] - 2022-04-06
+
+- Fix `FlashList` mock when no data is provided
+  - https://github.com/Shopify/flash-list/pull/295
+
+## [0.4.3] - 2022-04-04
+
+- Reduce number of render item calls
+
+  - https://github.com/Shopify/flash-list/pull/253
+
+- Upgrade recyclerlistview to v3.2.0-beta.2
+  - https://github.com/Shopify/flash-list/pull/284
+
+## [0.4.2] - 2022-04-04
+
+- Minor changes
+
+## [0.4.1] - 2022-03-29
+
+- Crash fix for android activity switching (#256)
+
+  - https://github.com/Shopify/flash-list/pull/257
+
+- initialScrollIndex, scrollTo methods will now account for size of header
+
+  - https://github.com/Shopify/flash-list/pull/194
+
+- Added a new mock for easier testing of components with `FlashList`
+  - https://github.com/Shopify/flash-list/pull/236
+
+## [0.4.0] - 2022-03-23
+
+- Add support for layout animations
+
+  - https://github.com/Shopify/flash-list/pull/183
+
+- Suppress recyclerlistview's bounded size exception for some missing cases.
+
+  - https://github.com/Shopify/flash-list/pull/192
+
+- Expose reference to recyclerlistview and firstItemOffset
+
+  - https://github.com/Shopify/flash-list/pull/217
+
+- recyclerlistview upgraded to v3.1.0-alpha.9
+  - https://github.com/Shopify/flash-list/pull/227
+
+## [0.3.3] - 2022-03-16
+
+- Prevent implicit scroll to top on device orientation change
+- Change recyclerlistview's bounded size exception to a warning
+  - https://github.com/Shopify/flash-list/pull/187
+
+## [0.3.2] - 2022-03-15
+
+- Minor changes
+
+## [0.3.1] - 2022-03-15
+
+- Revert react-native-safe-area upgrade and minSdkVersion bump
+  - https://github.com/Shopify/flash-list/pull/184
+
+## [0.3.0] - 2022-03-15
+
+- Fixed untranspiled library code by enforcing stricter TS rules.
+  - https://github.com/Shopify/flash-list/pull/181
+
+## [0.2.4] - 2022-03-14
+
+- Added `onLoad` event that is called once the list has rendered items. This is required because FlashList doesn't render items in the first cycle.
+  - https://github.com/Shopify/flash-list/pull/180
+
+## [0.2.3] - 2022-03-10
+
+- Fixing publish steps for transpiled code
+  - https://github.com/Shopify/flash-list/pull/150
+
+## [0.2.2] - 2022-03-10
+
+- Fixing publish steps for transpiled code
+  - https://github.com/Shopify/flash-list/pull/149
+
+## [0.2.1] - 2022-03-09
+
+- Bug fix for style and last separator
+  - https://github.com/Shopify/flash-list/pull/141
+
+## [0.2.0] - 2022-03-08
+
+- Rename the component from `RecyclerFlatList` to `FlashList`
+  - https://github.com/Shopify/flash-list/pull/140
+
+## [0.1.0] - 2022-03-02
+
+- Initial release

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2022-present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+[![Build status](./FlashList.png)](https://buildkite.com/shopify/flash-list)
+
+<div align="center">
+  <a href="https://shopify.github.io/flash-list/">Website</a> •
+  <a href="https://discord.gg/k2gzABTfav">Discord</a> •
+  <a href="https://shopify.github.io/flash-list/docs/">Getting started</a> •
+  <a href="https://shopify.github.io/flash-list/docs/usage">Usage</a> •
+  <a href="https://shopify.github.io/flash-list/docs/performance-troubleshooting">Performance</a> •
+  <a href="https://shopify.github.io/flash-list/performant-components">Writing performant components</a> •
+  <a href="https://shopify.github.io/flash-list/docs/known-issues">Known Issues</a>
+<br><br>
+
+**Fast & performant React Native list. No more blank cells.**
+
+Swap from FlatList in seconds. Get instant performance.
+
+</div>
+
+## Installation
+
+Add the package to your project via `yarn add @shopify/flash-list` and run `pod install` in the `ios` directory.
+
+If you get the error `Plugin with id 'kotlin-android' not found` while building on Android, go to `android/build.gradle` and add `classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0")` inside your `dependencies` block. Please change the plugin version as per your needs.
+
+## Usage
+
+We recommend reading the detailed documentation for using `FlashList` [here](https://shopify.github.io/flash-list/docs/usage).
+
+But if you are familiar with [FlatList](https://reactnative.dev/docs/flatlist), you already know how to use `FlashList`. You can try out `FlashList` by changing the component name and adding the `estimatedItemSize` prop or refer to the example below:
+
+```jsx
+import React from "react";
+import { View, Text } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+
+const DATA = [
+  {
+    title: "First Item",
+  },
+  {
+    title: "Second Item",
+  },
+];
+
+const MyList = () => {
+  return (
+    <FlashList
+      data={DATA}
+      renderItem={({ item }) => <Text>{item.title}</Text>}
+      estimatedItemSize={200}
+    />
+  );
+};
+```
+
+To avoid common pitfalls, you can also follow these steps for migrating from `FlatList`, based on our own experiences:
+
+1. Switch from `FlatList` to `FlashList` and render the list once. You should see a warning about missing `estimatedItemSize` and a suggestion. Set this value as the prop directly.
+2. **Important**: Scan your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for explicit `key` prop definitions and remove them. If you’re doing a `.map()` use indices as keys.
+3. If your list has heterogenous views, pass their types to `FlashList` using [`getItemType`](https://shopify.github.io/flash-list/docs/usage/#getitemtype) prop to improve performance.
+4. Do not test performance with JS dev mode on. Make sure you’re in release mode. `FlashList` can appear slower while in dev mode due to a small render buffer.
+
+## App / Playground
+
+The [fixture](https://github.com/Shopify/flash-list/tree/main/fixture) is an example app showing how to use the library.

package/RNFlashList.podspec

@@ -0,0 +1,26 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name             = 'RNFlashList'
+  s.version          = package['version']
+  s.summary          = package['description']
+  s.homepage         = package['homepage']
+  s.license          = package['license']
+  s.author           = package['author']
+  s.platform         = :ios, '11.0'
+  s.source           = { git: 'https://github.com/shopify/flash-list.git', tag: 'v#{s.version}' }
+  s.source_files     = 'ios/Sources/**/*'
+  s.requires_arc     = true
+  s.swift_version    = '5.0'
+
+  # Dependencies
+  s.dependency 'React-Core'
+
+  # Tests spec
+  s.test_spec 'Tests' do |test_spec|
+    test_spec.source_files = 'ios/Tests/**/*'
+    test_spec.framework = 'XCTest'
+  end
+end

package/android/build.gradle

@@ -0,0 +1,59 @@
+apply plugin: 'com.android.library'
+
+apply plugin: 'kotlin-android'
+
+def _ext = rootProject.ext
+
+def _reactNativeVersion = _ext.has('reactNative') ? _ext.reactNative : '+'
+def _compileSdkVersion = _ext.has('compileSdkVersion') ? _ext.compileSdkVersion : 30
+def _buildToolsVersion = _ext.has('buildToolsVersion') ? _ext.buildToolsVersion : '30.0.2'
+def _minSdkVersion = _ext.has('minSdkVersion') ? _ext.minSdkVersion : 21
+def _targetSdkVersion = _ext.has('targetSdkVersion') ? _ext.targetSdkVersion : 30
+def _kotlinVersion = _ext.has('kotlinVersion') ? _ext.kotlinVersion : '1.5.30'
+def _junitVersion = _ext.has('junitVersion') ? _ext.junitVersion : '4.13.2'
+def _mockitoVersion = _ext.has('mockitoVersion') ? _ext.mockitoVersion : '3.2.0'
+def _androidTestRunnerVersion = _ext.has('androidTestRunnerVersion') ? _ext.androidTestRunnerVersion : '1.1.0'
+
+android {
+    compileSdkVersion _compileSdkVersion
+    buildToolsVersion _buildToolsVersion
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    sourceSets {
+        main.java.srcDirs += 'src/main/kotlin'
+        debug.java.srcDirs += 'src/debug/kotlin'
+        test.java.srcDirs += 'src/test/kotlin'
+        androidTest.java.srcDirs += 'src/androidTest/kotlin'
+    }
+
+    defaultConfig {
+        minSdkVersion _minSdkVersion
+        targetSdkVersion _targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+    }
+
+    lintOptions {
+        abortOnError false
+    }
+
+    testOptions {
+      unitTests.returnDefaultValues = true
+    }
+}
+
+dependencies {
+    compileOnly "com.facebook.react:react-native:${_reactNativeVersion}"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${_kotlinVersion}"
+    testImplementation "junit:junit:${_junitVersion}"
+    testImplementation "org.mockito.kotlin:mockito-kotlin:${_mockitoVersion}"
+    testImplementation "org.mockito:mockito-inline:${_mockitoVersion}"
+    testImplementation 'com.google.code.gson:gson:2.8.9'
+    androidTestImplementation("androidx.test:runner:${_androidTestRunnerVersion}")
+    androidTestImplementation("androidx.test:rules:${_androidTestRunnerVersion}")
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.shopify.reactnative.flash_list">
+</manifest>

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutShadow.kt

@@ -0,0 +1,94 @@
+package com.shopify.reactnative.flash_list
+
+class AutoLayoutShadow {
+    var horizontal: Boolean = false
+    var scrollOffset: Int = 0
+    var offsetFromStart: Int = 0
+    var windowSize: Int = 0
+    var renderOffset = 0
+
+    var blankOffsetAtStart = 0 // Tracks blank area from the top
+    var blankOffsetAtEnd = 0 // Tracks blank area from the bottom
+
+    private var lastMaxBound = 0 // Tracks where the last pixel is drawn in the visible window
+    private var lastMinBound = 0 // Tracks where first pixel is drawn in the visible window
+
+    /** Checks for overlaps or gaps between adjacent items and then applies a correction (Only Grid layouts with varying spans)
+     * Performance: RecyclerListView renders very small number of views and this is not going to trigger multiple layouts on Android side. Not expecting any major perf issue. */
+    fun clearGapsAndOverlaps(sortedItems: Array<CellContainer>) {
+        var maxBound = 0
+        var minBound = Int.MAX_VALUE
+        var maxBoundNeighbour = 0
+        for (i in 0 until sortedItems.size - 1) {
+            val cell = sortedItems[i]
+            val neighbour = sortedItems[i + 1]
+            if (isWithinBounds(cell)) {
+                if (!horizontal) {
+                    maxBound = kotlin.math.max(maxBound, cell.bottom);
+                    minBound = kotlin.math.min(minBound, cell.top);
+                    maxBoundNeighbour = maxBound
+                    if (cell.left < neighbour.left) {
+                        if (cell.right != neighbour.left) {
+                            neighbour.right = cell.right + neighbour.width
+                            neighbour.left = cell.right
+                        }
+                        if (cell.top != neighbour.top) {
+                            neighbour.bottom = cell.top + neighbour.height
+                            neighbour.top = cell.top
+                        }
+                    } else {
+                        neighbour.bottom = maxBound + neighbour.height
+                        neighbour.top = maxBound
+                    }
+                    if (isWithinBounds(neighbour)) {
+                        maxBoundNeighbour = kotlin.math.max(maxBound, neighbour.bottom)
+                    }
+                } else {
+                    maxBound = kotlin.math.max(maxBound, cell.right);
+                    minBound = kotlin.math.min(minBound, cell.left);
+                    maxBoundNeighbour = maxBound
+                    if (cell.top < neighbour.top) {
+                        if (cell.bottom != neighbour.top) {
+                            neighbour.bottom = cell.bottom + neighbour.height
+                            neighbour.top = cell.bottom
+                        }
+                        if (cell.left != neighbour.left) {
+                            neighbour.right = cell.left + neighbour.width
+                            neighbour.left = cell.left
+                        }
+                    } else {
+                        neighbour.right = maxBound + neighbour.width
+                        neighbour.left = maxBound
+                    }
+                    if (isWithinBounds(neighbour)) {
+                        maxBoundNeighbour = kotlin.math.max(maxBound, neighbour.right)
+                    }
+                }
+            }
+        }
+        lastMaxBound = maxBoundNeighbour
+        lastMinBound = minBound
+    }
+
+    /** Offset provided by react can be one frame behind the real one, it's important that this method is called with offset taken directly from
+     * scrollview object */
+    fun computeBlankFromGivenOffset(actualScrollOffset: Int, distanceFromWindowStart: Int, distanceFromWindowEnd: Int): Int {
+        val actualScrollOffset = actualScrollOffset - offsetFromStart;
+        blankOffsetAtStart = lastMinBound - actualScrollOffset - distanceFromWindowStart
+        blankOffsetAtEnd = actualScrollOffset + windowSize - renderOffset - lastMaxBound - distanceFromWindowEnd
+        return kotlin.math.max(blankOffsetAtStart, blankOffsetAtEnd)
+    }
+
+    /** It's important to avoid correcting views outside the render window. An item that isn't being recycled might still remain in the view tree. If views outside get considered then gaps between
+     * unused items will cause algorithm to fail.*/
+    private fun isWithinBounds(cell: CellContainer): Boolean {
+        val scrollOffset = scrollOffset - offsetFromStart;
+        return if (!horizontal) {
+            (cell.top >= (scrollOffset - renderOffset) || cell.bottom >= (scrollOffset - renderOffset)) &&
+                    (cell.top <= scrollOffset + windowSize || cell.bottom <= scrollOffset + windowSize)
+        } else {
+            (cell.left >= (scrollOffset - renderOffset) || cell.right >= (scrollOffset - renderOffset)) &&
+                    (cell.left <= scrollOffset + windowSize || cell.right <= scrollOffset + windowSize)
+        }
+    }
+}

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutView.kt

@@ -0,0 +1,79 @@
+package com.shopify.reactnative.flash_list
+
+import android.content.Context
+import android.graphics.Canvas
+import android.util.DisplayMetrics
+import android.view.View
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.facebook.react.views.view.ReactViewGroup
+
+
+/** Container for all RecyclerListView children. This will automatically remove all gaps and overlaps for GridLayouts with flexible spans.
+ * Note: This cannot work for masonry layouts i.e, pinterest like layout */
+class AutoLayoutView(context: Context) : ReactViewGroup(context) {
+    val alShadow = AutoLayoutShadow()
+    var enableInstrumentation = false
+    var disableAutoLayout = false
+
+    var pixelDensity = 1.0;
+
+    /** Overriding draw instead of onLayout. RecyclerListView uses absolute positions for each and every item which means that changes in child layouts may not trigger onLayout on this container. The same layout
+     * can still cause views to overlap. Therefore, it makes sense to override draw to do correction. */
+    override fun dispatchDraw(canvas: Canvas?) {
+        fixLayout()
+        super.dispatchDraw(canvas)
+
+        if (enableInstrumentation && parent?.parent != null) {
+            /** Since we need to call this method with scrollOffset on the UI thread and not with the one react has we're querying parent's parent
+            directly which will be a ScrollView. If it isn't reported values will be incorrect but the component will not break.
+            RecyclerListView is expected not to change the hierarchy of children. */
+
+            val scrollContainerSize = (parent.parent as View).let {
+                if (alShadow.horizontal) it.width else it.height
+            }
+            val scrollOffset = (parent.parent as View).let {
+                if (alShadow.horizontal) it.scrollX else it.scrollY
+            }
+            val startOffset = if (alShadow.horizontal) left else top
+            val endOffset = if (alShadow.horizontal) right else bottom
+
+            val distanceFromWindowStart = kotlin.math.max(startOffset - scrollOffset, 0)
+            val distanceFromWindowEnd = kotlin.math.max(scrollOffset + scrollContainerSize - endOffset, 0)
+
+            alShadow.computeBlankFromGivenOffset(scrollOffset, distanceFromWindowStart, distanceFromWindowEnd)
+            emitBlankAreaEvent()
+        }
+    }
+
+    /** Sorts views by index and then invokes clearGaps which does the correction.
+     * Performance: Sort is needed. Given relatively low number of views in RecyclerListView render tree this should be a non issue.*/
+    private fun fixLayout() {
+        if (childCount > 1 && !disableAutoLayout) {
+            val positionSortedViews: Array<CellContainer> = Array(childCount) {
+                val child = getChildAt(it)
+                if (child is CellContainer) {
+                    child
+                } else {
+                    throw IllegalStateException("CellRendererComponent outer view should always be CellContainer. Learn more here: https://shopify.github.io/flash-list/docs/usage#cellrenderercomponent.")
+                }
+            }
+            positionSortedViews.sortBy { it.index }
+            alShadow.offsetFromStart = if (alShadow.horizontal) left else top
+            alShadow.clearGapsAndOverlaps(positionSortedViews)
+        }
+    }
+
+    /** TODO: Check migration to Fabric */
+    private fun emitBlankAreaEvent() {
+        val event: WritableMap = Arguments.createMap()
+        event.putDouble("offsetStart", alShadow.blankOffsetAtStart / pixelDensity)
+        event.putDouble("offsetEnd", alShadow.blankOffsetAtEnd / pixelDensity)
+        val reactContext = context as ReactContext
+        reactContext
+                .getJSModule(RCTEventEmitter::class.java)
+                .receiveEvent(id, "onBlankAreaEvent", event)
+    }
+}

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutViewManager.kt

@@ -0,0 +1,69 @@
+package com.shopify.reactnative.flash_list
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.views.view.ReactViewGroup
+import com.facebook.react.views.view.ReactViewManager
+import com.facebook.react.common.MapBuilder
+import kotlin.math.roundToInt
+
+/** ViewManager for AutoLayoutView - Container for all RecyclerListView children. Automatically removes all gaps and overlaps for GridLayouts with flexible spans.
+ * Note: This cannot work for masonry layouts i.e, pinterest like layout */
+@ReactModule(name = AutoLayoutViewManager.REACT_CLASS)
+class AutoLayoutViewManager: ReactViewManager() {
+
+    companion object {
+        const val REACT_CLASS = "AutoLayoutView"
+    }
+
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup {
+        return AutoLayoutView(context).also { it.pixelDensity = context.resources.displayMetrics.density.toDouble() }
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+        return MapBuilder.builder<String, Any>().put(
+                "onBlankAreaEvent",
+                MapBuilder.of(
+                        "registrationName", "onBlankAreaEvent")
+        ).build();
+    }
+
+    @ReactProp(name = "horizontal")
+    fun setHorizontal(view: AutoLayoutView, isHorizontal: Boolean) {
+        view.alShadow.horizontal = isHorizontal
+    }
+
+    @ReactProp(name = "disableAutoLayout")
+    fun setDisableAutoLayout(view: AutoLayoutView, disableAutoLayout: Boolean) {
+        view.disableAutoLayout = disableAutoLayout
+    }
+
+    @ReactProp(name = "scrollOffset")
+    fun setScrollOffset(view: AutoLayoutView, scrollOffset: Double) {
+        view.alShadow.scrollOffset = convertToPixelLayout(scrollOffset, view.pixelDensity)
+    }
+
+    @ReactProp(name = "windowSize")
+    fun setWindowSize(view: AutoLayoutView, windowSize: Double) {
+        view.alShadow.windowSize = convertToPixelLayout(windowSize, view.pixelDensity)
+    }
+
+    @ReactProp(name = "renderAheadOffset")
+    fun setRenderAheadOffset(view: AutoLayoutView, renderOffset: Double) {
+        view.alShadow.renderOffset = convertToPixelLayout(renderOffset, view.pixelDensity)
+    }
+
+    @ReactProp(name = "enableInstrumentation")
+    fun setEnableInstrumentation(view: AutoLayoutView, enableInstrumentation: Boolean) {
+        view.enableInstrumentation = enableInstrumentation
+    }
+
+    private fun convertToPixelLayout(dp: Double, density: Double): Int {
+        return (dp * density).roundToInt()
+    }
+}

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/CellContainer.java

@@ -0,0 +1,16 @@
+package com.shopify.reactnative.flash_list;
+
+public interface CellContainer {
+    void setIndex(int value);
+    int getIndex();
+    void setLeft(int value);
+    int getLeft();
+    void setTop(int value);
+    int getTop();
+    void setRight(int value);
+    int getRight();
+    void setBottom(int value);
+    int getBottom();
+    int getHeight();
+    int getWidth();
+}

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/CellContainerImpl.kt

@@ -0,0 +1,16 @@
+package com.shopify.reactnative.flash_list
+
+import android.content.Context
+import com.facebook.react.views.view.ReactViewGroup
+
+class CellContainerImpl(context: Context) : ReactViewGroup(context), CellContainer {
+    private var index = -1
+    override fun setIndex(value: Int) {
+        index = value
+    }
+
+    override fun getIndex(): Int {
+        return index
+    }
+
+}

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/CellContainerManager.kt

@@ -0,0 +1,27 @@
+package com.shopify.reactnative.flash_list
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.views.view.ReactViewGroup
+import com.facebook.react.views.view.ReactViewManager
+
+@ReactModule(name = AutoLayoutViewManager.REACT_CLASS)
+class CellContainerManager: ReactViewManager() {
+    companion object {
+        const val REACT_CLASS = "CellContainer"
+    }
+
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup {
+        return CellContainerImpl(context)
+    }
+
+    @ReactProp(name = "index")
+    fun setIndex(view: CellContainerImpl, index: Int) {
+        view.index = index
+    }
+}

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/FlashListPackage.kt

@@ -0,0 +1,19 @@
+package com.shopify.reactnative.flash_list
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class ReactNativeFlashListPackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return listOf()
+  }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(
+        AutoLayoutViewManager(),
+        CellContainerManager()
+    )
+  }
+}