Skip to content

React native

ninja error ninja: error: loading 'build.ninja': The system cannot find the file specified

no se encuentra el archivo build.ninja,

instala manualmente cmake y ninja 

choco install ninja
choco install cmake

Ejecutar 

cd android
cmake -B build -G Ninja

si esto genera un error CMakeLists.txt, en node_modules/react-native-screens/android/

entonces el error se debe a que react-native-screens esta corrupto, entonces la solución es 

npm uninstall react-native-screens
npm install react-native-screens
cd android
./gradlew clean
cd ..
npx react-native run-android

refactoring

Buttons

  • BackButton
  • AuthInputFields (Buttons)
  • Profile (BackButtonBar)

Input field

  • InputField reorganizar bien el codigo, separa logica, ui

AuthInputFields

migrate TextInput to custom InputField
Computer Science Student Full Stack Web Developer Enthusiastic in Data Science (DS), Artificial Intelligence (AI), and Machine Learning (ML) Always learning new things
\((a+b)*(b+c)\)

Exposición

Cómo Funciona React Native

React Native funciona utilizando un puente para comunicar el código JavaScript con los componentes y APIs nativos. Utiliza un Virtual DOM para gestionar las actualizaciones de la interfaz de usuario de manera eficiente y ofrece características como Hot Reloading para mejorar la experiencia de desarrollo. Con la nueva arquitectura en desarrollo, React Native está evolucionando para ofrecer un mejor rendimiento y una mayor integración con las plataformas nativas.

### Ciclo de Renderizado

  1. Código JS: Defines la interfaz de usuario y la lógica en JavaScript.

  2. React Reconciler: Compara el árbol de componentes actual con el nuevo y genera una lista de cambios.

  3. Shadow Tree: Actualiza la representación virtual de la interfaz de usuario en memoria.

  4. Puente: Transmite los cambios desde la Shadow Tree al hilo nativo de manera asíncrona.

  5. Renderizado Nativo: Los componentes nativos se actualizan y se renderizan en la pantalla.

Ejemplo Práctico

Imagina que tienes un componente <Text> en React Native: 

<Text style={{ color: 'red' }}>Hola Mundo</Text>
Hola Mundo

  1. Código JS: React Native procesa este componente en JavaScript.

  2. Reconciler: Detecta que el texto debe mostrarse en color rojo.

  3. Shadow Tree: Actualiza la Shadow Tree con la información del estilo y el contenido del texto.

  4. Puente: Envía estos cambios al hilo nativo.

  5. Renderizado Nativo: En iOS, se crea un UILabel con el texto "Hola Mundo" y el color rojo. En Android, se crea un TextView con las mismas propiedades.

Gestión de Estado en React Native

el manejo de estado en las aplicaciones es muy importante, ya que nos permite crear aplicaciones dinámicas, y react native no es la diferencia utiliza los mismos principios de gestion de estados al igual que react para la web. - useState → Para estados locales simples. - useReducer → Mejor para lógica más compleja en componentes individuales. - Context API → Compartir estado entre componentes sin props drilling. - Redux / Zustand → Para manejar estado global en apps grandes. - Recoil → Más flexible que Redux, fácil de usar con hooks.