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 (

- + Set Temperature {!isValid && ( Please enter a valid temperature between {minTemp} and {maxTemp} °C )} {/* Password modal */} setPasswordModalVisible(false)} > Enter password to set temperature above 40°C: setPassword(text)} secureTextEntry={true} placeholder="Password" /> Submit

); };

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[bot]]

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.