Reverts changes to app-modal and changes input window for notes on iOS

# Conflicts:
#   android/app/build.gradle
#   ios/drip/Info.plist
#   package.json

README.md

@@ -34,13 +34,31 @@ or clone it with HTTPS
 
     git clone https://gitlab.com/bloodyhealth/drip.git
 
-### 2. Node & yarn version
+### 2. Node version
 
 Make sure you are running Node 14 and classic yarn (v.1). It's easiest to switch Node versions using `nvm`, here's how to install NVM: https://github.com/nvm-sh/nvm#installing-and-updating. After installing nvm close the terminal and open it again to be able to use nvm.
 Once you have nvm running you can install node 14:
 
     nvm install v14.19.3
 
+#### On Apple Silicon M1
+
+NodeJS 14 does not compile on the M1 architecture, so it has to be installed through Rosetta: https://devzilla.io/using-nodejs-14-with-mac-silicon-m1 . 
+To activate Rosetta and switch to intel emulation run: 
+
+    arch -x86_64 zsh
+
+Run 
+
+    arch 
+
+again to verify that it returns "i386".
+Now install node 14:
+
+    nvm install v14.19.3
+
+### 3. Yarn version
+
 use npm to install yarn:
 
     npm install --global yarn
@@ -127,6 +145,18 @@ iii. If you are building the app with XCode make sure you are running this as we
 
 ### Troubleshooting
 
+#### [MacOS M1] Flipper problems
+
+If a bug in the currently used Flipper version prevents building the project, comment out the respective line in the podfile, like so:
+
+    #use_flipper!()
+
+Run 
+
+    pod install 
+
+from the ios directory again to reload the dependencies.
+
 #### [MacOS] Java problems
 
 Make sure that you have Java 1.8 by running `java -version`.

components/chart/loading-more.js

@@ -18,7 +18,7 @@ LoadingMoreView.propTypes = {
 
 const styles = StyleSheet.create({
   loadingContainer: {
-    height: 80,
+    height: '100%',
     backgroundColor: Colors.turquoiseLight,
     justifyContent: 'center',
   },

components/cycle-day/symptom-box.js

@@ -64,7 +64,7 @@ const SymptomBox = ({
         <View style={styles.textContainer}>
           <AppText style={symptomNameStyle}>{t(symptom)}</AppText>
           {symptomDataToDisplay && (
-            <AppText style={textStyle} numberOfLines={4}>
+            <AppText style={textStyle} numberOfLines={3}>
               {symptomDataToDisplay}
             </AppText>
           )}

components/cycle-day/symptom-edit-view.js

@@ -1,6 +1,12 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import {
+  Dimensions,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native'
 
 import AppModal from '../common/app-modal'
 import AppSwitch from '../common/app-switch'
@@ -111,9 +117,12 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
   const noteText = symptom === 'note' ? data.value : data.note
   const inputProps = {
     multiline: true,
-    numberOfLines: 3,
-    scrollEnabled: false,
-    style: styles.input,
+    numberOfLines: Platform.OS === 'ios' ? null : 4, // only Android
+    minHeight: Platform.OS === 'ios' ? styles.input.height : null,
+    maxHeight:
+      Platform.OS === 'ios' ? Dimensions.get('window').height * 0.4 : null,
+    style: symptom === 'note' ? null : styles.input, // overwrites previous 2 lines to fix note space in symptoms
+    scrollEnabled: true,
     textAlignVertical: 'top',
   }
 

components/stats/PeriodDetailsModal.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +9,6 @@ import AppText from '../common/app-text'
 import cycleModule from '../../lib/cycle'
 import { Spacing, Typography, Colors } from '../../styles'
 import { humanizeDate } from '../helpers/format-date'
-import LoadingMoreView from '../chart/loading-more'
 
 const Item = ({ data }) => {
   const { t } = useTranslation(null, { keyPrefix: 'plurals' })
@@ -40,36 +39,21 @@ Item.propTypes = {
 const PeriodDetailsModal = ({ onClose }) => {
   const renderItem = ({ item }) => <Item data={item} />
   const data = cycleModule().getStats()
-  const [endReached, setEndReached] = useState(false)
 
   if (!data || data.length === 0) return false
 
-  // const ITEM_HEIGHT = 50;
-  
-  // const getItemLayout = (data, index) => ({
-  //   length: ITEM_HEIGHT,
-  //   offset: ITEM_HEIGHT * index,
-  //   index
-  // });
-
   return (
     <AppModal onClose={onClose}>
       <View>
         <FlatList
           data={data}
           renderItem={renderItem}
-          // getItemLayout={getItemLayout} 
           keyExtractor={(item) => item.date}
           ItemSeparatorComponent={ItemDivider}
           ListHeaderComponent={FlatListHeader}
           ListHeaderComponentStyle={styles.headerDivider}
           stickyHeaderIndices={[0]}
-          windowSize={4}
           contentContainerStyle={styles.container}
-          onEndReached={() => setEndReached(true)}
-          onEndReachedThreshold={0.1}
-          ListFooterComponent={<LoadingMoreView end={endReached} />}
-          updateCellsBatchingPeriod={100}
         />
       </View>
     </AppModal>