Getting Started

This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# Need to execute pod install:
cd ios && pod install && cd ..

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

Open App.tsx in your text editor of choice and edit some lines.
For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Empaquetado

Construir un APK para Android:

1. Limpiar el Proyecto

Antes de construir el APK, es recomendable limpiar el proyecto para asegurarse de que no haya caché o archivos viejos que puedan causar problemas.

cd android
./gradlew clean
cd ..

2. Construir el APK en Modo Debug (Para pruebas rápidas)

Para generar un APK en modo debug, usa el siguiente comando:

npx react-native run-android

Esto generará un APK de debug y lo instalará en tu dispositivo o emulador. El APK se encuentra en:

android/app/build/outputs/apk/debug/app-debug.apk

3. Construir el APK en Modo Release (Versión Final)

Para generar un APK en modo release, primero asegúrate de tener configurados los detalles de la firma (keystore) en el archivo android/app/build.gradle.

Si aún no has configurado tu keystore, sigue estos pasos:

Configurar la Firma (Keystore)

Crea un archivo keystore con el siguiente comando:

keytool -genkeypair -v -keystore my-release-key.keystore -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias

Luego, agrega la configuración del keystore en el archivo android/app/build.gradle dentro de la sección signingConfigs:

  signingConfigs {
      release {
          storeFile file(keystoreProperties['MYAPP_UPLOAD_STORE_FILE'])
          storePassword keystoreProperties['MYAPP_UPLOAD_STORE_PASSWORD']
          keyAlias keystoreProperties['MYAPP_UPLOAD_KEY_ALIAS']
          keyPassword keystoreProperties['MYAPP_UPLOAD_KEY_PASSWORD']
      }
  }

Asegúrate de que la ruta y las contraseñas estén correctas.

Luego, dentro de la sección buildTypes, agrega la configuración de la firma para release:

buildTypes {
    release {
        signingConfig signingConfigs.release
        // Otras configuraciones como proguard, etc.
    }
}

Generar el APK de Release

Una vez configurado el keystore, puedes generar el APK en modo release con este comando:

cd android
./gradlew assembleRelease
cd ..

Verificar el APK de Release

Si todo está correctamente configurado, deberías poder generar la APK o el AAB firmado sin problemas. Puedes verificar la firma de la APK usando el siguiente comando:

jarsigner -verify -verbose -certs path/to/your/app-release.apk

Este comando generará el APK de release y lo ubicará en:

android/app/build/outputs/apk/release/app-release.apk

Este APK está listo para distribución, ya sea para probar en dispositivos reales o para subir a tiendas de aplicaciones como Google Play.

4. Generar APK para Firmar Manualmente

Si no deseas configurar un keystore, también puedes generar un APK en release sin firmarlo y luego firmarlo manualmente con el siguiente comando:

cd android
./gradlew assembleRelease -Dsigning.keyAlias=my-key-alias -Dsigning.keyPassword=my-key-password -Dsigning.storeFile=path/to/my-release-key.keystore -Dsigning.storePassword=my-key-store-password
cd ..

Esto generará el APK sin firma, y puedes firmarlo después con las herramientas de Java.

Resumen de Comandos:

Limpiar el proyecto:
```
cd android
./gradlew clean
cd ..
```

Generar APK de Debug:

npx react-native run-android

2.1 Generar APK de Debug:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

npx react-native run-android

2.2 Generar APK de Debug (Opcion 2):

cd android
./gradlew assembleDebug
cd ..

Generar APK de Release:

cd android
./gradlew assembleRelease
cd ..

Eliminar el caché de la app

Limpiar la caché de Gradle (Android)

Eliminar la caché de Gradle manualmente:

Gradle guarda los archivos de caché en el directorio .gradle dentro de tu proyecto y también en la caché global de Gradle. Para limpiar la caché de Gradle, puedes hacer lo siguiente:
- Navega hasta la carpeta de tu proyecto React Native.
- Borra el directorio .gradle dentro de la carpeta del proyecto. Puedes hacerlo manualmente o con el siguiente comando en la terminal:
```
rm -rf android/.gradle
```
- También puedes limpiar la caché global de Gradle (en tu sistema) ejecutando el siguiente comando en tu terminal:
```
gradle cleanBuildCache
```
Limpiar la caché de la build de Android:

