Home
Changelog
🚀 What's New (20-Jan): Conditional greetings, form validation, and more
new
Hey Community 👋
Let's learn what's new at Draftbit this week.
Tip of the Week
🎨 Custom-styled Text Fields
The Styled Text Field is a great component with a lot of flexibility in how it can be styled, but there are times when you need a little more control. We can easily style our own by using a Surface or View component, Text Input, Icons, Images, Dividers, and more. ↗️ https://community.draftbit.com/c/whats-new/tip-of-the-week-custom-styled-text-fields
Low-Code Tutorials
🕙 Conditional Greeting based on time with low-code
In this short tutorial, I want to show how you can use a greeting depending on the time of day with low code in your Draftbit app. ↗️ https://community.draftbit.com/c/tutorials/conditional-greeting-based-on-time-with-low-code
🖥 Conditional Screen On-load
One common feature in mobile apps is the ability to show the user certain screens just once. This often applies when you’re onboarding a user and you want to get information you didn’t collect during the signup process. ↗️ https://community.draftbit.com/c/tutorials/conditional-screen-on-load
⚠️ Form Validation in Draftbit
In this tutorial, we’ll go over the basics of implementing validation for the input element. We’ll build a sample signup page that allows users to input their name, email and password. ↗️ https://community.draftbit.com/c/tutorials/form-validation-in-draftbit
✂️ Code Snippet: If...then...else
Sometimes it’s handy to call a function conditionally - based on the value of a boolean variable, for instance. We can achieve this easily in Draftbit. Here I’ll show you three different, yet similar, low-code approaches. ↗️ https://community.draftbit.com/c/code-snippets/if-then-else
ICYMI
📺 Office Hours
Missed Office Hours this past week? No worries, we've got you covered:
🚀 What's New (13-Jan): Super Charged Checkboxes, Relative Timestamps, Directual REST API guide, and more
new
improved
Hey Community 👋
Let's learn what's new at Draftbit this week.
⬆️ Sorting Screens
sorting-screens
We released an improvement in the Screens panel. You can now sort the Screens by:
  • Name (both ascending and descending)
  • Time created (both ascending and descending)
