hoangnm / react-native-week-view

Week View Component for react-native
MIT License
281 stars 98 forks source link

BUG: react-native-web scroll and hours display broken #327

Open rdewolff opened 8 months ago

rdewolff commented 8 months ago

Bug description: when using the React Native web the display is broken for the the left menu and the alignment with the days seems to be wrong as well.

Visual demo: https://github.com/hoangnm/react-native-week-view/assets/130704/67096d0a-bffa-4646-8689-53c50d09c1e7

Environment: React-native-web

rdewolff commented 8 months ago

FIrst issue with the hours can be fixed via this patch. This will make the hours on the side render on a new line properly.

diff --git a/node_modules/react-native-week-view/src/Times/Times.styles.js b/node_modules/react-native-week-view/src/Times/Times.styles.js
index a08cdab..ab72348 100644
--- a/node_modules/react-native-week-view/src/Times/Times.styles.js
+++ b/node_modules/react-native-week-view/src/Times/Times.styles.js
@@ -3,10 +3,10 @@ import { StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
   container: {
     // Matches CONTENT_TOP_PADDING but in Text size
-    paddingTop: 10,
+    marginTop: 10,
   },
   label: {
-    flex: 0,
+    flex: 1,
   },
   text: {
     fontSize: 12,

edit: found the paddingTop hack to align the hours and the events on the grid