Gradle también guarda ciertos archivos de construcción intermedios en la carpeta android/build. Para limpiar estos archivos, ve a la carpeta de tu proyecto y elimina el directorio build de Android:
```
rm -rf android/build
```

Limpiar la caché de React Native (npm)

A veces, la caché de los paquetes de npm puede causar problemas al ejecutar la aplicación. Puedes limpiar la caché de npm con el siguiente comando:

npm cache clean --force

Pasos completos para limpiar todo

Para asegurarte de que todo esté limpio, sigue estos pasos:

Eliminar caché de Gradle y archivos de build:

En tu terminal, ejecuta los siguientes comandos:
```
rm -rf android/.gradle
rm -rf android/build
```
Limpiar caché de npm:
```
npm cache clean --force
```
Reinstalar las dependencias de npm:

Asegúrate de que las dependencias estén actualizadas después de limpiar la caché:
```
npm install
```
Ejecutar la aplicación de nuevo:

Ahora puedes intentar ejecutar de nuevo la aplicación en Android con:
```
npm run android
```

Usar Gradle Wrapper para limpiar caché

Si no estás seguro de la configuración de Gradle, también puedes usar el Gradle Wrapper (en lugar de Gradle global) para limpiar los archivos de caché y realizar una compilación limpia. Ejecuta el siguiente comando dentro del directorio android/ de tu proyecto:

cd android
./gradlew clean

Este comando elimina las compilaciones anteriores y limpia la caché de Gradle de manera más controlada.

Resumen

Elimina manualmente el directorio .gradle dentro de android/ y el directorio build/ de la misma carpeta.
Limpia la caché de npm con npm cache clean --force.
Ejecuta npm install para reinstalar las dependencias.
Usa ./gradlew clean en la carpeta android para limpiar la caché de Gradle si es necesario.

Para iOS en un proyecto de React Native, también es posible que la caché de la construcción y las dependencias de CocoaPods causen problemas. Aquí te dejo los pasos para limpiar la caché y asegurarte de que la app se compile correctamente en iOS:

1. Limpiar la caché de CocoaPods

CocoaPods maneja las dependencias de iOS. Puedes limpiar la caché de CocoaPods con el siguiente comando:

pod cache clean --all

Esto eliminará la caché de todos los pods descargados, lo que es útil si estás teniendo problemas con dependencias desactualizadas o corruptas.

2. Limpiar los archivos de construcción de Xcode

Los archivos generados por Xcode también pueden estar causando problemas. Puedes limpiar los archivos de construcción con:

cd ios
xcodebuild clean

Este comando limpiará el directorio de construcción de Xcode. Después de esto, Xcode volverá a construir la aplicación desde cero la próxima vez que la ejecutes.

3. Eliminar y reinstalar los Pods

A veces, eliminar y reinstalar los Pods puede resolver problemas relacionados con dependencias en iOS. Sigue estos pasos:

Navega a la carpeta ios de tu proyecto React Native.
Elimina el directorio Pods/ y el archivo Podfile.lock:
```
rm -rf Pods
rm -rf Podfile.lock
```
Luego, reinstala los pods:
```
pod install
```
Este comando reinstalará todas las dependencias de CocoaPods.

4. Limpiar la caché de npm o yarn

Al igual que con Android, es posible que la caché de npm o yarn esté afectando la construcción. Para limpiar la caché de npm, puedes ejecutar:

npm cache clean --force

Si usas Yarn, puedes limpiar su caché con:

yarn cache clean

5. Eliminar el directorio de build de iOS

El directorio build contiene archivos de compilación intermedios. Puedes eliminarlo manualmente con:

rm -rf ios/build

Esto garantiza que se genere una compilación limpia la próxima vez que construyas la aplicación.

6. Ejecutar la aplicación en iOS

Finalmente, después de limpiar la caché, puedes ejecutar la aplicación en iOS con:

npx react-native run-ios