✅ Super-charged Checkboxes
We have rolled the functionality of the Toggle Button component into the Checkbox component and added some cool additional features. Read more ↗️
📅 Add relative timestamps to your app with MomentJS and low-code
In many popular apps, you would see they show time in a format like “10 mins ago” or “15 days ago” and wonder how I can use it in my app. Let’s learn how to implement that in Draftbit ↗️
📝 New Docs
💡 Tip of the Week: Log to Console
Sometimes you need the ability to view the data you're working with, like when making an API request. This might be to make sure the data is what you expect, to inspect the response for errors, or to determine the path to a certain key so you can retrieve that value using the Extract Key Action. The Log to Console Action makes this a breeze! Learn more ↗️
📺 Office Hours
Missed Office Hours this past week? No worries, we've got you covered:
January 6, 2022
January 4, 2022
Catch you next week!
🚀 What's New (6-Jan): New Transform Functions, Back4App API integration, and more
new
Happy New Year 🎉
Let's learn what's new at Draftbit this week.
🚀 New Transform Functions
Transform Functions are the helper functions that you can use to convert one form of value to another.
We’ve recently added new transform functions such as ToUpperCase, ToLowerCase, ToString, Increment, Decrement, and ParseJsonString.
You can check out the complete documentation on Transform Functions here ↗️
📝 Back4App REST API Integration
We have new REST API guides to integrate Back4App with Draftbit.
💡Tip of the Week: Horizontal Scroll List
Did you know that you can make the
List
component scroll horizontally? Learn more ↗️
Catch you next week!
🚀 What's New (23-Dec): Publishing apps with One Click and more
new
Hi Community 👋
Let's learn what's new at Draftbit this week.
🚀 Ready, Set, Publish: One-Click Publish is here!
01.png
This week we released a way for you to publish your apps inside the Draftbit builder interface (yes, the “no-code way of publishing apps”)!
💡Tip of the Week: Static Picker Options
The Picker component is data-enabled, so you can assign the Picker's options to a list that you fetch from a database. But, you can also provide a static array when you have a fixed set of options to display. Learn more ↗️
Happy Holidays!
🚀 What's New (16-Dec): Console Log panel and action, Show/Hide Components, Nested Navigation Enhancement, and much more!
new
Hi Community 👋
Let's learn what's new at Draftbit this week.
📝 Introducing: Console Log and console.log() Action!
3.gif
The more complex your apps get, the more debugging you need to do. Your browser's web console is a great way to examine network requests and warnings, but we thought we could make debugging a better experience by bringing it into Draftbit. Learn More ↗️
👁 Show/Hide Components
4.gif
When building complex UIs, it's common to want to temporarily hide components on a screen. Learn more here on how to do that ↗️
⚛️ Custom Code Editor Enhancements
5.gif
💻 The Hapi Path to Express.js for our Backend Services
As Draftbit is growing, we recently transitioned from hapi to the Node.js industry-standard, Express.js — specifically choosing the apollo-server-express version, which combines the best of both worlds (GraphQL + HTTP REST). Read more about the nuances and our decision to migrate to Express.js so that, ultimately, we can focus our time to add more features for you ↗️
🧭 Nested Navigation Enhancement
As your app becomes more and more sophisticated, you might need more advanced and robust navigation capabilities. In Draftbit, you used to only be able to navigate from a screen to a sibling screen or a sibling navigator. With our latest improvements, you can now navigate from a screen to — not only a sibling navigator — but directly to a screen inside that sibling navigator.
With these new changes, when adding the Navigate action on a Button or a Touchable component you will see the property called Destination.
CleanShot 2021-12-15 at 23.32.17.png
This new property will allow you to select the sibling navigator from your Navigation stack.
Once you do that using the dropdown menu next to it, there is a new property called Screen that appears. Using the dropdown menu, you can then select the screen inside the Destination Navigator.
CleanShot 2021-12-15 at 23.32.31.png
💡Tip of the Week: Launch the Phone App
1.gif
✍️New Tutorials
Custom "Back" Button in Draftbit
By default, your React Navigation setup inside Draftbit comes with "Back" buttons in the navigation headers. But if you want to implement a custom "Back" button in Draftbit, our own Rahul Shukla will show you how.
How to get and use a location with Custom Code
A common feature in many mobile and web apps is providing functionality that integrates the user's location. Luckily, Draftbit makes this process pretty simple. Learn more ↗️
From Draftbit's Blog
The Best CI/CD Tools for Mobile App Developers in 2022
Continuous Integration and Continuous Delivery (CI/CD) is a crucial process in mobile app development projects in Agile and DevOps cultures. Continuous Integration is the process of Integrating code at least daily and running automated tests to ensure the code is bug-free.
This article will discuss some of the best CI/CD tools for mobile app developers in 2022. Read more ↗️
Office Hours
Missed Office Hours this past week? No worries, we've got you covered:
Draftbit Office Hours (December 14, 2021)
Draftbit Office Hours (December 9, 2021)
Catch you next week!
🚀 What's New (9-Dec): Adding Multiple Languages Support, Advanced TextInput Controls, Featured Component, and more
new
Hi Community 👋
Let's learn what's new at Draftbit this week.
🈁Adding Multiple Languages Support
We released a new tutorial on how you can add support for multiple languages in your Draftbit app.
⭐️ Featured Component: Star Rating
wk2.png
With Draftbit's Star Rating component, displaying and gathering user ratings for all kinds of things is possible and simple to set up. Read More ↗️
💡 Tip of the Week: Advanced TextInput controls
wk1.png
📄New Docs
We published new two new documentation pieces:
🎓 Office Hours Recording
Missed Office Hours this past week? No worries, we've got you covered:
Draftbit Office Hours (December 7, 2021)
Draftbit Office Hours (December 2, 2021)
Catch you next week!
🚀 What's New (2-Dec): Toggle a component's visibility, Relative Time Zones with Xano, Better Custom Code experience, and more
new
👋 Hi Community
Let's learn what's new at Draftbit this week.
👁 New feature: Toggle Components visibility in the Components tree
444.gif
We added the ability to toggle between a component's visibility in a screen's Components tree. Using this, hiding a component will help you troubleshoot when a certain component is causing an error on the screen.
🔥 Better Custom Code editor experience
CleanShot 2021-12-02 at 19.29.12.png
We've upgraded Custom Code Editor for writing Custom Components and Functions to provide a better experience.
The editor now
  • has a new theme
  • supports auto-suggestion for variable and function names
  • mini-map on right-hand side to traverse large Components
