Suscribete en nuestro Newsletter

Regístrate en nuestro Newsletter para estar al tanto de las noticias, talleres y podcast que tendremos próximamente
Suscríbete aqui

Foto del autor Osledy Bazo

Ejemplos del uso del teclado en React-Native para iPhone y Android

Según la documentación de Facebook para el componente de Teclado tenemos disponibles varios eventos para interactuar con el teclado de nuestra aplicación. https://facebook.github.io/react-native/docs/keyboard.html

Comencemos con un ejemplo de app básica donde sólo mostraremos una caja de texto para ingresar texto y un párrafo para indicar el estado del teclado, si está activo o no.

Si te has dado cuenta, al tocar el input puedes escribir cualquier texto, pero luego al tocar la pantalla fuera de la caja de texto, el teclado no se esconde.

Para solucionar esto debemos usar otro componente llamado 'TouchableWithoutFeedback'

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

Te recomiendo leas la documentación sobre este componente ya que debe usarse con cuidado.

Modificaremos nuestro código para incluir el modulo del teclado 'Keyboard' y de 'TouchableWithoutFeedback'. También agregaremos este nuevo componente alrededor de nuestro View principal y usaremos 'onPress={Keyboard.dismiss}' para esconder el teclado una vez tocado la pantalla fuera de la caja de texto.

Para acceder a los estados del teclado tenemos que usarlo en combinacion con un Event Listener que conectará con un evento nativo, puede ser identificado con alguno de estos strings:

  • keyboardWillShow (IOS)
  • keyboardWillHide (IOS)
  • keyboardDidShow (Android)
  • keyboardDidHide (Android)
  • keyboardWillChangeFrame
  • keyboardDidChangeFrame

Modificaremos nuestra app y agregaremos métodos para estar atentos al cambio del teclado.

Usare los strings 'keyboardDidShow' y 'keyboardDidHide' ya que en funcionan tanto en Android como en IOS. ('keyboardWillShow' y 'keyboardWillHide' no tienen representación nativa en Android).

Ademas de agregar los EventListener tenemos que recordar que hay que removerlos, esto para prevenir memory leaks y problemas de rendimiento en nuestra aplicación.

Ahora cambiaremos el estado de nuestro status a un string que indica si el teclado esta activo o inactivo.

En los eventos del keyboard podemos acceder a algunas de sus propiedades como son:

                { 
                  endCoordinates: { 
                  screenY: 442, 
                  screenX: 0, 
                  width: 375, 
                  height: 225 
                },
                  startCoordinates: { 
                  screenY: 451, 
                  screenX: 0, 
                  width: 375, 
                  height: 216 
                },
                  duration: 250 
                }
                

Hay un ultimo problema que es muy común a la hora de trabajar con el teclado en una aplicación y es que a veces el teclado puede tapar parte del contenido de nuestra app:

Para solucionarlo debemos usar el componente 'KeyboardAvoidingView', este componente esta diseñado para ajustar o mover lo que se ve en la pantalla automaticamente para que el teclado no estorbe.

https://facebook.github.io/react-native/docs/keyboardavoidingview.html

Hay tres formas para hacer esto automaticamente y la que uses dependerá de los resultados que quieras mostrar. Presta atención a la propiedad 'keyboardVerticalOffset' que sirve para guardar una distancia entre la vista y el teclado. Para esto tendremos que modificar un poco nuestro código así:

Foto del autor Osledy Bazo

Coders Venezuela Newsletter #1

Hola! Hola! Coders, esta es la newsletter de Coders Venezuela, tenemos mas de 1800 suscriptores al momento, unos cuantos ¿no?.

Esta lista está en modo de pruebas, queremos ver cuales son los enlaces y temas que mas les interesa, por favor, corran la voz sobre la lista ya que pronto tendremos una encuesta sobre Programadores en Venezuela, queremos saber donde están y sus intereses para hacer una mejor comunidad.

Recuerda que puedes enviarnos enlaces de recomendaciones, proyectos o saludos a [email protected]

