feat: add FloatingComponent prop (#162)

jeremybarbet · Mar 29, 2020 · 269934e · 269934e
1 parent 3ad4e58
commit 269934e
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 3 deletions.
diff --git a/docs/PROPSMETHODS.md b/docs/PROPSMETHODS.md
@@ -234,6 +234,14 @@ Refer to the [`react-native` SectionList documentation](https://facebook.github.
 | -------- | -------- |
 | object   | No       |
 
+### `FloatingComponent`
+
+A floating component inside the modal wrapper that will be independent of scrolling. It requires `zIndex` child with absolute positioning. Check out the [Flatlist example](https://github.com/jeremybarbet/react-native-modalize/blob/master/examples/expo/src/components/modals/FlatList.js).
+
+| Type     | Required |
+| -------- | -------- |
+| node     | No       |
+
 ### `HeaderComponent`
 
 A header component outside of the ScrollView, at the top of the modal.

diff --git a/examples/expo/src/components/modals/FlatList.js b/examples/expo/src/components/modals/FlatList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { Modalize } from 'react-native-modalize';
 import faker from 'faker';
 
@@ -22,6 +22,21 @@ export class FlatList extends React.PureComponent {
     </View>
   );
 
+  renderFloatingComponent = () => (
+    <TouchableOpacity style={s.floating} onPress={this.scrollToTop}>
+      <Text style={s.text}>Top</Text>
+    </TouchableOpacity>
+  );
+
+  scrollToTop = () => {
+    if (this.modal.current) {
+      this.modal.current.scrollTo({
+        y: 0,
+        animated: true,
+      });
+    }
+  };
+
   openModal = () => {
     if (this.modal.current) {
       this.modal.current.open();
@@ -32,6 +47,7 @@ export class FlatList extends React.PureComponent {
     return (
       <Modalize
         ref={this.modal}
+        FloatingComponent={this.renderFloatingComponent}
         flatListProps={{
           data: this.data,
           renderItem: this.renderItem,
@@ -64,4 +80,22 @@ const s = StyleSheet.create({
     fontWeight: '200',
     color: '#666',
   },
+
+  floating: {
+    position: 'absolute',
+    right: 20,
+    bottom: 20,
+    backgroundColor: 'rgba(66,0,128,1)',
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 999,
+  },
+
+  text: {
+    fontSize: 16,
+    color: '#fff',
+  },
 });
diff --git a/examples/react-native-navigation/src/screens/FlatList.js b/examples/react-native-navigation/src/screens/FlatList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { Navigation } from 'react-native-navigation';
 import { Modalize } from 'react-native-modalize';
 import faker from 'faker';
@@ -30,6 +30,21 @@ export class FlatList extends React.PureComponent {
     }
   };
 
+  scrollToTop = () => {
+    if (this.modal.current) {
+      this.modal.current.scrollTo({
+        y: 0,
+        animated: true,
+      });
+    }
+  };
+
+  renderFloatingComponent = () => (
+    <TouchableOpacity style={s.floating} onPress={this.scrollToTop}>
+      <Text style={s.text}>Top</Text>
+    </TouchableOpacity>
+  );
+
   renderItem = ({ item }) => (
     <View style={s.item}>
       <Text style={s.item__name}>{item.name}</Text>
@@ -42,6 +57,7 @@ export class FlatList extends React.PureComponent {
       <Modalize
         ref={this.modal}
         onClosed={this.onClosed}
+        FloatingComponent={this.renderFloatingComponent}
         flatListProps={{
           data: this.data,
           renderItem: this.renderItem,
@@ -74,4 +90,22 @@ const s = StyleSheet.create({
     fontWeight: '200',
     color: '#666',
   },
+
+  floating: {
+    position: 'absolute',
+    right: 20,
+    bottom: 20,
+    backgroundColor: 'rgba(66,0,128,1)',
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 999,
+  },
+
+  text: {
+    fontSize: 16,
+    color: '#fff',
+  },
 });
diff --git a/examples/react-navigation/src/components/modals/FlatList.js b/examples/react-navigation/src/components/modals/FlatList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { Modalize } from 'react-native-modalize';
 import faker from 'faker';
 
@@ -21,6 +21,21 @@ export class FlatList extends React.PureComponent {
     }
   };
 
+  scrollToTop = () => {
+    if (this.modal.current) {
+      this.modal.current.scrollTo({
+        y: 0,
+        animated: true,
+      });
+    }
+  };
+
+  renderFloatingComponent = () => (
+    <TouchableOpacity style={s.floating} onPress={this.scrollToTop}>
+      <Text style={s.text}>Top</Text>
+    </TouchableOpacity>
+  );
+
   renderItem = ({ item }) => (
     <View style={s.item}>
       <Text style={s.item__name}>{item.name}</Text>
@@ -32,6 +47,7 @@ export class FlatList extends React.PureComponent {
     return (
       <Modalize
         ref={this.modal}
+        FloatingComponent={this.renderFloatingComponent}
         flatListProps={{
           data: this.data,
           renderItem: this.renderItem,
@@ -64,4 +80,22 @@ const s = StyleSheet.create({
     fontWeight: '200',
     color: '#666',
   },
+
+  floating: {
+    position: 'absolute',
+    right: 20,
+    bottom: 20,
+    backgroundColor: 'rgba(66,0,128,1)',
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 999,
+  },
+
+  text: {
+    fontSize: 16,
+    color: '#fff',
+  },
 });
diff --git a/src/index.tsx b/src/index.tsx
@@ -743,6 +743,16 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
     return this.renderComponent(FooterComponent);
   };
 
+  private renderFloatingComponent = (): React.ReactNode => {
+    const { FloatingComponent } = this.props;
+
+    if (!FloatingComponent) {
+      return null;
+    }
+
+    return this.renderComponent(FloatingComponent);
+  };
+
   private renderOverlay = (): React.ReactNode => {
     const { overlayStyle, alwaysOpen, panGestureEnabled, closeOnOverlayTap } = this.props;
     const { showContent } = this.state;
@@ -823,6 +833,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
             )}
 
             {this.renderOverlay()}
+            {this.renderFloatingComponent()}
           </View>
         </TapGestureHandler>
       </View>

diff --git a/src/options.ts b/src/options.ts
@@ -191,6 +191,11 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
    */
   sectionListProps?: Animated.AnimatedProps<SectionListProps<SectionListItem>>;
 
+  /*
+   * A floating component inside the modal wrapper that will be independent of scrolling. It requires `zIndex` child with absolute positioning.
+   */
+  FloatingComponent?: React.ReactNode;
+
   /**
    * A header component outside of the ScrollView, on top of the modal.
    */