added badge wrapping in plants overview to prevent it from overflow

Project-Plants-App · May 30, 2022 · a185c9e · a185c9e
1 parent 8400c22
commit a185c9e
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/stacks/default/tabs/plants/screens/PlantsOverviewScreen.tsx b/src/stacks/default/tabs/plants/screens/PlantsOverviewScreen.tsx
@@ -44,26 +44,27 @@ export default () => {
     function renderItem({item}: ListRenderItemInfo<Plant>) {
         const renderDescription = (props: any) => {
             return (
-                <View {...props} style={[props.style, {flexDirection: "row", alignItems: "center", marginTop: 5}]}>
+                <View {...props}
+                      style={[props.style, {flexDirection: "row", alignItems: "center", flexWrap: "wrap", marginTop: 5}]}>
                     {!item.automaticallyWatered && item.lastTimeWatered &&
                         <Badge icon="droplet-outline"
                                title={formatIsoDateStringAsTimeAgo(item.lastTimeWatered)!}
-                               style={{marginRight: 5}}/>
+                               style={{marginRight: 5, marginTop: 5}}/>
                     }
                     {item.automaticallyWatered &&
                         <Badge icon="droplet-automatic-outline"
                                iconPack="assets"
                                title={i18n.t('AUTOMATICALLY_WATERED_SHORT')}
-                               style={{marginRight: 5}}/>
+                               style={{marginRight: 5, marginTop: 5}}/>
                     }
                     {item.lastTimeFertilised &&
                         <Badge icon="flash-outline"
                                title={formatIsoDateStringAsTimeAgo(item.lastTimeFertilised)!}
-                               style={{marginRight: 5}}/>
+                               style={{marginRight: 5, marginTop: 5}}/>
                     }
                     {item.lastTimeSprayed &&
                         <Badge icon="shield-outline"
-                               title={formatIsoDateStringAsTimeAgo(item.lastTimeSprayed)!}/>
+                               title={formatIsoDateStringAsTimeAgo(item.lastTimeSprayed)!} style={{marginTop: 5}}/>
                     }
                 </View>
             )