Geonity Guide

Arrancar react native

# instala los paquetes
- npm i

# leer el archivo podfile que contiene las dependencias y las instala
- cd ios
- pod install

# Cambiar el ViewPropTypes. Para ello, "accede a node_modules/react-native/index.js" y sustituye el contenido a continuación "//Deprecated Prop Types" por:

get ColorPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ColorPropType;
},

get EdgeInsetsPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
},

get PointPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').PointPropType;
},

get ViewPropTypes(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ViewPropTypes;
},

Comandos para arrancar el proyecto

• npx react-native run-android
• npx react-native run-ios

Comandos de utilidad para sacar a producción

# limpia el proyecto
- cd android
- ./gradlew clean 

# limpia el proyecto para sacar a producción en android
- 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/

Subir a producción Android

1. En android studio le damos al desplegable "Build" -> "Generate signed bundle/APK"
2. En la ventana que se abre, le damos a la opción "Android app bundle"
3. Elegimos la carpeta que contendrá la keystore y luego escribimos las contraseñas pertinentes
4. Seleccionamos la carpeta de destino y en la build variant "release"
5. Una vez se genere podremos encontrar el bundle de la aplicación en la carpeta seleccionada

Subir a producción iOS

1. En xCode cambiar el dispositivo a arrancar por "Any iOS device (arm64)
2. Abrir el menú desplegable de "Product" y luego pulsar en "Archive"
3. Una vez se muestre la ventana de "ARchives" le damos a "Distribute App" -> "Custom" -> "App Store Connect" y seguimos los pasos segun convenga
4. Ahora ya podrás editar la información de la versión en la pagina de App Connect.

Librerías

1. react-native-async-storage/async-storage

# Esta dependencia proporciona una API simple y asincrónica para almacenar datos persistentes clave-valor en React Native.
- npm install @react-native-async-storage/[email protected]

2. react-native-community/geolocation

# Este paquete permite acceder a la ubicación del usuario en dispositivos móviles.
- npm install @react-native-community/[email protected]

3. react-native-masked-view/masked-view

# Este componente proporciona una vista con máscara que se utiliza para renderizar una capa de vista que se recorta con una máscara.
- npm install @react-native-masked-view/[email protected]

4. react-native-picker/picker

# Este componente proporciona un selector de elementos para React Native.
- npm install @react-native-picker/[email protected]

5. react-navigation/bottom-tabs

# Este paquete proporciona una navegación por pestañas en React Navigation.
- npm install @react-navigation/[email protected]

6. react-navigation/native

# Este paquete proporciona la base de la navegación en React Navigation.
- npm install @react-navigation/[email protected]

7. react-navigation/stack

# Este paquete proporciona la navegación de tipo pila en React Navigation.
- npm install @react-navigation/[email protected]

8. rneui/base

# Este paquete es una base de UI para componentes de React Native.
- npm install @rneui/[email protected]

9. rnmapbox/maps

# Este paquete permite la integración de mapas de Mapbox en una aplicación de React Native.
- npm install @rnmapbox/[email protected]

10. types/react-native-snap-carousel

# Este paquete proporciona tipos TypeScript para react-native-snap-carousel.
- npm install @types/[email protected]

11. axios

# Este paquete permite realizar solicitudes HTTP.
- npm install [email protected]

12. date-fns

# Este paquete proporciona utilidades de fecha y hora.
- npm install [email protected]

13. react

# Esta es la librería principal de React para la construcción de interfaces de usuario.
- npm install react

14. react-native

# Este es el marco de trabajo principal para el desarrollo de aplicaciones móviles en React Native.
- npm install react-native

15. react-native-bootstrap-icons

# Este paquete proporciona iconos Bootstrap en una aplicación de React Native.
- npm install [email protected]

16. react-native-fs

# Este paquete proporciona acceso a sistemas de archivos locales en React Native.
- npm install [email protected]

17. react-native-gesture-handler

# Este paquete proporciona gestos táctiles avanzados para aplicaciones de React Native.
- npm install [email protected]

18. react-native-image-crop-picker

# Este paquete proporciona una funcionalidad avanzada para recortar y seleccionar imágenes en React Native.
- npm install [email protected]

19. react-native-image-picker

# Este paquete proporciona una funcionalidad para seleccionar imágenes desde la galería o la cámara en React Native.
- npm install [email protected]

20. react-native-linear-gradient

# Este paquete proporciona un componente de gradiente lineal para React Native.
- npm install [email protected]

21. react-native-modal

# Este paquete proporciona un componente de modal para React Native.
- npm install [email protected]

22. react-native-pager-view

# Este paquete proporciona un componente de vista de páginas para React Native.
- npm install [email protected]

23. react-native-paper

# Este paquete proporciona componentes de IU de Material Design para React Native.
- npm install [email protected]

24. react-native-permissions

# Este paquete proporciona una API para solicitar permisos en aplicaciones de React Native.
- npm install [email protected]

25. react-native-reanimated

# Este paquete proporciona una API de animación declarativa para React Native.
- npm install [email protected]

26. react-native-responsive-fontsize

# Este paquete proporciona un método para definir el tamaño de la fuente de forma sensible al tamaño de la pantalla en React Native.
- npm install [email protected]

27. react-native-responsive-screen

# Este paquete proporciona un método para definir dimensiones de diseño sensibles en React Native.
- npm install [email protected]

28. react-native-safe-area-context

# Este paquete proporciona un contexto para manejar el área segura en React Native.
- npm install [email protected]

29. react-native-screens

# Este paquete proporciona una API de navegación de pantalla para React Native.
- npm install [email protected]

30. react-native-share

# Este paquete proporciona una funcionalidad para compartir contenido en aplicaciones de React Native.
- npm install [email protected]

31. react-native-snap-carousel

# Este paquete proporciona un componente de carrusel deslizable para React Native.
- npm install [email protected]

32. react-native-splash-screen

# Este paquete proporciona un splash screen para aplicaciones de React Native.
- npm install [email protected]

33. react-native-picker/picker

# Este componente proporciona un selector de elementos para React Native.
- npm install @react-native-picker/[email protected]

34. react-native-svg

# Este paquete proporciona componentes SVG para aplicaciones de React Native.
- npm install [email protected]

35. react-native-svg-transformer

# Este paquete proporciona un transformador SVG para React Native.
- npm install [email protected]

36. react-native-tab-view

# Este paquete proporciona un componente de vista de pestañas para React Native.
- npm install [email protected]

37. react-native-toast-message

# Este paquete proporciona un componente de mensaje emergente de tostada para React Native.
- npm install [email protected]

38. react-native-vector-icons

# Este paquete proporciona iconos vectoriales para aplicaciones de React Native.
- npm install [email protected]

39. react-native-image-zoom

# Este paquete permite establecer una imagen a la que se le puede hacer zoom. NO FUNCIONA
- npm install @likashefqet/react-native-image-zoom

40. react-native-image-zoom-viewer

# Este paquete permite establecer una o varias imagen a la que se le puede hacer zoom.
- npm i react-native-image-zoom-viewer --save

41. react-native-date-picker

# Este paquete añade la opción de incluir fechas
- npm install react-native-date-picker

42. react-native-dots-pagination

# Este paquete añade la opción de incluir dots
- npm install react-native-dots-pagination

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.