Merge pull request #4556 from hippware/functional-bottom-sheet

Functional BottomPopup + rendering optimizations
hippware · Dec 13, 2019 · 977c728 · 977c728
2 parents a670bd5 + fd0b4ee
commit 977c728
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 285 deletions.
diff --git a/src/components/BotDetails/BotDetailsNew.tsx b/src/components/BotDetails/BotDetailsNew.tsx
@@ -95,11 +95,10 @@ const BotDetails = inject(
 
     return (
       <BottomPopupNew
+        ref={list}
         previewHeight={150}
         fullViewHeight={500}
         allowFullScroll
-        renderContent={() => <DefaultHeader bot={bot} />}
-        renderPreview={() => <PreviewHeader bot={bot} />}
         preview={preview}
         navBarConfig={{
           backAction: () => Actions.refresh({preview: true}),
@@ -113,12 +112,16 @@ const BotDetails = inject(
             />
           ),
         }}
-        animatedFlatListRef={list}
         listProps={{
           data: !bot.error && bot.isSubscribed && !preview ? bot.posts.list.slice() : [],
           contentContainerStyle: {
             flexGrow: 1,
           },
+          ListHeaderComponent: preview ? (
+            <PreviewHeader bot={bot!} />
+          ) : (
+            <DefaultHeader bot={bot!} />
+          ),
           ListFooterComponent: (
             <Observer>
               {() => {

diff --git a/src/components/Chats/ChatListScreen.tsx b/src/components/Chats/ChatListScreen.tsx
@@ -20,6 +20,13 @@ const ChatListScreen = observer(({isActive}: Props) => {
     <BottomPopupNew
       fullViewHeight={400}
       allowFullScroll
+      navBarConfig={{
+        title: (
+          <RText size={16} color={colors.DARK_PURPLE}>
+            Messages
+          </RText>
+        ),
+      }}
       listProps={{
         data: chats.list.slice(),
         initialNumToRender: 6,
@@ -76,15 +83,5 @@ const ChatListScreen = observer(({isActive}: Props) => {
     />
   )
 })
-;(ChatListScreen as any).navigationOptions = {
-  fadeNavConfig: {
-    back: true,
-    title: (
-      <RText size={16} color={colors.DARK_PURPLE}>
-        Messages
-      </RText>
-    ),
-  },
-}
 
 export default ChatListScreen
diff --git a/src/components/NotificationsNew.tsx b/src/components/NotificationsNew.tsx
@@ -20,8 +20,6 @@ type Props = {
 const Notifications = observer(({isActive, navigation}: Props) => {
   const wocky = useWocky()
   useEffect(() => {
-    // send all injected props + bot "up" to static context
-    navigation.setParams({wocky})
     wocky.notifications.load().then(() => wocky.notifications.readAll())
     return () => wocky.notifications.setMode(1) // reset
   }, [])
@@ -32,7 +30,6 @@ const Notifications = observer(({isActive, navigation}: Props) => {
   }
   return (
     <BottomPopupNew
-      // previewHeight={150}
       fullViewHeight={400}
       allowFullScroll={true}
       renderContent={() => (
@@ -61,6 +58,9 @@ const Notifications = observer(({isActive, navigation}: Props) => {
           </SwitchButton>
         </View>
       )}
+      navBarConfig={{
+        title: <RText style={navBarStyle.titleStyle}>{wocky.notifications.title}</RText>,
+      }}
       listProps={{
         data: notifications.data,
         renderItem: ({item}: {item: IEvent}) => <EventCard item={item} />,
@@ -96,18 +96,6 @@ const Notifications = observer(({isActive, navigation}: Props) => {
     />
   )
 })
-;(Notifications as any).navigationOptions = ({
-  navigation: {
-    state: {
-      params: {wocky},
-    },
-  },
-}) => ({
-  fadeNavConfig: {
-    back: true,
-    title: wocky && <RText style={navBarStyle.titleStyle}>{wocky.notifications.title}</RText>,
-  },
-})
 
 const styles = StyleSheet.create({
   newDot: {