The Columns element is now rebuild (update 1.5.8)

We’ve released an update (version 1.5.8) to React Studio. Update contains minor bug fixes to Studio, Code exporter engine and completely revamped columns element.

Whats new!

  • Columns element (3 columns option and Flexbox code export)
  • Refresh interval setting for JSON plugin
  • Scroll List element automatically to its last element
  • CSS bug fixes
  • Overall fixes for Studio’s engine
  • Update to Firebase plugins (issue Firebase: Firebase App named ‘[DEFAULT]’ already exists (app/duplicate-app))
  • Improved plugin docs

Columns element

Columns element got overhauled and now supports layouts from one to three columns. You can also set and link props for the nested components through the “Nested Comp” tab from the right inspector panel.

Live example: https://neonto.cloud/u/columnsexample

Download example project file from here.

Refresh interval setting for JSON plugin

Previously the Generic JSON plugin was set to refresh data every 10 seconds. Now it is possible to set this interval directly from Plugin settings. Setting the setting to zero means it will refresh data only once when the app is loaded.

Scroll list to last item automatically

When creating UI for chat apps you’d like the list element to scroll from “bottom to top” and now it is possible directly from Studio by adjusting list element’s Scrolling setting to “Scroll automatically to last item”.

Please note that this feature works only for one list per screen (basically it scrolls the screen to end of the list element).

Update your Firebase plugins now

We’ve also released and update to Firebase plugin which solves the problem raising this error message:

“ Firebase: Firebase App named ‘[DEFAULT]’ already exists (app/duplicate-app)”

Update should come up when you open the app. You can also install the update from Plugins -> Plugin manager.

P.S. We’ve released five step Youtube video series for creating a Chat app with React Studio and Firebase Cloud firestore backend. Find the full episode playlist from below.

In case you already haven’t, download React Studio for free from www.reactstudio.com