Variables state is essentially the data that's stored in the device memory during your app's runtime.
It's the same concept as the in-memory variables that are found in any programming language – there's just a lot more predefined and kept up-to-date automatically than you'd get with a fresh program.
Variables state includes things like data your app has fetched from a backend, text inputted by the user to an input field, the current loading state of a page, device operating system, latest geolocation value and so on.
Component state describes what's going on in your various view components: if a button is visible or not, what the placeholder text in an input field is, what icon to display, the color of a card component's background and so on.
You can think of component state as your HTML DOM node attributes or React component props.
Component state is linked to variables state by binding a component property to a variable. To learn more, please see the binding data guide.
Logic flows consist of a triggering event and attached flow functions. Each event and flow function is represented by a node on the logic canvas, with execution order defined by connecting wires between the nodes.
Example logic flow
In the example above, we have a Component tap event that triggers the Scan QR/barcode flow function. This opens a QR scanner dialog. Once the user has scanned a code (or cancelled the dialog), the logic flow continues executing.
The logic flow can branch depending on what happened during the logic flow execution. In the example above, a successful scan proceeds to the Open page flow function, a cancelled dialog shows a Toast, and an error produces an Alert.
Every flow function's description tells you when the different outputs are triggered.