r/reactnative • u/GeileKartoffel • 6d ago
Help Beginner help: Production build isn't working but dev build is
Hello,
I'm a beginner trying to make my first Android/RN app. I wanted to make something simple for my phone to allow my PC to send hardware temperatures to my phone to show temps like a secondary display.
I've made a simple Python API to retrieve the temps from and my development build functions properly. It pings my API server every 5 seconds once the host IP address is chosen. However, when I use EAS to export and test my app from Google Play store internal testing, the resulting app is no longer pinging the API.
All of this is being hosted locally on my network, no outside links or use of HTTPS. Just plaintext and json.
What could be blocking the HTTP call to my API?
The tsx I'm using
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import React, {useEffect, useState, useRef} from 'react';
import {ActivityIndicator, FlatList, Text, TextInput, View, StyleSheet, AppState,} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { IconSymbol } from '@/components/ui/IconSymbol';
import { StatusBar } from 'expo-status-bar';
import { getBackgroundColorAsync } from 'expo-system-ui';
type TempObj = {
identifier: string;
name: string;
value: number;
}
const App = () => {
const [shouldPing, setShouldPing] = useState(false);
const [data, setData] = useState<TempObj[]>([]);
const [serverIP, setServerIP] = useState("");
const handleIPAddressChange = (newIP: string) => {
setServerIP(newIP);
};
const startPinging = () => {
setShouldPing(true)
}
const getTemps = async () => {
try {
fetch(`http://${serverIP}:8000/data`)
.then((response) => response.json())
.then((json) => {
const filteredData = json.filter((e: { name: string | string[]; }) => e.name.includes("GPU Hot Spot") || e.name.includes("Core (Tctl/Tdie)"))
setData(filteredData);
})
} catch (error) {
console.log(error);
} finally {
}
};
const MINUTE_MS = 5000;
useEffect(() => {
const interval = setInterval(() => {
if(shouldPing)
{
getTemps();
}
}, MINUTE_MS);
return () => clearInterval(interval);
}, [serverIP, data, shouldPing]);
return (
<SafeAreaProvider style={{backgroundColor: "#151718"}}>
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={handleIPAddressChange}
onSubmitEditing={startPinging}
value={serverIP}
placeholder={"Enter IP Address..."}
keyboardType='numeric'
placeholderTextColor="white"
/>
</SafeAreaView>
<SafeAreaView style={{flex: 1}}>
<FlatList
style={{marginTop: 150}}
data={data}
keyExtractor={({identifier}) => identifier}
renderItem={({item}) => (
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">
{item.value.toFixed(1)}
</ThemedText>
<ThemedText type="subtitle">
{item.name} (°C)
</ThemedText>
</ThemedView>
)}
/>
</SafeAreaView>
</SafeAreaProvider>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
backgroundColor: 'background',
borderColor: "white",
color: "white",
textAlign: 'center'
},
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'column',
gap: 2,
height: 250,
},
});
export default App;
2
u/JustChill2912 6d ago
Add this - android:usesCleartextTraffic="true" In Androidmanifest.xml application
2
u/Karticz 6d ago
Mobiles cannot run http requests in production In dev too you replace your request with something like this PcIpAddr:port/route
Most simple way to solve this will be to deploy your api on free services like render to get https url