problems generating native react apk with typescript

Expo SDK
1

Caracteristicas de mi Proyecto:

React Native con TypeScript y expo.
Lo trabajo con Visual Studio Code en un Sistema Windows 10 pro. Tengo Android Studio instalado, pero utilizo sus emuladores en versiones de android: 8(Api 26), 9 (api 28), 13 (api 33). Para realizar las pruebas con expo. Tambien con mi Dispositivo fisico con version 12 de Android atra vez de expo y con usb. Mientras utilizo expo para el desarrollo y pruebas todo funciona ok. Pero cuando genero el apk, solo funciona en mi emulador de android con la Api 26 en ninguno de los otros 2 emuladores funciona ni en mi dispositivo fisico, es decir, se llegan a instalar sin nigun problema, se ejecuta el app sin problemas, pero cuando intengo hacer login y preciono el boton de iniciar sesion no hace nada, deberia mostrar algun mensaje de error almenos pero no sale nada.
He generado mi apk con eas cli, luego tendré que generar ipa para ios. necesito que mi apk pueda ser utilizado desde las versiones 8 en adelante hasta la ultima verion. lo mism tendre que hacer para ios. Pero primero necesito mi apk funcional. Soy nuevo en React native con typescrit y expo, espero me puedan apoyar y dar solucion a mi problema, se los agradeceria mucho.

Mi app:
Mi aplicacion tiene un login al iniciar el cual se conecta por axios a una api que esta en la nube.

**ApiPersonas.tsx : **

import axios, { AxiosHeaders } from 'axios';
import { LocalStorage } from '../../local/LocalStorage';
import { Persona } from '../../../../Domain/entities/Persona';
import { API_BASE_URL } from '../../../../../config';


const ApiPersonasUss = axios.create({
    baseURL: API_BASE_URL,
    headers: {
        'Content-type': 'application/json'
    }
})

ApiPersonasUss.interceptors.request.use(

    async(config) => {
        const data = await LocalStorage().getItem('persona');
        if(data){
            const persona : Persona = JSON.parse(data as any);
            config.headers!['Authorization'] = persona?.session_token!
        }
        return config;
    }
);

export { ApiPersonasUss }

**config.tsx : **

export const API_BASE_URL: string = "http://104.198.61.225:3000/api";

1. app.json:

{
  "expo": {
    "name": "Personas",
    "slug": "personas",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/notificationicon.png",
          "color": "#ffffff",
          "sounds": [
            "./assets/notificationsound.wav",
            "./assets/notificationsoundother.wav"
          ]
        }
      ]
    ],
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.personas"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      }
    },
    "owner": "edgarbs27",
    "updates": {
      "fallbackToCacheTimeout": 0,
      "checkAutomatically": "ON_LOAD",
      "url": "https://u.expo.dev/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    },
    "runtimeVersion": {
      "policy": "appVersion"
    }
  }
}

2. Package.json:

{
  "name": "personas",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/bottom-tabs": "^6.5.9",
    "@react-navigation/native": "^6.1.8",
    "@react-navigation/native-stack": "^6.9.14",
    "@react-navigation/stack": "^6.3.18",
    "axios": "^1.5.0",
    "expo": "^49.0.11",
    "expo-device": "~5.4.0",
    "expo-notifications": "~0.20.1",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.5",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-modal": "^13.0.1",
    "react-native-paper": "^5.10.6",
    "react-native-reanimated": "~3.3.0",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "expo-updates": "~0.18.16"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

3. eas.json:

{
  "cli": {
    "version": ">= 5.3.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "ios":{
        "simulator":true
      },
      "android":{
        "buildType": "apk"
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

4. babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

5. tsconfig.json:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}
2

Hi @edgarbs27

I am not sure why you are not getting an error message, but the problem is probably the fact that you are using a non-encrypted connection to the web server. i.e. you are using “http” instead of “https” and these days, Android and iOS do not like that.

If you have to use “http” for some reason, then you can force Android and iOS to accept that, but it is best to host your API on a server with a valid SSL certificate so that you can use “https”.

If you insist on using “http”, try this:

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.