O si estás usando un dispositivo físico o un simulador específico, puedes usar:

npx react-native run-ios --device "NombreDelDispositivo"

Resumen de los pasos para iOS:

Limpiar la caché de CocoaPods:
```
pod cache clean --all
```
Limpiar la construcción de Xcode:
```
cd ios
xcodebuild clean
```

Eliminar y reinstalar los Pods:

rm -rf Pods
rm -rf Podfile.lock
pod install

Limpiar la caché de npm o yarn:
```
npm cache clean --force
```
o
```
yarn cache clean
```
Eliminar la carpeta build:
```
rm -rf ios/build
```
Ejecutar la aplicación en iOS:
```
npx react-native run-ios
```

Subida de la app a play store

1. Generar la Clave de Subida

Primero, necesitas generar una clave de subida para firmar tu aplicación antes de subirla a la Play Store. Puedes hacerlo usando keytool:

keytool -genkeypair -v -keystore simijuegos-upload.keystore -alias simijuegos-mobile-app -keyalg RSA -keysize 2048 -validity 10000

Recuerda guardar la contraseña de la clave y el alias, ya que los necesitarás más adelante.

2. Configurar Gradle

Coloca el archivo simijuegos-upload.keystore en la carpeta android/app y actualiza el archivo android/gradle.properties y el archivo android/local.properties (si no existe debes crearlo) con las siguientes variables:

MYAPP_UPLOAD_STORE_FILE=simijuegos-upload.keystore
MYAPP_UPLOAD_KEY_ALIAS=simijuegos-mobile-app
UPLOAD_STORE_PASSWORD=UPLOAD_STORE_PASSWORD
UPLOAD_KEY_PASSWORD=UPLOAD_KEY_PASSWORD

3. Actualizar `build.gradle`

Asegúrate de que el archivo android/app/build.gradle esté configurado para usar la clave de subida:

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

react {
    autolinkLibrariesWithApp()
}

def enableProguardInReleaseBuilds = false
def jscFlavor = 'org.webkit:android-jsc:+'

import java.util.Properties
def loadPropertiesFile() {
    def propertiesFile = rootProject.file("../.env")
    def properties = new Properties()
    if (propertiesFile.exists()) {
        properties.load(new FileInputStream(propertiesFile))
    } else {
        throw new GradleException("Properties file '${propertiesFile}' not found")
    }
    return properties
}

def env = loadPropertiesFile()

