i’m having a little truble here

I created a Flask server running on my personal computer at IP 192.168.1.3:5000, and by itself, it works very well. I tested the requests using Insomnia and through the web, and everything worked perfectly.

However, when the requests are being made from my Expo application on my smartphone, they do not work. It’s as if the application does not have access to local network requests or something similar.

I did some research and found information about permissions in the app.json file. I made the changes as suggested, but it didn’t work. I still only have access from the desktop.

It’s also worth mentioning that if I access the same endpoint through the smartphone’s web browser, I can see the “hello world” message that I inserted at the “/” route of the server. So, I don’t believe it’s a problem with my machine’s IP or the communication between devices within the local network.

Here’s some code:

My flask server:

from flask import Flask, request
from ctypes import windll
from comtypes import CLSCTX_ALL
from pycaw.pycaw import AudioUtilities, IAudioEndpointVolume
from flask_cors import CORS
import requests

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

VLC_PASSWORD = 'vlcpassword'
VLC_URL = 'http://localhost:8080/requests/status.json'
VK_MEDIA_PLAY_PAUSE = 0xB3
VK_VOLUME_UP = 0xAF
VK_VOLUME_DOWN = 0xAE

def press_key(hexKeyCode):
    windll.user32.keybd_event(hexKeyCode, 0, 0, 0)
    windll.user32.keybd_event(hexKeyCode, 0, 2, 0)

def set_volume(level):
    devices = AudioUtilities.GetSpeakers()
    interface = devices.Activate(IAudioEndpointVolume._iid_, CLSCTX_ALL, None)
    volume = interface.QueryInterface(IAudioEndpointVolume)
    volume.SetMasterVolumeLevelScalar(level, None)

def send_vlc_command(command):
  url = f'http://localhost:8080/requests/status.json?command={command}'
  response = requests.get(url, auth=('', VLC_PASSWORD))
  return response.status_code == 200

@app.route('/play_pause', methods=['POST'])
def play_pause():
  data = request.get_json()
  is_vlc = data.get('is_vlc', "False")
  if is_vlc == "True":
    send_vlc_command('pl_pause')
    return 'VLC play/pause triggered'
  else:
    press_key(VK_MEDIA_PLAY_PAUSE)
    return 'Play/pause triggered'

@app.route('/volume_up', methods=['POST'])
def volume_up():
  data = request.get_json()
  is_vlc = data.get('is_vlc', False)
  if is_vlc == "True":
    send_vlc_command('volume&val=%2B20')
    return 'VLC volume up triggered'
  else:
    press_key(VK_VOLUME_UP)
    return 'Volume up triggered'

@app.route('/volume_down', methods=['POST'])
def vlc_volume_down():
  data = request.get_json()
  is_vlc = data.get('is_vlc', False)
  if is_vlc == "True":
    send_vlc_command('volume&val=-20')
    return 'VLC volume down triggered'
  else:
    press_key(VK_VOLUME_DOWN)
    return 'Volume down triggered'
  
@app.route('/')
def hello():
  return "Hello, World!"

if __name__ == '__main__':
    app.run(host='192.168.1.3', port=5000)

my index.tsx from my expo app:

import React, { useState } from 'react';
import CustomButton from '../../components/CustomButton';
import { StyleSheet, View, Text, Switch } from 'react-native';
import axios from 'axios';

const TabOneScreen = () => {
  const [isVLC, setIsVLC] = useState(false); 
  const [serverIsOnline, setServerIsOnline] = useState(false); 
  const [log, setLog] = useState<any[]>([]); 
  const vlcServerURL = 'http://192.168.1.3:5000'; 

  const handlePlayPause = async () => {
    try {
      const response = await axios.post(vlcServerURL + '/play_pause', {
        is_vlc: isVLC ? 'True' : 'False'
      });
      console.log(response.data);
      setLog([...log, response.data]);
      setLog([...log, response.status]);
    } catch (error) {
      console.error('Fail:', error);
    }
  };

  const handleVolumeUp = async () => {
    try {
      const response = await axios.post(vlcServerURL + '/volume_up', {
          is_vlc: isVLC ? 'True' : 'False',
      });
      console.log(response.data);
    } catch (error) {
      console.error('Fail:', error);
    }
  };

  const handleVolumeDown = async () => {
    try {
      const response = await axios.post(vlcServerURL + '/volume_down', {
        is_vlc: isVLC ? 'True' : 'False'
      });
      console.log(response.data);
    } catch (error) {
      console.error('Fail:', error);
    }
  };

  const testConnection = async () => {
    try {
      console.log(vlcServerURL)
      const response = await axios.get(vlcServerURL + '/');
      setLog([...log, response.data]);
      if (response.status === 200) {
        setServerIsOnline(true);
      }
    } catch (error) {
      console.error('Failure on connection:', error);
    }
  };

  React.useEffect(() => {
    testConnection();
  }, []);

  return (
   visual things here ...
  );
};



export default TabOneScreen;

my app.json android permissions:

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.teago.tvpccontrol",
      "permissions": ["INTERNET", "ACCESS_NETWORK_STATE"]
    },`