# Viniendo de React Native

> Mapeo JSX/useState→Component en código Java, sin bridge y sin hot-reload.

Source: https://crossfly.dev/es/docs/migrate/from-react-native — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Viniendo de React Native

En RN describes la UI en **JSX** y el re-render ocurre cuando el estado cambia. En CrossFly la UI es
**código Java** montado una vez, y tú **mutas**. Lee primero [la filosofía](/docs/migrate/overview).

## Tabla de traducción
| React Native | CrossFly |
|---|---|
| componente funcional + JSX | subclase de `Window`/`Component` montada en `onShow()` (sin markup) |
| `useState` / re-render | campos + `repaint()` |
| `props` | argumentos de **constructor** (sin tabla de rutas) |
| `<View>` / `<Text>` / `<Image>` | `Component` / `Label` / `ImageView` |
| `<FlatList>` | `VirtualListView` |
| `flexbox` (`flex: 1`) | `add(LAY_FILL, c)` + `VerticalLayout`/`HorizontalLayout` |
| `StyleSheet` | `ComponentStyle` / `Skin` (`ingap`/`outgap` = padding/margen) |
| `react-navigation` | pila de `Window` (`show()` / `hide()`) |
| `useEffect` / `Promise` / `async` | `Thread` + `Component.onUI(...)` |
| `AsyncStorage` | **sin equivalente** → SQLite o archivos en `Device.homeFolder` |

## Cómo era / cómo queda — lista
```jsx
// React Native
function Lista({ itens }) {
   return <FlatList data={itens}
      renderItem={({ item }) => <Text>{item.nome}</Text>} />;
}
```
```java
// CrossFly — props se vuelven argumentos del constructor; UI en Java
public class Lista extends Window {
   private final List<Item> itens;
   public Lista(List<Item> itens) { this.itens = itens; }   // "props"
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), new DataAdapter() {
         public int getCount() { return itens.size(); }
         public Component createView() { return new Label(""); }
         public void bindView(Component v, int i) { ((Label) v).setText(itens.get(i).nome); }
      }));
   }
}
```

## Lo que más cambia
- **Sin *bridge* JS y sin hot-reload** — es Java compilado (en el escritorio el ciclo es rápido; ver
  [plataformas](/docs/platforms)).
- **`props` → constructor:** pasa los datos por la `new Tela(dados)` y llama a `.show()`.
- **`StyleSheet` → `ComponentStyle`:** padding/margen son `ingap`/`outgap`, no propiedades de flex.

## Véase también
- [Navegar entre pantallas](/docs/ui/navigation/navigate-between-screens) · [Rendimiento y listas](/docs/best-practices/performance-e-listas-grandes)