Puedes suscribirte dejando tu email en la barra de arriba de nuestra página

LINKS

EVENTOS

Seminario Industrias Creativas Videojuegos y Apps
Junio 29-30, 2017
Torre BOD La Castellana, Caracas

COMUNIDADES

Foto del autor Osledy Bazo

Evento: Industrias Creativas

La quinta edición de Industrias Creativas es sobre Videojuegos y Aplicaciones. En tres días tendremos un taller con un invitado internacional y dos medios días de seminario con ocho ponentes de lujo, gracias al apoyo del British Council y Pase de Prensa BOD. El evento se realizará totalmente GRATIS en el PH de la Torre BOD La Castellana. En mayo se abrirán los registros online. Invitamos a los interesados en obtener directamente la planilla de inscripción a registrarse en el boletín en seminarioindustriascreativas.blogspot.com

Foto del autor Osledy Bazo

Gaming Analytics with Firebase

In this talk Abe Haskins dives into the advantages of using Firebase Analytics to report user behaviour in your mobile games. He’ll cover how Firebase Analytics increases your ability to create actionable insights for your games which improve player retention and player satisfaction. He’ll also touch on expanding Firebase’s functionality with Google Cloud’s BigQuery and Data Studio.

Foto del autor Italo Morales

Base Sólida de jQuery

De forma personal te digo que jQuery sigue siendo genial, su fama se debe a que facilita mucho el desarrollo de aplicaciones del lado del cliente, como debes imaginar Javascript es esencial para todo tipo de desarrollo web. Si desconoces acerca del tema, es propicio aclarar que jQuery no es un lenguaje, sino un conjunto de funciones y métodos de Javascript (éste si es un lenguaje).

jQuery es una librería que nos facilita la programación con Javascript.

La principal ventaja es que no necesitamos preocuparnos por los navegadores, sino que la librería lo hace por sí sola ejecuta el código compatible con el software del cliente que está usando para acceder a nuestra página Web.

Para hacer ésto usamos algunas de las tantas funciones que nos proporciona jQuery, que además se extiende por medio de miles de plugins que ofrece la comunidad para implementar cualquier tipo de comportamiento, por cierto, si lo aprendes bien puedes crear tus propio plugines.

Para aprender jQuery no tienes que ser un gran experto o maestro de Javascript, pero si debes tener conocimientos básicos del lenguaje.

A continuación verás muchas funcionalidades que podrás aprender y te creará esa base necesaria para iniciarte en este mundo.

Seguir leyendo...

Foto del autor Italo Morales

Bootstrap v3 (Components) Buttons, Button Groups

Recientemente hemos comenzado a utilizar el Framework para CSS llamado Bootstrap para diseñar páginas y aplicaciones Web.

Un Framework es un conjunto de código, herramientas, librerías, componentes, buenas prácticas y una serie de ventajas adicionales, con la intención de encapsular las diferentes actividades, tareas repetitivas en módulos o bloques fácilmente reutilizables, según mi punto de vista Bootstrap cumple con ello, es por esa razón que enseño a utilizarlo.

¿Qué es Bootstrap? un conjunto de hojas de estilos (documentos CSS), y buenas prácticas que te permitirán avanzar en el diseño de una manera bastante rápida y funcional, de esta manera podrás enfocarte en los elementos únicos de de tu producto final, y de esa manera darle tu toque personal, identidad corporativa y aportar valor.

Seguir leyendo...

Foto del autor Italo Morales

Bootstrap v3, Plantilla, Glyphicons, Buttons, Dropdowns

Anteriormente dije que con Bootstrap podemos crear interfaces limpias, intuitivas y simples, de fácil manejo para el usuario (excelente ventaja), tiene un apartado de componentes predefinidos como botones, formularios, dropdown o menú contextual, fuente de iconos, vídeos responsive, paneles, menús y barras de menús, mensajes de alerta, y créeme, muchos más, podrías aprender a usarlos aquí

Seguir leyendo...