App crash

[GamingHazard]

Description

So thing is i used react native SVG to create a thermometer tuning gauge and when i created an apk, it just keep crushing without opening but runs and builds on the Expo Go debbuging app with no errors, what could be the problem? What other options do i have besides using SVG?

"import React, { useRef, useState, useEffect } from "react";
import {
View,
Text,
StyleSheet,
Animated,
PanResponder,
TextInput,
TouchableOpacity,
Alert,
Modal,
} from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Svg, { Circle, G, Line, Text as SvgText } from "react-native-svg";

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const LivingRoomTemp = () => {
const [temperature, setTemperature] = useState("0.0");
const [isValid, setIsValid] = useState(true);
const minTemp = 0;
const maxTemp = 100;
const gaugeWidth = 200;
const gaugeHeight = 200;
const radius = 80;
const centerX = gaugeWidth / 2;
const centerY = gaugeHeight / 2;

// Initialize lastAngle using AsyncStorage or default to -135
const [lastAngle, setLastAngle] = useState(-135);
const [passwordModalVisible, setPasswordModalVisible] = useState(false);
const [password, setPassword] = useState("");

useEffect(() => {
const loadLastAngle = async () => {
try {
const storedAngle = await AsyncStorage.getItem("livingRoomLastAngle");
if (storedAngle !== null) {
setLastAngle(parseFloat(storedAngle));
}
} catch (error) {
console.error("Error loading last angle:", error);
}
};

loadLastAngle();

}, []);

const angle = useRef(new Animated.Value(lastAngle)).current;
const circumference = 2 * Math.PI * radius;

const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([null, { dx: 0, dy: angle }], {
useNativeDriver: false,
listener: async (event, gestureState) => {
const newAngle = Math.max(-135, Math.min(gestureState.dy, 135));
angle.setValue(newAngle);
setLastAngle(newAngle);
try {
await AsyncStorage.setItem(
"livingRoomLastAngle",
newAngle.toString()
);
} catch (error) {
console.error("Error saving last angle:", error);
}

      const newTemp =
        ((newAngle + 135) / 270) * (maxTemp - minTemp) + minTemp;
      setTemperature(newTemp.toFixed(1)); // Round to 1 decimal place
    },
  }),
})

).current;

const handleTemperatureChange = (text) => {
// Validate and update temperature state
if (text.length > 5) {
setIsValid(false);
return;
}

setTemperature(text);
if (text === "") {
  // Handle empty input
  setTemperature("");
  setIsValid(false);
  return;
}
const newTemp = parseFloat(text);
if (
  !isNaN(newTemp) &&
  newTemp >= minTemp &&
  newTemp <= maxTemp &&
  text === newTemp.toString()
) {
  const newAngle = ((newTemp - minTemp) / (maxTemp - minTemp)) * 270 - 135;
  angle.setValue(newAngle);
  setLastAngle(newAngle);
  setIsValid(true);
} else {
  setIsValid(false);
}

};

const incrementTemperature = () => {
const currentTemp = parseFloat(temperature);
if (currentTemp < maxTemp) {
const newTemp = (currentTemp + 1).toFixed(1); // Increase temperature by 1 unit
setTemperature(newTemp);
const newAngle = ((newTemp - minTemp) / (maxTemp - minTemp)) * 270 - 135;
angle.setValue(newAngle);
setLastAngle(newAngle);
}
};

const decrementTemperature = () => {
const currentTemp = parseFloat(temperature);
if (currentTemp > minTemp) {
const newTemp = (currentTemp - 1).toFixed(1); // Decrease temperature by 1 unit
setTemperature(newTemp);
const newAngle = ((newTemp - minTemp) / (maxTemp - minTemp)) * 270 - 135;
angle.setValue(newAngle);
setLastAngle(newAngle);
}
};

const handleSetTemperature = async () => {
// Check if temperature requires password
if (parseFloat(temperature) > 40) {
setPasswordModalVisible(true);
} else {
await saveTemperature();
}
};

const saveTemperature = async () => {
// Save temperature to AsyncStorage
try {
await AsyncStorage.setItem(
"livingRoomTemperature",
temperature.toString()
);
Alert.alert("Temperature Set", Temperature set to ${temperature} °C);
} catch (error) {
console.error("Error saving temperature:", error);
}
};

const handlePasswordSubmit = async () => {
// Check password and save temperature if correct
if (password === "your_password_here") {
await saveTemperature();
setPassword("");
setPasswordModalVisible(false);
} else {
Alert.alert("Invalid Password", "Please enter the correct password.");
}
};

useEffect(() => {
const loadTemperature = async () => {
try {
const storedTemperature = await AsyncStorage.getItem(
"livingRoomTemperature"
);
if (storedTemperature !== null) {
setTemperature(storedTemperature);
}
} catch (error) {
console.error("Error loading temperature:", error);
}
};

loadTemperature();

}, []);

useEffect(() => {
const saveTemperature = async () => {
try {
await AsyncStorage.setItem(
"livingRoomTemperature",
temperature.toString()
);
} catch (error) {
console.error("Error saving temperature:", error);
}
};

saveTemperature();

return () => saveTemperature();

}, [temperature]);

// Calculate marker positions
const markerPositions = Array.from({ length: 12 }).map((_, index) => {
const angleDeg = index * 30 - 135; // 12 markers evenly spaced
const angleRad = angleDeg * (Math.PI / 180);
const markerX = centerX + (radius + 10) * Math.cos(angleRad); // Extend by 10 units outside radius
const markerY = centerY + (radius + 10) * Math.sin(angleRad); // Extend by 10 units outside radius
return { x: markerX, y: markerY };
});

