From bd9a68626848bdbd25cfec08723f3eb7be8514bb Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Tue, 4 May 2021 15:01:21 +0200
Subject: [PATCH] fix: use FlatList in NoteSideMenu

---
 src/screens/SideMenu/NoteSideMenu.styled.ts | 17 ++++-
 src/screens/SideMenu/NoteSideMenu.tsx       | 70 +++++++++++++--------
 2 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/src/screens/SideMenu/NoteSideMenu.styled.ts b/src/screens/SideMenu/NoteSideMenu.styled.ts
index 93e238bc..75e07fe9 100644
--- a/src/screens/SideMenu/NoteSideMenu.styled.ts
+++ b/src/screens/SideMenu/NoteSideMenu.styled.ts
@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import styled from 'styled-components/native';
+import styled, { DefaultTheme } from 'styled-components/native';
 
 export const SafeAreaContainer = styled(SafeAreaView)`
   flex: 1;
@@ -12,3 +14,16 @@ export const StyledList = styled(ScrollView)`
   padding: 15px;
   background-color: ${({ theme }) => theme.stylekitBackgroundColor};
 `;
+
+export const useStyles = (theme: DefaultTheme) => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        sections: {
+          padding: 15,
+          backgroundColor: theme.stylekitBackgroundColor,
+        },
+      }),
+    [theme.stylekitBackgroundColor]
+  );
+};
diff --git a/src/screens/SideMenu/NoteSideMenu.tsx b/src/screens/SideMenu/NoteSideMenu.tsx
index 724c4e57..b5e7227e 100644
--- a/src/screens/SideMenu/NoteSideMenu.tsx
+++ b/src/screens/SideMenu/NoteSideMenu.tsx
@@ -47,10 +47,11 @@ import React, {
 } from 'react';
 import { Platform, Share } from 'react-native';
 import FAB from 'react-native-fab';
+import { FlatList } from 'react-native-gesture-handler';
 import DrawerLayout from 'react-native-gesture-handler/DrawerLayout';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { ThemeContext } from 'styled-components/native';
-import { SafeAreaContainer, StyledList } from './NoteSideMenu.styled';
+import { SafeAreaContainer, useStyles } from './NoteSideMenu.styled';
 import { SideMenuOption, SideMenuSection } from './SideMenuSection';
 import { TagSelectionList } from './TagSelectionList';
 
@@ -73,6 +74,7 @@ export const NoteSideMenu = React.memo((props: Props) => {
     AppStackNavigationProp<typeof SCREEN_COMPOSE>['navigation']
   >();
   const { showActionSheet } = useCustomActionSheet();
+  const styles = useStyles(theme);
 
   // State
   const [editor, setEditor] = useState<Editor | undefined>(undefined);
@@ -594,31 +596,47 @@ export const NoteSideMenu = React.memo((props: Props) => {
 
   return (
     <SafeAreaContainer edges={['top', 'bottom', 'right']}>
-      <StyledList>
-        <SideMenuSection
-          title="Options"
-          key="options-section"
-          options={noteOptions}
-        />
-        <SideMenuSection
-          title="Editors"
-          key="editors-section"
-          options={editorComponents}
-          collapsed={true}
-        />
-        <SideMenuSection title="Tags" key="tags-section">
-          <TagSelectionList
-            key="tags-section-list"
-            hasBottomPadding={Platform.OS === 'android'}
-            contentType={ContentType.Tag}
-            onTagSelect={onTagSelect}
-            selectedTags={selectedTags}
-            emptyPlaceholder={
-              'Create a new tag using the tag button in the bottom right corner.'
-            }
-          />
-        </SideMenuSection>
-      </StyledList>
+      <FlatList
+        style={styles.sections}
+        data={['options-section', 'editors-section', 'tags-section'].map(
+          key => ({
+            key,
+            noteOptions,
+            editorComponents,
+            onTagSelect,
+            selectedTags,
+          })
+        )}
+        renderItem={({ item, index }) =>
+          index === 0 ? (
+            <SideMenuSection
+              title="Options"
+              key={item.key}
+              options={item.noteOptions}
+            />
+          ) : index === 1 ? (
+            <SideMenuSection
+              title="Editors"
+              key={item.key}
+              options={item.editorComponents}
+              collapsed={true}
+            />
+          ) : index === 2 ? (
+            <SideMenuSection title="Tags" key="tags-section">
+              <TagSelectionList
+                key={item.key}
+                hasBottomPadding={Platform.OS === 'android'}
+                contentType={ContentType.Tag}
+                onTagSelect={item.onTagSelect}
+                selectedTags={item.selectedTags}
+                emptyPlaceholder={
+                  'Create a new tag using the tag button in the bottom right corner.'
+                }
+              />
+            </SideMenuSection>
+          ) : null
+        }
+      />
 
       <FAB
         buttonColor={theme.stylekitInfoColor}