📣 Shoutout to Karl Larson
222.jpg
Massive shoutout to our community member Karl Larson (founder of ) for sharing a new guide with us:
✍️New Tutorials
111.png
We released two new tutorials on using Open Camera and Open Image Picker actions:
🎓 Office Hours Recording
Missed Office Hours this past week? No worries, we've got you covered:
Draftbit Office Hours (November 30, 2021)
Catch you next week!
🚀 What's New (25-Nov): Modal & Action Sheet components, Expo SDK 43 upgrade, Todo app demo, and more
new
Hi Community 👋
We have a big announcement and new learning materials to share this week.
🔥 New Components: Modal & Action Sheet
1.png
We recently released two new components: Modal and Action Sheet. Read the complete announcement here ↗️
🚀Expo SDK 43 upgrade
We're excited to announce we've upgraded Draftbit to Expo SDK 43. Expo powers Draftbit under the hood and allow us to build ios, android, and web apps behind the scenes. Read the major highlights here ↗️
📺From Draftbit's YouTube Channel
Draftbit Todo List App Demo
✍️ From Draftbit's Blog
3.png
The 10 Best Design Tools for Mobile App Creators in 2021
This article will discuss some of the best design tools for creating mobile apps in 2021. Read More ↗️
Catch you next week!
🚀 What's New (19-Nov): REST API Data Synchronization, Intro to Draftbit videos, No Code Instagram clone, and more
new
Hi Community 👋
We have a big announcement and new learning materials to share this week.
🔥 REST API Data Synchronization is here!
1.png
We've made some big improvements to our REST API integrations, adding data synchronization and in-list editing.
🎥 From Draftbit's YouTube Channel
Our own Georges Duverger created a video for you to get hands-on experience with Data Synchronization in Draftbit:
If you are just getting started with Draftbit, we produced five new "Introduction to Draftbit" videos for you to learn more.
2.png
✍️ From Draftbit's Blog
We recently published a new series of tutorials where we will create a full-stack Instagram clone app with Draftbit and Xano.
At the end of this 3-part tutorial series, you will have built a fully-functional Instagram clone (we call it Picbit) that allows:
  • app users to sign up, login,
  • create posts to their profile,
  • and like and comment on other peoples’ posts.
cv1.png
cv2.png
cv3.png
🎓 Office Hours Recording
Missed Office Hours this past week? No worries, we've got you covered:
Draftbit Office Hours (11 November)
Draftbit Office Hours (16 November)
Draftbit Office Hours (18 November)
Catch you next week!
REST API Data Synchronization is here!
improved
data-synchronization-featuring-react-query-draftbit.png
TLDR: We've made some big improvements to our REST API integrations, adding data synchronization and in-list editing.
REST-based API's are easily the most popular way to integrate with your backend or 3rd-party services and data. And this week, we're excited to roll out some big improvements to how these APIs are managed in Draftbit! For the engineers: we've added the well-known and well-worn React Query library into Draftbit for use with all REST-based API Services and Endpoints. These changes enable you to build more advanced apps, with improved performance and with better source code!
What's new or different?
  • All of the objects that you pull or push to your REST endpoints will be in sync automatically. No more refetching or navigating to see changes.
  • You can now update individual fields, inputs, and controls inside of a list of data.
  • We automatically parse JSON for you, no need to add a separate action anymore.
  • Your source code for REST requests is easier to read, less complex, and easier to extend or change.
  • Massive improvements when making large or complex API requests and automatic deduplication of multiple requests to make your apps faster and more reliable.
These improvements also mean you can build new and complicated app use cases, like:
  • Nested To-Do list or productivity apps
  • Multi-item add-to-cart shopping experiences
  • Saving items to bookmarks or carts without leaving the feed.
Moving to this new paradigm is optional, not automatic. To get started, you'll need to add object types and roles to your API requests to start utilizing these benefits. Want to learn how to do that? Our very own Georges Duverger has created a walkthrough showing off the feature and how to get it set up. Check it out!
Check it out and then show us what you've built with this new feature! Record a quick video and post it in the Draftbit Community Showcase, and we'll feature the best examples in our next newsletter.
Load More