fix: replace % string style values with pixel values to fix RN web crash on Strategy page

Author: sbasu107

src/components/WeatherForecastUI.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useTheme } from '../theme/ThemeProvider';
@@ -49,6 +49,8 @@ export default function WeatherForecastUI({ latitude, longitude, useImperialUnit
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [barWrapperWidth, setBarWrapperWidth] = useState(0);
+  const onBarWrapperLayout = useCallback((e) => setBarWrapperWidth(e.nativeEvent.layout.width), []);
 
   useEffect(() => {
     if (!latitude || !longitude) return;
@@ -151,29 +153,37 @@ export default function WeatherForecastUI({ latitude, longitude, useImperialUnit
         </View>
         <View style={styles.dailyList}>
           {dailyData.map((day, i) => {
-            const leftOffset = ((day.min - absoluteMin) / rangeTotal) * 100;
-            const barWidth = ((day.max - day.min) / rangeTotal) * 100;
-            
+            // Use pixel values — percentage strings crash React Native on web (StyleSheet.replace bug)
+            const leftFraction = (day.min - absoluteMin) / rangeTotal;
+            const widthFraction = (day.max - day.min) / rangeTotal;
+            const pixelLeft = barWrapperWidth * leftFraction;
+            const pixelWidth = Math.max(4, barWrapperWidth * widthFraction);
+
             return (
               <View key={i} style={styles.dailyRow}>
                 <Text style={[styles.dailyDayName, { color: theme.colors.text }]}>{getDayName(day.time)}</Text>
                 <View style={styles.dailyIconBox}>
                   <Ionicons name={getWeatherIcon(day.weathercode)} size={20} color={theme.colors.primary} />
                 </View>
                 <Text style={[styles.dailyMin, { color: theme.colors.muted }]}>{day.min}°</Text>
-                
-                {/* Visual Temperature Distribution Bar */}
-                <View style={[styles.dailyBarWrapper, { backgroundColor: 'rgba(156, 163, 175, 0.2)' }]}>
-                  <View 
-                    style={[
-                      styles.dailyBar, 
-                      { 
-                        left: `${leftOffset}%`, 
-                        width: `${barWidth}%`,
-                        backgroundColor: theme.colors.primary
-                      }
-                    ]} 
-                  />
+
+                {/* Visual Temperature Distribution Bar (pixel-based to avoid RN web % crash) */}
+                <View
+                  style={[styles.dailyBarWrapper, { backgroundColor: 'rgba(156, 163, 175, 0.2)' }]}
+                  onLayout={i === 0 ? onBarWrapperLayout : undefined}
+                >
+                  {barWrapperWidth > 0 && (
+                    <View
+                      style={[
+                        styles.dailyBar,
+                        {
+                          left: pixelLeft,
+                          width: pixelWidth,
+                          backgroundColor: theme.colors.primary,
+                        },
+                      ]}
+                    />
+                  )}
                 </View>
 
                 <Text style={[styles.dailyMax, { color: theme.colors.text }]}>{day.max}°</Text>