React Studio update 1.6.1

Photo by Nine Köpfer on Unsplash

We’ve released a major update (Version 1.6.1) to React Studio. Update should come up when you open the app. If you don’t already have the app you can download it from here: www.reactstudio.com.

Whats new!

• iOS and Android Launch images (Splash screen) support for installed PWA apps
• Added Visible prop for components (hide show component with a button click)
• Separated Label and Value settings for Picker (to separate what reads in picker/dropdown list and which value is read when saving selected value back to app)
• Added Selector selected index data linkage (to store and retrieve the selected Tab in/from Data slot)
• Added screen data sheet row data slot + script setting for selecting which row is used as Data source for screen.
• CSS fixes (e.g. in some cases buttons “leaked” between screens)
• Complete Change log can be found here

Quick overview of the new features

PWA First launch images (Splash screen)

Studio now generates Launch images for installed PWA apps (Save to home screen). Splash screen is shown while loading the app and it can be pain to create perfect image for both: Android and iOS. We’ve now solved this by adding separate settings for Android image and iOS image. Studio will then automatically create all required sizes for your app based on the image assets you provide.

P.S. Here’s a good read about the Splash screens in PWA apps

Save selected Selector Tab index to Data slot

Now you can save the selected tab index into Data slot with Selector element. This is particularly handy when you have Tab navigation in Main level and you have e.g. list with details view “inside” the content. Selected tab item keeps the selection when user “drills” down to details view and navigates back with a Back button.

Here’s an example app: https://neonto.cloud/u/indieartisdemo Click “Contact” and select any Concert from the list.

You’ll find the example project file from your Studio’s template projects: File -> New from template -> Indie Artists

Create Data slot for storing the selected index

Select Data slot when adding “change content” interaction for selector element

Select the “index” data slot from Selector element’s Data tab.

Set Data sheet row index when using Data sheet as screen’s Datasource

Find new Data slot setting when the Screen node is selected from Project map.

When you’re using Data sheet as data source for your screens you might want to dynamically change the source data row index. For this purpose we’ve added Data slot setting for storing the Row index in Data slot. This can be handy e.g. when creating on-boarding screens such can be seen below.

“Onboarding” example. Button click is assigned to script which adds 1 to “Index” data slot.

Download the example project file here

Picker Label vs Value

Picker element got a label setting which allows you to set the column for Label and Value separately. This is handy when you want to show e.g. Cities in Picker and save the City ID when saving the selection back to database.

Hide / Show component with component’s “Visible” prop

All nested components got “Visible” prop available under the Nested Comp tab. Just link the prop e.g. to Data slot value and then you can hide/show the component simply by changing the value in Data slot between “true” or “false”. This way you can build e.g. alert component with “close button”.

Let us know in the comments if you have any thoughts about the update. You can also ping us directly at hello@neonto.com

Download React Studio free from www.reactstudio.com