¿Se puede hacer un juego con React Native? Lo que aprendí con 7 juegos

Sí, se puede hacer un juego con React Native, y correr a 60 FPS, siempre que sea un juego de puzzle, de tablero o casual y respetes algunas reglas: nada de disco ni red durante la partida, animaciones en el hilo nativo y la lógica del juego separada de la pantalla. Para un juego 3D o con física compleja, conviene un motor de juegos dedicado.

Lo digo después de hacer 7 juegos con React Native y Expo, todos para Android e iPhone desde una sola base de código: tres variantes de Sudoku, dos de bloques tipo Tetris, un puzzle de bloques y un juego de colores con evolución. No es una comparación de frameworks (eso está en React Native vs Flutter): son las decisiones técnicas concretas que me funcionaron y los bugs que aparecieron en celulares reales.

¿Qué juegos hice y qué fue lo más difícil de cada uno?

Regla 1: ¿por qué la partida tiene que ser "sagrada"?

El primer problema serio que tuve en Sudoku Play fueron microtirones: la pantalla se trababa una fracción de segundo cada tanto. La causa era guardar la partida y sincronizar con el servidor mientras se jugaba.

La solución fue una regla que apliqué en todos los juegos: durante la partida, cero operaciones de red o de disco. Todo el estado vive en memoria (en un store de Zustand). El autoguardado se hace cada 10 segundos, al pausar y al salir, y se posterga hasta que la interfaz termina lo que está haciendo (con InteractionManager.runAfterInteractions). Resultado: 60 FPS constantes y un autoguardado que no se nota. Cómo se sincroniza todo eso después lo explico en arquitectura offline-first.

Regla 2: ¿cómo se arrastran piezas sin que se trabe?

En Block Puzzle Play arrastrás piezas sobre un tablero de 8×8 y ves una sombra donde va a caer. En la primera versión, cada movimiento del dedo disparaba una cascada de redibujos: se recalculaba la sombra y el estado global en cada píxel.

Lo resolví separando dos cosas: la posición visual de la pieza vive en el hilo nativo con Reanimated (shared values), y la lógica del juego solo se llama cuando hace falta (con runOnJS). La sombra se actualiza sin redibujar el tablero. Así se mantienen 60 FPS incluso en celulares de gama baja. Otro detalle: saber si queda alguna jugada posible puede implicar probar muchas posiciones, así que el chequeo corta apenas encuentra la primera válida y tarda menos de 50 milisegundos.

¿Cómo se hace un game loop con gravedad en tiempo real?

En Block Drop Play, un Tetris, las piezas caen solas. El tick de gravedad, el tiempo de gracia antes de fijar la pieza (lock delay) y el movimiento automático al mantener apretado (DAS) viven en un store de Zustand con intervalos controlados, y 17 selectores hacen que cada componente se redibuje solo cuando cambia lo que muestra.

El motor implementa el sistema de rotación estándar del género (SRS) con sus tablas de wall kicks: 4 pruebas por rotación, distintas para la pieza larga y para el resto. Detecta T-Spins con la regla de las 3 esquinas, y usa el sistema "7-bag": cada una de las 7 piezas aparece exactamente una vez cada 7, para que no haya rachas injustas sin la pieza que necesitás. Los controles táctiles separan zonas de toque para mover y rotar, deslizar para soltar, y tienen 3 velocidades configurables.

¿Por qué escribir los motores como funciones puras?

En Color Match Drop, cuando se juntan 4 bloques del mismo color se eliminan, pero si son 5 o más evolucionan a un nivel superior con una habilidad especial, que a su vez puede eliminar otros bloques. La cadena completa es: buscar grupos, clasificarlos, evolucionar, aplicar habilidades, hacer caer los bloques y volver a buscar. La escribí como funciones puras separadas que se repiten en rondas, con pausas animadas de 300 ms para que se vea qué pasa.

La ventaja apareció enseguida: como el motor no modifica nada por fuera, pude hacer la "Profecía", un modo que al mantener apretado simula la jugada completa con todas sus cadenas sobre una copia del tablero, y muestra el resultado sin tocar la partida real. Los biomas (océano, volcán, bosque, espacio, cristal) cambian reglas reales, como la velocidad o la gravedad, y viven en otro motor desacoplado. En Block Drop Merge el motor de fusión, el de puntaje y el del tablero tienen tests unitarios con Jest.

¿Cómo se hace un desafío diario justo?

Para que el desafío diario y los duelos sean justos, los dos jugadores tienen que recibir exactamente las mismas piezas. Uso un generador de números aleatorios con semilla: en el desafío diario de Block Drop Play, la semilla sale de la fecha más el nombre del juego; en los duelos, se comparte la misma semilla entre los dos. Las secuencias son reproducibles y el servidor puede verificarlas. El servidor también valida puntajes máximos por modo, tiempos mínimos y piezas por minuto para detectar trampas.

¿Cómo se adapta a todas las pantallas?

En iPad, todo se veía al doble de tamaño porque las medidas se calculaban sobre el ancho real de la pantalla. Armé un sistema de escalado centralizado tomando como base un iPhone 13 mini y con un tope de 500 px de ancho en tablets: así la interfaz se ve consistente desde un iPhone SE hasta un iPad Pro. En Block Drop Merge, además, el tablero estándar de 10×20 hacía ilegibles los números de 4 cifras, así que lo reduje a 8×16 con fuente monoespaciada. Y en todos, respetar las áreas seguras (el notch y la isla dinámica) evita que el contenido quede tapado.

¿Qué bugs aparecieron solo en celulares reales?

• Samsung y la grilla de notas: el sistema acomodaba los elementos distinto y las notas del Sudoku se veían mal. Las reemplacé por una estructura fija de 3×3.
• Samsung y las tareas en segundo plano: la sincronización de fondo cerraba la app. Pasé a sincronizar al volver a abrirla.
• Huawei sin servicios de Google: la app se caía. Ahora detecta si los servicios están antes de usarlos.
• Carga asincrónica: en Killer Sudoku Play, la pantalla de juego se abría antes de que terminaran de cargarse los puzzles desde la base local y la app se cerraba. Un indicador de carga mientras tanto lo resolvió.

¿Qué stack usé?

• React Native 0.81 con la New Architecture y Expo SDK 54, en TypeScript estricto.
• Zustand para el estado, con stores separados por tema (partida, usuario, amigos, duelos, premium).
• Reanimated y Gesture Handler para animaciones y gestos en el hilo nativo.
• expo-av para el sonido: Block Drop Play tiene 22 tipos de efectos, y en Color Match Drop cada color es una nota musical, así que las combinaciones suenan como acordes.
• SQLite local para los 6.000 puzzles de Sudoku Play, que funcionan sin internet.
• Supabase como backend compartido, Firebase Crashlytics para los errores y EAS para compilar y enviar actualizaciones.

¿Y si no querés hacer un juego?

Estas reglas no son solo para juegos. Cualquier app que tenga que responder rápido (una carta digital, un sistema de pedidos, una herramienta de trabajo en la calle) se beneficia de no bloquear la pantalla con la red, de animar en el hilo nativo y de probar en celulares reales. Lo que sí es propio de los juegos es reutilizar todo eso entre varias apps, que cuento en cómo reutilizar código entre apps, y los problemas para publicarlos, en por qué Apple rechaza una app.

Preguntas frecuentes