En esta serie de tres artículos te voy a mostrar, paso a paso, cómo he creado un pequeño juego para móviles usando Expo (React Native) y cómo puedes probarlo de dos formas:En esta serie de tres artículos te voy a mostrar, paso a paso, cómo he creado un pequeño juego para móviles

1. Como app nativa de prueba en tu móvil usando Expo Go (sin compilar nada).
2. Como juego web que se abre directamente en el navegador (publicado en Netlify).

La idea no es crear un gran juego, sino entender el flujo completo, desde el código hasta el teléfono del usuario.

¿Qué es Neon Tap?

Neon Tap! es un juego muy simple:

• Aparece un objetivo en pantalla.
• Tienes 30 segundos para tocarlo tantas veces como puedas.
• Cada acierto suma puntos.
• Fallar rompe el combo.
• Todo con una interfaz muy visual estilo “neón”.

No hay derechos de autor ni recursos externos: es ideal como ejemplo didáctico.

¿Qué es Expo Go?

Expo Go es una aplicación gratuita que te permite probar apps móviles hechas con Expo directamente en tu teléfono, sin instalarlas como apps normales y sin pasar por Google Play o App Store. Escaneas un QR y la app se ejecuta al instante dentro de Expo Go.

Expo Go funciona como un reproductor de apps: el desarrollador ejecuta el proyecto en su ordenador, se genera un QR y, al escanearlo con el móvil, la app se abre al momento sin necesidad de instalación ni compilación.

Expo Go no está pensado para usuarios finales, sino para probar y aprender durante el desarrollo.

¿Qué es Netlify?

Netlify es un servicio que permite publicar páginas y aplicaciones web de forma sencilla, arrastrando una carpeta o conectando un repositorio, sin necesidad de configurar servidores. Te proporciona automáticamente una URL pública y segura (HTTPS).

En este proyecto, Netlify actúa como un escaparate web: tomamos la versión web del juego y la publicamos para que cualquiera pueda jugar desde el navegador con un solo clic.

Netlify no ejecuta aplicaciones como un servidor tradicional; simplemente sirve archivos web ya preparados (HTML, CSS y JavaScript).

En este primer post de la serie, veremos como se implementa el juego, con código Node.js, bajo Expo.

Desarrollo del juego

Objetivo de este post:

• Demostrar que crear algo jugable no es tan complejo.
• Quitar miedo a Expo / React Native.
• Dejar el juego preparado para su funcionamiento en local (próximo post).

Para desarrollar el juego en local (en tu ordenador), hay que usar el Terminal. En MacOS, el Terminal es una aplicación donde escribes comandos de texto para decirle cosas al sistema. Para arrancar el Terminal: Finder → Aplicaciones → Utilidades → Terminal

Instalación de Node.js

Para trabajar con Expo necesitamos Node.js, que es el entorno que permite ejecutar las herramientas desde la terminal. Con Node se instala automáticamente npm, así que en realidad son dos cosas en una.

1. Comprobación rápida

En la terminal, ejecuta:

node -v
npm -v

• Si aparecen números de versión, todo está correcto.
• Si aparece un error del tipo “command not found”, no pasa nada: simplemente no está instalado.

2. Cómo instalar Node.js (forma sencilla y recomendada)

Opción recomendada: instalador oficial

Es la más simple para la mayoría de usuarios.

1. Entra en: https://nodejs.org
2. Descarga la versión LTS (la recomendada).
3. Instala como cualquier otra aplicación (siguiente, siguiente, aceptar).

Al terminar:

• Cierra el Terminal.
• Ábrela de nuevo.
• Vuelve a ejecutar: node -v npm -v

Si ahora ves versiones, ya está.

3. ¿Y npm?

No hay que instalarlo aparte. npm se instala automáticamente junto con Node.js.

Si node -v funciona, npm -v también debería hacerlo.

Si sabes escribir node -v en la terminal, ya tienes lo necesario para seguir.

Creando el proyecto

Para crear el proyecto de Expo dentro del Escritorio, escribe en el Terminal:

cd ~/Desktop
npx create-expo-app neon-tap

Añadir librerías para interfaz llamativa

En la carpeta del proyecto (neon-tap), instala:

npx expo install expo-linear-gradient
npx expo install expo-haptics

Estructura del proyecto

Es posible que todavía no veas la carpeta «dist», pero la crearemos más adelante (es la compilación del proyecto).

La interfaz del juego está definida en _layout.tsx y en la carpeta (tabs) se encuentra el código del juego propiamente dicho, en un archivo que se llama index.tsx.

Edita index.tsx:

1. Selecciona TODO
2. Bórralo
3. Pega el código del juego
4. Guarda

Importante: No pasa nada porque el archivo sea .tsx y el código sea “JS”. Expo lo acepta sin problema.

En las versiones anteriores de Expo, el archivo index.tsx era App.js y estaba en la raíz de la carpeta neon-tap.

Aunque el archivo se llame index.tsx, el nombre de la función en el código (App, Index, etc.) no es importante. Lo único imprescindible es que el componente esté exportado como default.

Cómo quitar la barra de navegación inferior

Con el _layout.tsx original el juego está dentro de una app con navegación por pestañas, pensada para “Home / Explore”. Para un juego, eso estorba. La solución es eliminar esa barra.

Dejaremos la estructura de tabs, pero la tab bar no se muestra en index, así el juego es a pantalla completa y todos los taps funcionan.

Lo que vamos a hacer es decirle a Expo Router: “En la pantalla index, no muestres la tab bar”.

Edita el archivo app/(tabs)/_layout.tsx

Busca este bloque:

<Tabs.Screen
  name="index"
  options={{
    title: 'Home',
    tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
  }}
/>

Y cámbialo por este (fíjate solo en lo que se añade):

<Tabs.Screen
  name="index"
  options={{
    title: 'Home',
    headerShown: false,
    tabBarStyle: { display: 'none' }, // 👈 OCULTA LA TAB BAR
  }}
/>

Puedes borrar también tabBarIcon y el title si quieres, ya no se usan.

Guarda el archivo, Expo recargará automáticamente.

Resultado inmediato

• ❌ Desaparece la barra “Home / Explore”
• ✅ El juego ocupa toda la pantalla
• ✅ El “TAP” funciona siempre
• ✅ No necesitas cálculos de alturas ni parches

Conclusiones

Hemos aprendido a instalar un juego sencillo, implementado en Node.js, y para ejecutar bajo Expo, de manera local, usando comandos del Terminal en un MacOS. En otro sistema operativo se hace de manera similar.

En el próximo post de esta serie, explicaremos cómo se puedes probar el juego en tu teléfono móvil, sin pasar por ninguna tienda. Naturalmente, eso no servirá para hacer la app pública, solo para probar su funcionamiento en un teléfono