Skip to content
CrossFly is 100% open sourceFollow us on GitHub
CrossFlyCrossFly
Get started

This page was machine-translated from Portuguese and may contain errors. The Portuguese version is canonical.

Coming from React Native

In RN you describe the UI in JSX and the re-render happens when the state changes. In CrossFly the UI is Java code built once, and you mutate. Read the philosophy first.

Translation table

React Native CrossFly
functional component + JSX subclass of Window/Component built in onShow() (no markup)
useState / re-render fields + repaint()
props constructor arguments (no route table)
<View> / <Text> / <Image> Component / Label / ImageView
<FlatList> VirtualListView
flexbox (flex: 1) add(LAY_FILL, c) + VerticalLayout/HorizontalLayout
StyleSheet ComponentStyle / Skin (ingap/outgap = padding/margin)
react-navigation stack of Window (show() / hide())
useEffect / Promise / async Thread + Component.onUI(...)
AsyncStorage no equivalent → SQLite or files in Device.homeFolder

Before / after — list

// React Native
function Lista({ itens }) {
   return <FlatList data={itens}
      renderItem={({ item }) => <Text>{item.nome}</Text>} />;
}
// CrossFly — props become constructor arguments; UI in 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); }
      }));
   }
}

What changes the most

  • No JS bridge and no hot-reload — it is compiled Java (on the desktop the cycle is fast; see platforms).
  • props → constructor: pass data via new Tela(dados) and call .show().
  • StyleSheet → ComponentStyle: padding/margin are ingap/outgap, not flex properties.

See also

Was this page helpful?