docs: updated flatlist implementation info

netguru · Aug 5, 2020 · f4d77f4 · f4d77f4
1 parent 7bbe85c
commit f4d77f4
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -150,6 +150,11 @@ Below are examples of those components and description of the props they are acc
 
 [Custom header props and example](docs/CUSTOM.md)
 
+## Handling nested scrollables 
+
+[Handling nested flatlist props and example](docs/CUSTOM.md#Tips)
+
+
 <h1 id="Getting-Started">Getting Started</h1>
 
 ## Prerequisites

diff --git a/docs/CUSTOM.md b/docs/CUSTOM.md
@@ -15,7 +15,8 @@
 | `header`                         | `ReactElement`                                                        |     Yes    | -         | This renders header component                                   |
 | `initialPage`                    | `number`                                                              |     No     | `0`       | Set initial page of tab bar                                     |
 | `onChangeTab`                    | `({ i, ref, from }: { from: number; i: number; ref: any; }) => void;` |     No     | -         | Tab change event                                                |
-| `onEndReached`                   | `() => void`                                                          |     No     | -         | Tab change event                                                |
+| `onEndReached`                   | `() => void`                                                          |     No     | -         | Reached end event    
+| `onTopReached`                   | `() => void`                                                          |     No     | -         | Reached top event                                               |
 | `parallaxHeight`                 | `number`                                                              |     No     | `0`       | Sets height of opened header                                    |
 | `scrollEvent`                    | `(event: NativeSyntheticEvent<NativeScrollEvent>) => void`            |     No     | -         | Returns offset of header to apply custom animations             |
 | `snapStartThreshold`             | `number`                                                              |     No     | -         | Set start value Threshold of snap                               |
@@ -185,4 +186,55 @@ class TabScreen extends React.Component {
 ```
 
 ## Tips
-In order to nest scrollable component use `scrollEnabled={false}` on it and move all the logic to the header eg. by using `onEndReached` prop.
+In order to nest scrollable component use `scrollEnabled={false}` on it and move all the logic to the header eg. by using `onEndReached` and `onTopReached` props. You can find example in CardScreen.js it's really basic so probably you will want to extend it somehow:
+
+```jsx
+
+  shouldBeEnabled = () => {
+    const {
+      endReached,
+      stickyHeaderEndReached,
+      topReached,
+      stickyHeaderTopReached
+    } = this.state
+    const bottomCondition =
+      endReached && stickyHeaderEndReached
+    const topCondition =
+      topReached && stickyHeaderTopReached
+    return bottomCondition || topCondition
+  }
+
+  onScroll = ({nativeEvent}) => {
+    const {contentOffset, layoutMeasurement, contentSize} = nativeEvent;
+    if (layoutMeasurement.height + contentOffset.y >= contentSize.height - 20) {
+      this.setState({endReached: true, topReached: false})
+    }
+
+    if (contentOffset.y <= 0) {
+      this.setState({topReached: true, endReached: false})
+    }
+  }
+
+  renderFlatlistContent = (user) => (
+    <View style={styles.flatlistContainer}>
+      <FlatList
+        data={user.cards}
+        renderItem={({item, index}) => (
+          <QuizCard
+            data={item}
+            num={index}
+            key={item.question}
+            cardsAmount={100}
+          />
+        )}
+        onScroll={this.onScroll}
+        scrollEnabled={
+          Platform.OS === 'android' ? true : this.shouldBeEnabled()
+        }
+        nestedScrollEnabled
+      />
+    </View>
+  )
+  ```
+
+