return (


{/* Base circle /}

{/ Filled circle */}
<AnimatedCircle
cx={centerX}
cy={centerY}
r={radius}
stroke="#e9cdb3"
strokeWidth={5}
fill="none"
strokeDasharray={[circumference, circumference]}
strokeDashoffset={angle.interpolate({
inputRange: [-135, 200],
outputRange: [circumference, 40],
extrapolate: "clamp",
})}
strokeLinecap="round"
rotation="-225" // Adjust this value as needed for proper alignment
origin={${centerX},${centerY}}
/>

    {/* Gauge line */}
    <G rotation={angle._value} origin={`${centerX},${centerY}`}>
      <Line
        x1={centerX}
        y1={centerY - radius}
        x2={centerX}
        y2={centerY - radius + 20}
        stroke="#070945"
        strokeWidth={1.5}
      />
    </G>
    {/* Text display */}
    <SvgText
      x={centerX}
      y={centerY - 0} // Adjust the y position to center the text
      textAnchor="middle"
      fontSize="40"
      fontWeight="bold"
    >
      {temperature === "" ? "" : `${temperature} °C`}
    </SvgText>
    <SvgText
      x={centerX}
      y={centerY + 30} // Adjust the y position to center the text
      textAnchor="middle"
      fontSize="20"
      fill="gray"
    >
      Celsius
    </SvgText>
    {/* Markers */}
    {markerPositions.map((marker, index) => (
      <Circle
        key={index}
        cx={marker.x}
        cy={marker.y}
        r={3} // Size of the points
        fill="#070945"
      />
    ))}
  </Svg>

  <View style={styles.inputContainer}>
    <TouchableOpacity style={styles.button} onPress={decrementTemperature}>
      <Text style={styles.buttonText}>-</Text>
    </TouchableOpacity>
    <TextInput
      style={[styles.input, !isValid && styles.invalidInput]}
      value={temperature}
      onChangeText={handleTemperatureChange}
      keyboardType="numeric"
      placeholder="Set temperature"
      maxLength={5}
    />
    <TouchableOpacity style={styles.button} onPress={incrementTemperature}>
      <Text style={styles.buttonText}>+</Text>
    </TouchableOpacity>
    <TouchableOpacity
      style={[styles.submitButton, !isValid && styles.disabledButton]}
      onPress={handleSetTemperature} // Call function to save temperature
      disabled={!isValid}
    >
      <Text style={styles.buttonText}>Set Temperature</Text>
    </TouchableOpacity>
  </View>
  {!isValid && (
    <Text style={styles.errorText}>
      Please enter a valid temperature between {minTemp} and {maxTemp} °C
    </Text>
  )}

  {/* Password modal */}
  <Modal
    animationType="slide"
    transparent={true}
    visible={passwordModalVisible}
    onRequestClose={() => setPasswordModalVisible(false)}
  >
    <View style={styles.modalContainer}>
      <View style={styles.modalContent}>
        <Text style={styles.modalText}>
          Enter password to set temperature above 40°C:
        </Text>
        <TextInput
          style={styles.passwordInput}
          value={password}
          onChangeText={(text) => setPassword(text)}
          secureTextEntry={true}
          placeholder="Password"
        />
        <TouchableOpacity
          style={styles.passwordButton}
          onPress={handlePasswordSubmit}
        >
          <Text style={styles.buttonText}>Submit</Text>
        </TouchableOpacity>
      </View>
    </View>
  </Modal>
</View>

);
};

const styles = StyleSheet.create({
container: {
alignItems: "center",
marginTop: 20,
},
inputContainer: {
flexDirection: "row",
alignItems: "center",
marginTop: 20,
},
input: {
width: 120,
height: 40,
borderColor: "#ccc",
borderWidth: 1,
paddingHorizontal: 10,
borderRadius: 5,
marginRight: 10,
},
invalidInput: {
borderColor: "red",
},
submitButton: {
backgroundColor: "#e9cdb3",
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 5,
marginLeft: 10,
},
disabledButton: {
backgroundColor: "#ccc",
},
buttonText: {
fontSize: 16,
fontWeight: "bold",
color: "#333",
},
errorText: {
color: "red",
marginTop: 10,
},
button: {
backgroundColor: "#ccc",
paddingVertical: 10,
paddingHorizontal: 15,
borderRadius: 5,
marginHorizontal: 5,
},
modalContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
modalContent: {
backgroundColor: "white",
padding: 20,
borderRadius: 10,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
modalText: {
marginBottom: 10,
fontSize: 16,
textAlign: "center",
},
passwordInput: {
width: 200,
height: 40,
borderColor: "#ccc",
borderWidth: 1,
paddingHorizontal: 10,
borderRadius: 5,
marginBottom: 10,
},
passwordButton: {
backgroundColor: "#e9cdb3",
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 5,
},
});

export default LivingRoomTemp;
" This is the component

Steps to reproduce

Created the component
Debugged it
Ran it on Expo go debbuging app and worked fine
Created apk using eas build
Installed apk with no errors
Tried running the app en it keeps crushing

Snack or a link to a repository

https://expo.dev/artifacts/eas/qJzwSLU9aaBfnRtQmqnVGr.apk

SVG version

Latest

React Native version

Latest

Platforms

Android

JavaScript runtime

JSC

Workflow

Expo Go

Architecture

None

Build type

Debug app & dev bundle

Device

Real device

Device model

Galaxy note 10plus (V12)

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[bohdanprog]

@GamingHazard Hello,
could you provide a repo with your example, thank you.