fix header

apps/mobile/src/components/Container/index.js

@@ -164,15 +164,11 @@ export const Container = ({
         }}>
         {noSelectionHeader ? null : <SelectionHeader />}
 
-        <Animatable.View
-          transition={['backgroundColor', 'opacity', 'height']}
-          duration={300}
+        <View
           style={{
             position: 'absolute',
             backgroundColor: colors.bg,
-            zIndex: 800,
-            height: selectionMode ? 0 : null,
-            opacity: selectionMode ? 0 : 1,
+            zIndex: 999,
             width: '100%',
           }}>
           <Header
@@ -206,7 +202,7 @@ export const Container = ({
               value={text}
             />
           ) : null}
-        </Animatable.View>
+        </View>
 
         {children}
 

apps/mobile/src/components/SelectionHeader/index.js

@@ -27,22 +27,23 @@ export const SelectionHeader = ({navigation}) => {
 
   return (
     <Animatable.View
-      transition={['backgroundColor', 'opacity', 'height']}
-      duration={300}
+      transition={['translateY']}
+      duration={700}
+      useNativeDriver={true}
       style={{
         width: '100%',
         position: 'absolute',
-        height: selectionMode
-          ? Platform.OS === 'android'
-            ? 50 + StatusBar.currentHeight
-            : 50
-          : 0,
-        opacity: selectionMode ? 1 : 0,
+        height: Platform.OS === 'android' ? 50 + StatusBar.currentHeight : 50,
         backgroundColor: colors.bg,
         paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
         justifyContent: 'flex-end',
-        zIndex: 11,
+        zIndex: 999,
         paddingHorizontal: 12,
+        transform: [
+          {
+            translateY: selectionMode ? 0 : -100,
+          },
+        ],
       }}>
       <View
         style={{

apps/mobile/src/components/SelectionWrapper/index.js

@@ -46,31 +46,33 @@ const SelectionWrapper = ({children, item, currentEditingNote, index}) => {
         style={{
           display: selectionMode ? 'flex' : 'none',
           opacity: selectionMode ? 1 : 0,
+          width: '10%',
+          height: 70,
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingRight: 8,
         }}>
         <TouchableWithoutFeedback
           onPress={() => {
             dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
           }}
           style={{
-            width: '10%',
-            height: 70,
             justifyContent: 'center',
             alignItems: 'center',
-            paddingRight: 15,
           }}>
           <View
             style={{
               borderWidth: 2,
               borderColor: selected ? colors.accent : colors.icon,
-              width: 30,
-              height: 30,
+              width: 25,
+              height: 25,
               justifyContent: 'center',
               alignItems: 'center',
               borderRadius: 100,
-              paddingTop: 4,
+              paddingTop: 2,
             }}>
             {selected ? (
-              <Icon size={SIZE.md} color={colors.accent} name="check" />
+              <Icon size={SIZE.sm} color={colors.accent} name="check" />
             ) : null}
           </View>
         </TouchableWithoutFeedback>