Add intelligence to your React Web app’s interactions — React Studio update 1.6
We’ve released an update (version 1.6) to React Studio. You’ll get the update simply by opening the app. If don’t have the app already installed download it free from www.reactstudio.com
Whats new?
- Add logic into Go to interactions with Switch block
- Offline support for data slot’s and Data sheets with React’s local storage
- Integrated Node.js to fix issues with nvm etc.
- Updated Sketch importer plugin download latest version here
- Create-react-app has been updated to the latest version 2.1.8. The base React framework is now at v16.8.6
- Updated Firebase plugins (support for reference field type and some minor bug fixes)
- Updated Camera plugin to store captured image to data slot.
- Two new project templates: Generic JSON Data plugin project and Switch demo project. Find project templates from File->New from Template
- Minor tweaks here and there (e.g. you can inject clickable HTML to text in text labels)
Switch block
Switch block is new type of block available to be added onto Project map. Just point any “Go to” interaction to Switch block and block controls which screen is shown next.
Switch element inspector panel contains handy truth table for creating “Go to” logic visually. One can also write value transformer script when more complex business logic is needed.
Switch can be used e.g. for creating Onboarding for first time users. Just store the “Onboarding: true;false” in Data slot and add Switch element to first Launch screen in project settings. This way Switch element detects if Onboarding= true or Onboarding=false and redirects user to either Onboarding Screen or Main screen.
Download the example app from your React Studio’s Project templates (File -> New from Template).
Keep Data slot values between sessions using Browser local storage
Data slot values can be saved between user sessions by checking the “Persistence” checkbox for Data slot. Data is stored in Browser’s local storage. This can be handy when e.g. saving information if user is returning user or new user.
Test the example here and Download the example React Studio project file here. This example showcases how to user Persistent Data slots and Switch elements. App asks new user’s name and remembers returning user’s name and skips the “onboarding” screen.
Sketch plugin update
Download the Sketch plugin update here. Update fixes few compatibility issues with the latest Sketch version.
Firebase Plugin bundle
Firebase plugins are now updated. You can update the plugins either via Plugin manager or re-install the package from Plugin store. This update fixes the issue with Log out interaction which prevented the user logging out from the app.
Note that Firebase bundle also contains File uploader plugin. File uploader plugin enables app user to upload files into Firebase Cloud Storage. Plugin uploads file and returns file url path and filename to selected Data slots, url path and filename can then be saved to Database. This plugin is based on this npm package https://www.npmjs.com/package/react-firebase-file-uploader
Download React Studio from www.reactstudio.com
React Studio Support forum: https://discuss.reactstudio.com/