android {
    ndkVersion rootProject.ext.ndkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion

    namespace "com.simijuegos"
    defaultConfig {
        applicationId "com.simijuegos"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    flavorDimensions "store"
    productFlavors {
        play {
            dimension "store"
        }
        amazon {
            dimension "store"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            if (!env['MYAPP_UPLOAD_STORE_FILE'] || !env['UPLOAD_STORE_PASSWORD'] || !env['MYAPP_UPLOAD_KEY_ALIAS'] || !env['UPLOAD_KEY_PASSWORD']) {
                throw new GradleException("One or more environment variables are missing.")
            }
            storeFile file(env['MYAPP_UPLOAD_STORE_FILE'])
            storePassword env['UPLOAD_STORE_PASSWORD']
            keyAlias env['MYAPP_UPLOAD_KEY_ALIAS']
            keyPassword env['UPLOAD_KEY_PASSWORD']
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    applicationVariants.all { variant -> 
        variant.outputs.all { output -> 
            def newApkName = "SimiJuegos-${variant.buildType.name}-${variant.versionName}.apk"
            output.outputFileName = newApkName
        }
    }
}

dependencies {
    implementation("com.facebook.react:react-android")
    implementation 'com.android.billingclient:billing:5.0.0'
    implementation 'com.google.android.gms:play-services-base:18.0.0'

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }

    implementation(project(path: ":react-native-iap", configuration: "default"))
}

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Si se deséa cambiar el nombre del APK generado podemos modificar el outputFileName en el archivo android/app/build.gradle.

Pasos para Cambiar el Nombre del APK

Abre el archivo android/app/build.gradle.
Añade el siguiente bloque dentro de android para configurar el nombre de salida del APK:

android {
    ...
    // Configura el nombre del archivo APK de salida
    applicationVariants.all { variant ->
        variant.outputs.all { output ->
            def newApkName = "SimiJuegos-${variant.buildType.name}-${variant.versionName}.apk"
            output.outputFileName = newApkName
        }
    }
    ...
}

Generar el APK

El APK generado debería tener el nombre que configuraste, como SimiJuegos-release-1.0.apk, en lugar de app-release.apk.

4. Generar el APK de Lanzamiento

Con la configuración completa, puedes generar el APK de lanzamiento:

cd android
# Puede no ser necesario si está bien configurados los .env
set UPLOAD_STORE_PASSWORD=your-keystore-password
set UPLOAD_KEY_PASSWORD=your-key-password
./gradlew assembleRelease

Esto generará un archivo SimiJuegos-release.apk en la carpeta android/app/build/outputs/apk/release.

5. Subir a la Play Store

Accede a tu cuenta de Google Play Console y selecciona tu proyecto.
Sube el archivo APK generado (app-release.apk) a través de la sección de lanzamientos.
Completa los detalles necesarios como descripción, capturas de pantalla, etc.
Revisa y publica tu aplicación.

6. Automatización con CI/CD

Para automatizar este proceso, puedes usar herramientas como Buddy o GitHub Actions para configurar un flujo de trabajo de Integración y Despliegue Continuo (CI/CD).

Recursos Adicionales

Now what?

If you want to add this new React Native code to an existing application, check out the Integration guide.
If you're curious to learn more about React Native, check out the Introduction to React Native.

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

React Native Website - learn more about React Native.
Getting Started - an overview of React Native and how setup your environment.
Learn the Basics - a guided tour of the React Native basics.
Blog - read the latest official React Native Blog posts.
@facebook/react-native - the Open Source; GitHub repository for React Native.

Name		Name	Last commit message	Last commit date
Latest commit History 35 Commits
.bundle		.bundle
__tests__		__tests__
android		android
assets/fonts		assets/fonts
img		img
ios		ios
src		src
.env.example		.env.example
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierrc.js		.prettierrc.js
.watchmanconfig		.watchmanconfig
App.tsx		App.tsx
Gemfile		Gemfile
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
global-class.tsx		global-class.tsx
index.js		index.js
jest.config.js		jest.config.js
metro.config.js		metro.config.js
package-lock.json		package-lock.json
package.json		package.json
react-native.config.js		react-native.config.js
tsconfig.json		tsconfig.json

AroundTheLabTech/Mobile-React-Native-For-Farmacias-Similares

Folders and files

Latest commit

History

Repository files navigation

Getting Started

Step 1: Start the Metro Server

Step 2: Start your Application

For Android

For iOS

Step 3: Modifying your App

Empaquetado

1. Limpiar el Proyecto

2. Construir el APK en Modo Debug (Para pruebas rápidas)

3. Construir el APK en Modo Release (Versión Final)

Configurar la Firma (Keystore)

Generar el APK de Release

Verificar el APK de Release

4. Generar APK para Firmar Manualmente

Resumen de Comandos:

Eliminar el caché de la app

Limpiar la caché de Gradle (Android)

Limpiar la caché de React Native (npm)

Pasos completos para limpiar todo

Usar Gradle Wrapper para limpiar caché

Resumen

1. Limpiar la caché de CocoaPods

2. Limpiar los archivos de construcción de Xcode

3. Eliminar y reinstalar los Pods

4. Limpiar la caché de npm o yarn

5. Eliminar el directorio de build de iOS

6. Ejecutar la aplicación en iOS

Resumen de los pasos para iOS:

Subida de la app a play store

1. Generar la Clave de Subida

2. Configurar Gradle

3. Actualizar build.gradle

Pasos para Cambiar el Nombre del APK

Generar el APK

4. Generar el APK de Lanzamiento

5. Subir a la Play Store

6. Automatización con CI/CD

Recursos Adicionales

Now what?

Troubleshooting

Learn More

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 3

Uh oh!

Languages

3. Actualizar `build.gradle`

Packages