Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Follow these steps to build your first app!
Thunkable gives you a variety of ways to create your very own cross platform apps. To learn how to set up a Thunkable account, please read our article on signing in.
Choose how you want your projects to be laid out. Search and filter your projects.
They exist! They are helpful! Thunkable tutorials cover both basic concepts and advanced features.
With the Thunkable Live mobile app, you can preview your apps directly on your personal devices. To learn more, please click below.
Click on one of the links below to download the Thunkable mobile app.
If you don't have an iOS or Android device, you can set up an emulator on your computer that will display your apps.
We have custom components and third-party integrations that you can drop directly into your projects. These components will allow you to build more advanced features.
The language of blocks is a visible programming language. By dragging and dropping blocks together, you can program your app.
The first thing you need to know as we welcome you to our Thunkable Docs is that we have two libraries of documents. One for each of the interfaces we currently offer:
Drag and Drop is our new platform interface that took our Creator's favorite features and functions from the previous interface (Snap to Place) and improved on them.
You'll know if you're looking for support with the Drag and Drop interface if your screen looks like this:
The Thunkable Docs to support users of the Drag and Drop interface are available here: Drag and Drop docs
Snap to Place was our first foray into cross-platform app development. It is our old platform interface.
You'll know if you're looking for support with the Snap to Place interface if your screen looks like this:
You're in the right place if you're looking for the Thunkable Docs supporting our Snap to Place interface.
In addition to our Thunkable Docs, we are also proud to offer you the following resources:
Thunkable Academy Not sure where to get started with the Drag and Drop interface? Check out the Thunkable Academy!
Community Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!
Instructional Videos Enjoy instructional videos? Check out our library of tutorials available on YouTube.
Contact our Support Team Creators on our Pro, Business, and Team plans can click the chat icon in the upper right of a Thunkable Project page to connect with our team.
You can get started building with Thunkable today for free. As you progress as a developer with Thunkable, we offer different membership tiers that allow you to build more and do more. This includes:
🖥️ Publishing web apps 💰 Showing AdMob ads in your app 🙈 Making private apps ⚡ Expedited publishing 📢 Adding push notifications to your app 📱 Creating a personalized splash screen and more!
Thunkable offers plans to suit individual and business needs. Read more about the memberships Thunkable offers.
On August 10th, we transitioned docs.thunkable.com to host our documentation for Thunkable's Drag and Drop platform. Previously, this URL was home to our Snap to Place documentation, which is now at an alternate URL.
Navigate and filter your projects
Thunkable lets you choose between viewing your projects in List View or Grid View.
You can decide whether to view your projects in List View or Grid View in the upper right corner of the page.
You can use the search bar to filter your projects by name
When you click on the 3 dots on a project card (Grid View) or list item (List View), you can see some project options.
You can delete your project, duplicate your project, or see your Project detail page.
You can also view information about the project, such as its name, creator, project size, and how many times it has been remixed or favorited.
If the project is a remix of another project, the name and creator of the original project will be displayed.
You can create a Thunkable account with a Google account or with any other email address.
The email will look something like the image below. Pressing the Click to Sign In button will open your new Thunkable account and keep you signed in for 30 days, unless you choose to sign out sooner.
This button will sign you in automatically with your Google account. For most users this will be a Gmail address but if your school or work email is powered by Google then that will work too.
This button will sign you in automatically with your Apple account.
If you click Sign in with email you will be invited to type you email address in a text input.
When you click Email me the link we will send you a link that will sign you back into your account.
Preview your Thunkable project with our Thunkable live app, or on the Web
The Thunkable Live app connects the projects in your web browser directly to your mobile device. It allows you to do two things:
The Thunkable Live app allows you to live test your app on your device, in real-time, while you are building it. Not even hard core developers have this super power. You can also preview all your app projects from the comfort of your mobile device.
With Thunkable Live installed on your device, you are now ready to live test or to live preview.
While live testing, any changes that you make to your project should be reflected in your app. Bear in mind that the Thunkable Live app doesn't check your project for errors. Some changes that you make may crash the app. If this happens simply exit out of the app and re-open it.
From any of your Thunkable projects, click on the Live Test button at the top of the screen to begin live testing.
Clicking on the Live Test button will remind you to open Thunkable Live on your device.
Sign in with the same Google account in Thunkable Live to preview your projects directly on your device.
When you click the Live Test button you will be prompted to enter a code into your computer.
To find this code, open Thunkable Live on your device and click Email sign in - Generate Test Code.
Enter this code into the first prompt and you will be able to live test your app.
For the first time, you can live preview all your app projects from the comfort of your mobile device. Simply login and you should see a list of all your projects on your Thunkable Live app.
Common issues with the Thunkable Live app
If you have a Navigator as the first item in your tree, make sure your screen is dropped within it
You have unconnected blocks
You have an event triggered by a Screen. Start which may be causing the screen to crash
Your app and desktop may not be logged into the same account
(Android only) You are trying to set the value of a Slider in your blocks
(Android only) You are trying to set the latitude and longitude of a Map in your blocks
The height or width of the image may be set to 'Fit contents'
Preview on the Web allows you to live preview your own project directly from your browser. Simply click on "Live Test" to preview your own app in a pop-up window.
You can test and preview your project directly within your browser. This is a great option when designing your app's user interface and building out the app's functionality with blocks.
Not all components are supported on the web at this time so please see the list below of components that are not supported
:
You can toggle between the Drag and Drop and Snap to Place docs in the upper left corner.
You can find your projects page at . This is the first page you see when you sign in.
are able to create . You can use the Public and Private checkboxes to filter your projects, showing only public projects or only private projects.
On the Project Detail page, you can test out your app, similar to when it has been published as a .
If you've never used Thunkable before then you should visit our page. The sign up page gives you two options. You can either sign up with a Google account or an Apple account and sign in immediately, or you can enter your email address and to be sent a magic sign-in link. We recommend using a Google or Apple account, as it will make testing your app a little easier.
Returning users can go directly to our page to sign back into their Thunkable account. You can Sign in with Google, Sign in with Apple or Sign in with email.
To learn more about using Thunkable, take a look at some of our .
Once you're ready to try out your app, we have a helpful guide for .
You can your project. Any changes you make in your browser are displayed on your device immediately.
You can any of your projects, directly on your device, without the need to be logged in to your computer.
If you don't have an iOS or Android device, you can also on your computer that will mimic what you would see on an actual device.
The next pop-up you see depends on whether you select to or to .
You can also preview any public app, directly from the Project Detail Page. Here's , but you can find thousands of others in the public gallery.
It is important to note, however, that Web Preview does not support some app features. This is because some app features require functionality only available on a mobile device, such as push notifications, accelerometer, and Bluetooth low energy. For a full list of features that cannot be tested with Web Preview, please see here: .
Component | Category | Status |
---|
Map | Location |
|
Share | Social |
|
Push Notification | Social |
|
AdMob | Monetization |
|
Bluetooth Low Energy | Sensors |
|
Accelerometer | Sensors |
|
Gyroscope | Sensors |
|
Magnetometer | Sensors |
|
Alert | User Interface |
|
Speech Recognizer | Voice |
|
Assistant | Voice |
|
Photo Library | Image |
|
Barcode Scanner | Image |
|
Local Storage | Data |
|
There a several different types of project in Thunkable
A project is a place where your designs, files and blocks come together to create Android and iOS apps. There are four different types of project in Thunkable.
When you first sign in to Thunkable you will be prompted to create a project. To learn more about the maximum size your projects can be, please see our article about the minimum requirements for apps.
Public projects are included in the Thunkable Public Gallery for anyone to preview, download or remix. If you create a public project, please know that it can be viewed by anyone in the Thunkable community.
Private projects are just that, private. They can only be seen by their app creator and do not get included in the Thunkable Public Gallery. Only Thunkable PRO users can create and share private projects.
To make your projects public or private, click the "details" button on a project. You can then click the Public/Private switch to change who can view your project.
You can also click on your project name in the upper left hand corner, and click the switch to set your project to public or private.
Private projects become Read-Only projects when a Thunker's PRO membership expires. Read-Only projects remain private and are not included in the Thunkable Gallery.
You can only preview Read-Only. Once a project has been switched to Public, you cannot switch it back to Read-Only.
The term Legacy projects refers to apps that were built on Thunkable before Thunkable PRO existed. If you are a long-term Thunkable user and have legacy projects, they can be edited in private mode at any time.
We have lots of ways for you to learn how to use Thunkable.
To learn how to use Thunkable, try our in-platform tutorials. Click on the expand arrow on the left to open the tutorials panel. Click on a tutorial name to launch the video in a modal you can resize and move anywhere on the screen.
Follow step-by-step app-building instructions with our video tutorials on YouTube.
The Thunkable Community is where Thunkers share their ideas with the world. You can find a wide selection of staff and community-written guides and tutorials in the Thunkable Tutorials section.
It's best to keep app sizes as small as possible to preserve space on people's devices. All app projects have a 50MB limit, and free Thunkable accounts have a 100 MB total storage limit. If you need more storage for your account, you can upgrade to PRO to get 1 GB of space for your projects.
Thunkable PRO subscribers get 1GB of storage and can create unlimited public and private projects.
You can view a project's app size on the project's details page:
The main contributor to an app's size are files (also known as assets). To add or delete files, click on the Assets button in the side bar. Then click the "+" icon to manage all the files in your project.
While Thunkable often works on older operating systems, we only develop for operating systems that actively receive security updates (currently iOS 15 and Android 10, 11, 12).
You can view your total account storage size in your account settings.
Free Thunkable accounts have 100MB of storage. PRO Thunkable accounts have 1GB of storage.
Read more about Thunkable PRO here.
If you are near the limit, you may be able to create additional storage by removing projects that you no longer need like an old version or copy of a project.
We recommend that each of your asset files not exceed 50KB -100KB. Using smaller file sizes in your project will result in faster loading times for your users.
Thunkable recommends using file names that do not contain whitespace characters.
Here are two naming methods we recommend:
Snake Case - each space is replaced by an underscore (_) character, and the first letter of each word written in lowercase.
example_one.png
here_is_another_example.html
Camel Case - writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter, and the first word starting with either case.
exampleOne.png
hereIsAnotherExample.html
To view or change your project settings, click on the ⚙ icon next to your Project name in the left-hand side bar. Your App Settings will appear on the right-hand side of the screen.
This is a description of your app and how you intend it to be used. It is not necessary to fill this out in Thunkable. If you publish your app you will need to enter this information, whether on Thunkable or the App Store or Play Store.
To put it simply, your "app name" is the name of your app. This is the name that will be displayed on the Google Play Store or App Store, and that users see when they install your app on their device. This name is also used to set the page title when you publish as a web app.
Since space is limited, we recommend a short one or two word app name
Avoid using the character "&" in your app name: at the moment, it prevents your app from being installed on your device
This is not your app name! This is just the name of your project on Thunkable. When you create a new project, you will be prompted to write in a project name. You can change this name at anytime from your Projects Page.
A unique identifier for your app on the App Store or Play Store.
This should follow a pattern like com.domain.creatorname.appname
Make sure none of the segments of this package name begins with a number. Make sure none of the letters in this package name has an accent (e vs ë).
Your app icon is the picture that represents your app on your mobile device. This icon will also appear on your listing in the Google Play Store or App Store, and as your project icon on Thunkable. Users on our personal plans will see the default "Made with Thunkable" icon appear when their apps load.
If your company needs to remove the Thunkable branding from an app, this option is available as a project setting to both Business and Team customers.
Please make sure that the file you upload does not have the same name as another asset that you are using for your app. This will cause an error.
For publishing to the iOS App Store, you will also need an app icon that does not have any transparency or it may cause an error.
For publishing your app to the Play and App stores, you will need to create a separate icon with a higher resolution. For Google Play, the current requirement is 500 x 500 px. For the App Store, it's 1024 x 1024 px.
PRO Thunkable users have the option to set their app to Private. A private app will not be displayed in the Thunkable Public Gallery. Learn more about Thunkable PRO here.
When you publish to the App Store or the Play Store, you will need to increment (increase) your version number each time. If this switch is set to true,
Thunkable will automatically increment your project's version number each time you publish your app (iOS) or download your app (Android).
Enter the AdMob app ID for your iOS app. More info from AdMob here.
Enter the AdMob app ID for your Android app. More info from AdMob here.
Enter a string to explain to the user that a personal advertising identifier may be used to show them ads relevant to their online activity. Read more about tracking permissions for AdMob on iOS.
Default Value: "This identifier will be used to deliver personalized ads to you."
Set a version name for this version of your Android app.
Set a version code for this version of your Android app.
Import and export an Android Keystore to/from your app. Learn more about the Android Keystore here.
This property enables you to remove the Safe Area View which Thunkable adds to the app automatically. If you set this property to be true
, the screen background color will extend to full screen and there won’t be any white area. However, you need to manually take care of the notch in your app design, like adding extra space, in order to avoid the app element being blocked by the notch.
This property enables you to set the safe area view color. With this, you can customize the background color of the white area. Please note, this is an app level setting and you won’t be able to customize the color at the screen level.
Set a version number for this version of your iOS app.
When you add components that require permissions to your app, like the camera, you will need to add purpose strings to your app if you want to publish it to the App Store.
User Tracking If your app or any external service your app interacts with are gathering any kind of identifiable information, this must be explicitly disclosed to the end user of your app using an in-app prompt. If you do not include this and your app engages in tracking, Apple will reject your submission and ask you to resubmit while including an appropriate tracking string. To learn more about when to include a tracking string, click here.
If you use blocks for Translating, Image Recognition or Uploading media to the cloud, or use a Firebase database to support your cloud variables or Signing In, you can enter personal API keys for these components in the project settings.
Element | Limit |
---|---|
App size
50 MB
Account size limit
100 MB for Free, 1 GB for PRO.
Property
Setting
Size
192 x 192 px (minimum)
Shape
Square (equal height and width)
File Type
Preferably .png (vs. jpg or other file types)
Features and functions for your app
Apps contain many different features.
On Thunkable, you get to drag & drop which features - which we call components - go into your app.
Some features you can see. Let's call these features visible components. Examples include buttons, loading icons, and images.
Some features you can't see. Let's call these features invisible components. Examples include sounds, timers, and databases.
To put it simply, visible components are features that you can see on your app screen - like the ones pictured above.
Visible components can be styled by size, text, space, and location.
When adding visible components into your app, please note that they can only exist on one screen at a time. For example, if you want to add a button to three different screens, each screen will require its own button.
Invisible components are features on your app that you can't see.
They often relate to your app's functionality, and are quietly running in the background. When you add an invisible component to your app, that component can work on any screen.
For example, if you add a database component to your app, the database can be accessed from any screen. You do not need to add a database component to each screen.
Invisible components are displayed underneath the mobile device on the Thunkable app builder.
Components are organized into 10 different categories. For a more detailed description of each category and an outline of the components they contain, click on one of the pages below.
To find a component, you can manually scroll through the components section on the Thunkable app builder. You can also expand and collapse categories depending on your needs.
The quickest way to find a component is by searching for it in the search bar. Any matching components will also be displayed as you type.
The component tree can be found at the top left corner of your screen, just below your project name. The component tree contains a list of the visible and invisible components in your app.
You can move components around on the component tree to change the location of a component in your app.
Components that are nested can also be expanded and collapsed by clicking on the ▾ icon.
We've received reports of components on the Snap-to-Place platform loading slowly.
When adding a new component or moving an existing component, it may take 5+ seconds for the component to render on the screen. There is no need to worry - the platform fully functions, and the components still behave as expected.
While we are investigating the matter, we recommend you drag components directly to the component tree. See screenshot below:
A new app marketplace.
The Thunkable Gallery is an app building marketplace where users can find, share and remix existing projects. By default, all public projects built on Thunkable are sent to the Public Gallery.
When browsing the Gallery, here are three things that you can do with public projects:
View a Project Click to open any project on the Public Gallery to view an app's design or programming blocks.
3. Remix a Project All projects on the Public Gallery can be remixed. This means that you can customize any app project that you see.
Components to interact with
Thunkable is building the world's largest gallery of open sourced apps to help inspire you and save you time.
These Sign In templates can be easily remixed. Click to download!
Since mobile apps are radically easier to make with Thunkable, why not make apps just for the most important people in your life? We've started experimenting with some ways that apps have actually helped us feel closer to the ones we love.
#cloudvariables
#firebase
#share
Social media was originally invented for people to share things with people they trust. With the evolution of popular platforms today, it's increasingly hard to simply keep our channels private enough so our conversations and photos are less filtered and bringing us all joy (instead of FOMO).
#cloudvariables
#firebase
#mediadb
#cloudinary
#camera
#cloudvariables
#firebase
#cloneblocks
#devicetime
#drawernavigator
#slider
Cities are an increasingly popular place to live and work but navigating them can be a challenge. Here are a few apps that aspire to make that simpler.
Designed for your work and holiday travel, translator is an app that translates English text and speaks it aloud into 93 languages in the world.
#cloudvariables
#firebase
#mediadb
#cloudinary
#camera
The highest performing teams are said to be ones full of trust, empathy and psychological safety. Here are a few apps that may help your favorite teams build these important qualities.
Designed for teams that are spread out across different parts of the world, this simple app helps you quickly keep track of the external conditions that may be affecting your colleague's work and mood. At the very least, it may enable you to avoid talking about the weather and onto more important things. Customize for your team by editing the information in the OfficeDB component. The app pulls the latest temperature from the Open Weather Map API and as a bonus the latest traffic from Google Maps. There is a limit of 60 calls per minute in the free tier of the Open Weather Map API.
#webapi
#openweathermapapi
#googlemaps
#localdb
#camera
Work Credit is a team counting app for thankless tasks. The app shares data for the team in a private Firebase realtime database account so Thunkers looking to create one for their team will need to set one up. Work Credit has really transformed how our office works at Thunkable -- no longer are thankless tasks thankless. The winner each week gets to pick out our lunch destination on Friday (which is quite an honor)
#cloudvariables
#firebase
For managers out there, here's a helpful set of questions to guide your next 1:1 meeting from Mark, the beloved VP of engineering at Thunkable. For our team, this app is a great way for best practices to quickly spread throughout an organization. You can easily customize the questions by simply editing the question in the local database.
#localdb
#accelerometer
Starting your own business is a gratifying endeavor but most new business don't make it for the long haul. Here are a few apps that can help support the businesses that you love
Mobile games and puzzle apps are not just a great form of entertainment in those in between moments but they also great mediums for monetizing your app with ads.
Beaver Bingo is a simple puzzle app that we think is great for parties. Party goers take photos of the items in the nine boxes, which together reveals a hidden message. The app features the Image Recognizer component from Microsoft. No goats were harmed in the making of this app.
#imagerecognizer
#microsoft
#camera
#sound
#timer
#accelerometer
#admob
When you tap on the play icon to hear your favourite music, you are using a button.
A button is just something you can click on to perform an action. This action can be anything from navigating to a different screen, saving information to a database, or playing a sound.
You have many options for styling your button, such as changing the background color or text color. Here are the different options for customization:
Text: Text that appears on the button
Text Color: Color of the text that appears on the button
Background Color: Sets the background color of the button
Font Size: Size of the text that appears on the button
Custom Font (mobile only): Upload a TTF or OTF font file to use as your Button's font
Background Picture: Upload a picture that appears on the button.
Background Picture Resize Mode
Cover: Fills the entire button without changing the height and width ratio of the image
Contain: The entire image will be scaled down to fit inside the button, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the button length-wise
Repeat: Repeat the image to cover the button. The image's height and width ratio will not change
Center: Positions the image in the middle of the button
Visible: To see the button in your app, set the switch to true
Border
Width: Enter how wide you want the border outline of the button to be
Color: Pick a color for the border of the button
Style: Select if you want the border to be a dotted, dashed or solid line
Radius: Enter how round you want the edges of the border for the button to be
Font Bold: To make the text on the button bold, set the switch to true
Font Italic: To make the text on the button italic, set the switch to true
Raised: To cast a shadow around the button, set the switch to true
Disabled: To prevent the button from performing an option when it is clicked, set the switch to true
You can set how tall the button is using the height property and set how wide the button is using the width property.
Height
Fill container - The button fills the entire screen vertically
Fit contents - The button’s height changes to be the size of the contents it contains
Relative size - The button fills the specified percentage of the screen
Absolute size - Sizes the button to a specified number of pixels
Width
Fill container - The button fills the entire screen horizontally
Fit contents - The button’s width changes to be the size of the contents it contains
Relative size - The button fills the specified percentage of the screen
Absolute - Sizes the button to a specified number of pixels
You change the spacing and positioning of the button with the Margin and Padding properties. Margin
You can specify how much space you want between the edges of the button and the screen using either pixel or percent values.
Padding
You can specify how much space you want between the border and contents of the button using either pixel or percent values.
You can use the following blocks to listen for when a specific event occurs
Performs an action when the user taps the button.
Performs an action when the user holds down the button.
Performs an action when a user pressed down on the button
Performs an action after the user releases the button
The set and get resize mode blocks work with how the background picture is scaled within the button component. Acceptable values are:
Cover
Contain
Stretch
Repeat
Center
The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:
True
False
The font style properties of the button text can be "Bold", "Italic", or Raised. Expected values for each property are:
True
False
The get and set font size blocks are used to work with the size of the text that is displayed in the button. This value must be a number.
The set and get height blocks work with the Height property of the button component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Height
block returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.
This property corresponds to the text that is displayed in the button component.
The set and get visible blocks are used to show or hide the entire button component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the button component. Acceptable input values are.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
The Computed Width
block returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.
2. Preview a Project After downloading the , you can use the app to preview any public project directly on your mobile device.
Below are a few of our favorites with more to come. Feel free to customize them for your own use and share them with
For anyone who has a pet (or child) whose care is managed by multiple people, this app helps to coordinate regular meals, treats, walks and poops. This app is powered by a that syncs data quickly across devices. This app resets itself every day.
This app is kind of like an Instagram and Snapchat hybrid and we've created a private version of this app that we are using daily at the Thunk Tank to help our global team feel more connected. To make your app private, simply create a to keep your images within your sights and a to host the links to those images. You won't believe what people will share with a little bit of privacy!
This is a Slack-like chat app where users pick their own chat bubble colors. You can make the backend private by connecting it to your own . This app features the clone and device time blocks.
Simple website wrapper app with a multi-image branding screen, a social media bar that opens a deep link to a user's installed apps that works across platforms. If you are a PRO member, you can add push notifications to notify app users of ongoing sales. Check out our free tutorial in the to make one for the business that you love.
#webviewer
#timer
#push notifications
If you've ever played a board game or an RPG then you know what dice are. You also probably know easy they are to lose or misplace. With this app you can create and customize as many dice and sound effects as you like so that they're never more than a click away. There's a free tutorial in the all about how this app was made. This app also shows an Interstitial every time the dice shows 5.
Uploading a custom font file is available to accounts with Business and Enterprise plans. Check out our for more information about these plans
The get and set background color properties work with the color of the button itself i.e. the region behind the button text. Best practice is to use one of the built to set this value, but you can use HEX and RGB values too.
The get and set text color properties can be used to work with the color of the text displayed on the button. Best practice is to use one of the to set this value but you can use HEX and RGB values too.
The label component allows you to display text in your app.
You can customize your label using the following properties:
Text: Text that appears on the label
Font Size: Size of the text that appears on the label
Custom Font (mobile only): Upload a TTF or OTF font file to use as your Button's font
Uploading a custom font file is available to accounts with Business and Enterprise plans. Check out our pricing page for more information about these plans
Color: Color of the text that appears on the label
Background Color: Sets the background color of the label
Text Align
Auto - Aligns the text automatically
Left - Displays the text starting from the left of the label
Right - Displays the text starting from the right of the label
Center - Displays the text starting from the middle of the label
Justify - Aligns both the right and left side of the text equally
Font Style
Normal: Default text display
Italic: Display the text in italics
Font Weight: Select how bold the text on the label will be
Number of Lines: set a maximum amount of lines of text that your Label will display
Background Color: set the color of your Label's background
Border Width: Enter how wide you want the border outline of the label to be
Border Radius: Enter how round you want the edges of the border for the label to be
Border Color: Pick a color for the border of the label
Border Style: Select if you want the border of the label to be a dotted, dashed or solid line
Background Color: set the color of your Label's background
Border Width: Enter how wide you want the border outline of the label to be
Border Radius: Enter how round you want the edges of the border for the label to be
Border Color: Pick a color for the border of the label
Border Style: Select if you want the border of the label to be a dotted, dashed or solid line
Letter Spacing (iOS and web only): increase spacing between letters of your Label
Text Decoration Line: add a line through, underline, or both with underline line-through
Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double
Text Decoration Color (iOS and web only): set the color of your Text Decoration Line
Writing Direction (iOS and web only): set the writing direction of your Label's text
Letter Spacing (iOS and web only): increase spacing between letters of your Label
Text Decoration Line: add a line through, underline, or both with underline line-through
Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double
Text Decoration Color (iOS and web only): set the color of your Text Decoration Line
Writing Direction (iOS and web only): set the writing direction of your Label's text
This event will fire when the user clicks on the label.
The get and set background color properties work with the color of the label itself i.e. the region behind the label text. Best practice is to use one of the color blocks to set this value but HEX or RGB values may be used too.
The set and get height blocks work with the Height property of the label component. Acceptable input values are:
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The get and set number of lines property is used to work with the maximum number of lines of text that should be displayed in a label before that label starts to scroll.
This property corresponds to the text that is displayed in the label component.
Text Align can be any of the following values:
Auto
Left
Right
Center
Justify
True
False
The set and get width blocks work with the Width property of the label component.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
The text input allows the person using your app to type in anything that they want such as words, passwords or numbers.
You can choose from the following types of keyboards:
Default keyboard: Displays your device’s default keyboard
Email Address: Displays an alphanumeric keyboard to accept email addresses
Numeric: Displays a keypad with only numbers; It is similar to the phone pad keyboard
Phone Pad: Displays a telephone keypad; It is similar to the numeric keyboard
You can also set up Text Input for passwords as shown below using the Secure Text Entry Switch. This switch will replace text with * as users type.
To activate Secure Text Entry, look for the Text Input Style properties and make sure that the Secure Text Entry switch is set to true.
You can customize the Text Input component with the following properties:
Hint: Hint text that disappears when the user starts typing into the Text Input
Text: Text that appears on the text input
Visible: To see the text input in your app, set the switch to true
Border
Width: Enter how wide you want the border outline of the text input to be
Color: Pick a color for the border of the text input
Style: Select if you want the border to be a dotted, dashed or solid line
Radius: Enter how round you want the edges of the border for the text input to be
You can set how tall the text input is using the Height property and set how wide the text input is using the Width property.
Height
Fill container - The text input fills the entire screen vertically
Fit contents (Recommended) - The text input’s height changes to fit the contents it contains
Relative size - The text input fills the specified percentage of the screen
Absolute size - Sizes the text input to a specified number of pixels
Width
Fill container - The text input fills the entire screen horizontally
Fit contents - The text input’s width changes to fit the contents it contains
Relative size - The text input fills the specified percentage of the screen
Absolute - Sizes the text input to a specified number of pixels
You change the spacing and positioning of the text input with the Margin and Padding properties. Margin
You can specify how much space you want between the edges of the text input and the screen using either pixel or percent values.
Padding
You can specify how much space you want between the border and the contents of the text input using either pixel or percent values.
This event fires when the user clicks on the Text Input component.
This event fires when the component looses focus, i.e the user clicks on another component.
This event fires when the enter or submit button is pressed on the device keyboard.
This event fires every time a character is added or removed to the Text Input.
The border width value corresponds to the size of the border around the Text Input. Changes to the color and style of the border must be done in the designer.
The set and get height blocks work with the Height property of the Text Input component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Height
block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.
The set and get hint work with the prompt that is displayed in the Text Input, before the user starts typing. Any string of text or number can be used as the hint.
The set and get keyboard type property gives you control over what version of the keyboard is displayed on-screen when the user starts typing. Acceptable values are:
default
email address
numeric
phone pad
The set and get text property works with the string of text that displayed in the Text Input.
The set and get visible blocks are used to show or hide the entire Text Input component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the Text Input component. Acceptable values are.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
The Computed Width
block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.
The List Viewer component allows you to add, view and click on items in a list.
We recommend adding a short list of items within the app itself as the Screen starts. Although the list block itself can handle a large number of items, practically speaking you probably only want to use this approach if your project has tens of items.
If you need longer lists of information in your app you can use delimited data. This is very similar to using something like a .csv file. You can have hundreds of items in your list viewer using this method.
For longer lists where you need hundreds or thousands of items in your list, we recommend using the Data Sources component. This gives you three different options for storing your data.
Local Table
Airtable
Google Sheets
Choosing Airtable or Google Sheets allows you to create dynamic list viewers. This is where the information displayed to the user changes whenever you change your cloud-based data in Airtable or Google Sheets. Either of these options are ideal for when you need to store thousands of items, or you need to work with items that change frequently.
You can customize the List Viewer with the following properties:
Text Items Color: Set color of Text Items font
Text Items Background Color: Set background color for List Viewer
Text Items Font Size: Set font size of Text Items
Show Arrow: To see an arrow beside each item in the list, set the switch to true
Visible: To see the text input in your app, set the switch to true
Border
Width: Enter how wide you want the border outline of the List Viewer to be
Color: Pick a color for the border of the List Viewer
Style: Select if you want the border to be a dotted, dashed or solid line
Radius: Enter how round you want the edges of the border for the List Viewer to be
A List Viewer automatically fill 100% of the Screen width
You can set how tall the List Viewer is using the height property.
Height
Fill container - The List Viewer fills the entire screen vertically
Fit contents - The List Viewer’s height changes to fit the contents it contains
Relative size - The List Viewer fills the specified percentage of the screen
Absolute size - Sizes the List Viewer to a specified number of pixels
You change the spacing and positioning of the List Viewer with the Margin and Padding properties.
Margin
You can specify how much space you want between the border and the contents of List Viewer using either pixel or percent values.
Padding
You can specify how much space you want between the edges of the List Viewer and the screen using either pixel or percent values.
Performs an action when the user clicks on any one of the list items.
The set and get height blocks work with the Height property of the list viewer component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Height
block returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.
Choose whether or not the arrow is displayed next to every item in the list viewer.
Set or get the list of text items that are displayed in the List Viewer. You must use a list of data here - either locally stored or stored in the cloud.
The set and get visible blocks are used to show or hide the entire list viewer component. Acceptable values are:
True
False
The Computed Width
block returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.
The list viewer doesn't currently support pixel or percentage values for the width
property.
Think of a Light Switch. It has two settings, On and Off. That is exactly what the switch component is like.
A switch is a component that has two settings, true and false. You can get your app to do specific tasks only if the switch is set to true.
Each time the switch is clicked the value will change. The value returned will only ever be true
or false
. To test this for yourself you can use the following blocks.
In the following example, the user can only advance to Screen2
if the acknowledge they have accepted the terms and conditions by clicking on the switch.
You can customize the switch with the following properties:
Tint Color: Color of the switch track when switch is set to off
On Tint Color: Color of the switch track when switch set to on
Thumb Tint Color: Color of the switch thumb
This event fires every time the switch is clicked.
The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:
True
False
The set and get height blocks work with the Height property of the switch component.
Change the "active" color of the switch.
Change the color of the switch
Change the "inactive" color of the switch
Change the state (on or off) of the switch
Show or hide the switch on the screen.
The set and get height blocks work with the Width property of the switch component.
With the Web Viewer component, you can open up any website within your app to display.
In the Design panel, you can set many properties of the Web Viewer.
URL: Set initial URL to be displayed in the Web Viewer Height: Set Height of Web Viewer Width: Set Width of Web Viewer Visible: Toggle whether or not the Web Viewer is visible in the app Margin (top, bottom, left, right): Set a defined distance between the Web Viewer and its neighboring components on the Screen Padding (top, bottom, left, right): Set a defined distance between the border of the Web Viewer and its contents Border: Set the width, radius, color and style of a border around the perimeter of the Web Viewer
To open up a website in your app, you need to provide the Web Viewer with a URL.
A URL is kind of like a street address - it tells the web viewer the location of the website on the internet.
URL: Enter in the link to the website or an image. The URL must include https://
Note: Can also accept .html files that have been uploaded to the app (great for offline use).
You can use blocks to navigate back through previously visited web pages. Once you have gone back, you can also use blocks to navigate forward through your visited pages again.
You can set how tall the Web Viewer is using the height property and set how wide it is using the width property.
Height
Fill container - The Web Viewer fills the entire screen vertically
Fit contents - The Web Viewer’s height changes to fit the contents it contains
Relative size - The Web Viewer fills the specified percentage of the screen
Absolute size - Sizes the Web Viewer to a specified number of pixels
Width
Fill container - The Web Viewer fills the entire screen horizontally
Fit contents - The Web Viewer’s width changes to fit the contents it contains
Relative size - The Web Viewer fills the specified percentage of the screen
Absolute - Sizes the Web Viewer to a specified number of pixels
You change the spacing and positioning of the Web Viewer with the Margin and Padding properties.
Margin
You can specify how much space you want between the border and the contents of Web Viewer using either pixel or percent values.
Padding
You can specify how much space you want between the edges of the Web Viewer and the screen using either pixel or percent values.
You can toggle whether the Web Viewer automatically requests the user's location. Some websites require access to the user's location to work. However, if you do not plan on displaying a website that needs this permission in your app, then you may not want your app to request an unnecessary permission.
To set whether or not the Web Viewer requests the user's location, go to the Design tab and click on your Web Viewer. In the panel on the right hand side of the screen, click on the Advanced tab.
Scroll down until you see a switch labeled Geolocation Enabled. Use this switch to toggle whether your Web Viewer requests the user's location.
If you own the website being displayed in your Web Viewer, you can send and receive messages between your website and the Web Viewer using Javascript.
Go back to the previous page visited.
Move forward to the next page in your browser history.
Post a message.
Reload the web viewer.
Returns any message that was received after calling the Post Message function.
The set and get height blocks work with the Height property of the web viewer component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Height
block returns the on-screen dimensions of the web viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the web viewer in pixels.
The set and get width blocks work with the Width property of the web viewer component. Acceptable input values are.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
The Computed Width
block returns the on-screen dimensions of the web viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the web viewer in pixels.
The set and get visible blocks are used to show or hide the entire button component. Acceptable values are:
True
False
The get URL block returns the "default" url in your project, i.e the value that you set in the designer. At this time it does not dynamically return the URL of the pages that is currently being displayed.
The Slider is a great UI element to enable users easily select a value from a fixed range of values.
To set up a slider, you'll have to first define the minimum
and maximum
values, the initial value
and the incremental steps
of the slider
We recommend using a Label with the Slider so that users can get immediate feedback on the value being set.
Minimum Track Tint Color: Color of the slider track to the left of the thumb
Maximum Track Tint Color: Color of the slider track to the right of the thumb
Thumb Tint Color (Android only): Color of the thumb
Border:
Width: Enter how wide you want the border outline of the Slider to be
Color: Pick a color for the border of the Slider
Style: Select if you want the border to be a dotted, dashed or solid line
Radius: Enter how round you want the edges of the border for the Slider to be
You can set how tall the Slider is using the height property and set how wide it is using the width property.
Height
Fill container - The Slider fills the entire screen vertically
Fit contents - The Slider’s height changes to fit the contents it contains
Relative size - The Slider fills the specified percentage of the screen
Absolute size - Sizes the Slider to a specified number of pixels
Width
Fill container - The Slider fills the entire screen horizontally
Fit contents - The Slider’s width changes to fit the contents it contains
Relative size - The Slider fills the specified percentage of the screen
Absolute - Sizes the Slider to a specified number of pixels
You change the spacing and positioning of the Slider with the Margin and Padding properties.
Margin
You can specify how much space you want between the border and the contents of Slider using either pixel or percent values.
Padding
You can specify how much space you want between the edges of the Slider and the screen using either pixel or percent values.
When the user takes their finger off the slider. The event returns the value that the slider has settled on.
Please note that the on Sliding Complete
event does not work in web preview
This event fires each time the slider moves to a new position. Each time a new values is selected this event will return an updated value.
The set and get height blocks work with the Height property of the slider component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Height
block returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels.
Set or get the color of the right side of the slider.
Set or get the biggest value of the slider
Set or get the color of the left side of the slider
Set or get the smallest value of the slider
Set or get the step-size, also known as the increment, of the slider.
Change the color of the slider itself.
The set and get value blocks are user to work with the position of the slider.
The set and get visible blocks are used to show or hide the entire Slider component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the Slider component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Width
block returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels.
Some websites may not appear when previewing your app on the web. You may need to the app on a device, or and install the app, to see your web page.
The Back block may not work when you test your app on the web, but will work when your app and in apps
You can see examples of sending/receiving messages and get further setup instructions .
You may also find the component useful for sending/receiving information between your app and a website.
The set URL block is used to change the web address that is displayed in the web viewer. Please note that this block need to be used in conjunction with the function and the web viewer only supports connections via https. If you try to use http your website will not be displayed.
Property
Description
Text Items
Default (none
); items must be in list format
Property
Description
Item Click
Returns an item
value and a numeric index
number when an item is selected
Event | Description |
On Value Change | By default, the switch |
Value | If on, value is set to |
Disabled | If set to |
Property | Description |
Minimum Value | Default ( |
Maximum Value | Default ( |
Value | Default ( |
Step | Default ( |
Property | Description |
Minimum Track Tint Color | Default ( |
Maximum Track Tint Color | Default ( |
Thumb Tint Color (Android only) | Default ( |
Border | Default ( |
Alerts are useful components for displaying important messages while users are in the app itself
A one button alert, also known as a notification, displays a message and one button to confirm user has viewed the message
To set up an alert, simply fill in the following simple
properties. The Cancel Button Text only needs to be filled out for a two-button alert. You can use blocks to start an event when
Two button alerts have two buttons, one that dismisses the notification and one that can be programmed to start an event
To set one up, simply add the following simple
properties
If you want to start an event from a confirm button, you will want to add the blocks below:
It is possible to add buttons to an alert for more sophisticated use cases.
This can be done using the set Button List to
block by creating a list of objects.
You can set the Text of the Alert. You can set the Style of the Alert to ok, destructive or cancel.
On iOS, the Alert can show more than 3 Buttons. On Android, the Alert can show up to 3 buttons. If more than 3 buttons are specified, the first 3 will be shown.
The 'showButtonList' block will return an output called 'buttonPressed'. This will return the position of the Button in your Button List. You can take some action based on which button was pressed.
Note: the Buttons may appear in a different order when testing the app on a device. The number that ‘buttonPressed’ returns is the order that the Buttons are added in the app project.
For activities that take more than a few seconds, loading icons can be helpful to tell your app users that an activity is happening in the background, such as retrieving or uploading data.
The loading icon should be displayed when the app is performing an activity in the background and hidden when it is not.
One way to show and hide the icon is to use the visible
property of the component.
In the following example the loading icon shows up when the app opens but disappears after data is retrieved from Airtable.
When the visibility is set to true, the loading icon will be seen on the app screen. If set to false, the loading icon will not be seen on the app screen.
You can use the Animation component to display a JSON animation from Lottie in your project. Lottie offer a wide range of animations that can be displayed as content in your project loads.
A Date Input component is helpful when you want the user of your app to easily select a specific date using the native Android or iOS date picker
The Date Input component needs no set-up (Woohoo!). Just drag and drop the component into your project. As a bonus, the current date will automatically show up as a label.
When a user of your app taps on the Date Input, it will automatically launch the native Android or iOS date pickers.
You can set the format of the date by choosing an option from the Style
property. Currently supported styles are:
YYYY-MM-DD
MM/DD/YYYY
M/D/YY
Month Day, Year
Mth. Day, Year
The date that a user selects will show up automatically in the Date Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.
A Time Input component is helpful when you want the user of your app to easily select a specific time using the native Android or iOS date picker
The Time Input component needs no set-up (Woohoo!). Just drag and drop the component into your project. As a bonus, the current time will automatically show up as a label.
When a user of your app taps on the Date Input, it will automatically launch the native Android or iOS date pickers.
You can set the format of the time by simply choosing your desired format from the Style
property
The time that a user selects will show up automatically in the Time Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.
Allow your users to view your favorite PDFs -- legal contracts, art posters or maybe even a PhD dissertation -- all from the convenience of your app
Simply upload your PDFs into the File property and voila!
There is a limit of 50 MB per app so be careful or size down your larger PDFs if it may exceed this limit
Once you upload the PDF, you will be able to view it in your app and pinch to zoom in.
The Rating component is a visible component which can be used to display the rating of a product or content in your app, and allow the user to leave their own rating.
A Rating component is made up of 5-10 icons. An icon can be filled, partially filled, or empty, as seen below:
This block fires when a user enters a rating in the Rating component.
Maximum rating that can be given. Can be an integer between 5 and 10, selected from a drop-down menu.
Select how the Rating component is displayed: as a row (left-right), row-reverse (right-left), column (top-bottom), or column-reverse (bottom-top).
Change the size of the icons that make up the Rating component.
Set or get the height
of the rating component in pixels.
Get or change the size of the margin between the icons of the Rating component.
You can select an image from the list available. All of the image options are suitable for any platform. You can preview the image options here.
You can upload your own images to be displayed for filled and empty icons.
Toggle whether the user can edit the value displayed on the Rating component. If read-only is true, the value cannot be edited. If read-only is false, the value can be edited.
Select the color of an unfilled icon.
Select the color of a filled icon.
Initial value displayed on the Rating component. Can be any number between 0 and the maximum value, including decimals.
Toggle whether your Rating component is visible.
Set or get the width
of the rating component. Given in Pixels.
Set or get the horizontal position of the rating component on the screen.
Set or get the vertical position of the rating component on the screen.
Property
Description
Title
The title of the alert
Message
The subtitle of the alert
Confirm Button Text
The text of the button
Cancel Button Text
LEAVE BLANK
Property
Description
Title
The title of the alert
Message
The subtitle of the alert
Confirm Button Text
The text of the right confirm button; If the danger
switch is turned on, the text will be in red (iOS only)
Cancel Button Text
The text of the left cancel button
Property
Description
Title
The title of the alert
Message
The subtitle of the alert
Text Advanced
The text of the button
Style Advanced
The style of the button; ok
is a confirm button, cancel
is a cancel button and destructive
is a confirm button with text in red (iOS only)
Property
Description
Color
The color of the loading icon
Size
Small
or large
Event
Output
Get Date
Date in whichever format you specify e.g. YYYY-MM-DD
Get Year
Year in 4 digit format e.g. 2019
Get Month
Numerical month from 1-12
Get Day
Day of the month from 1-31
(depending on the month)
Event Property
Output
Get Time
Date in whichever format you specify
Get Hours
Hour of the Day from 1-24
Get Minutes
Minutes from 1-60
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.
If you have any feedback for us about the Data Viewer components please let us know over in the Thunkable Community.
The data viewer components allow you to create beautiful user interfaces for your data. All of this is done in just 3 steps, no blocks required!
You can add additional functionality to the Data Viewer List by using the included component blocks or you can work directly with your raw data by using the Data Sources blocks.
To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.
You can use Google Sheets or Airtable to store data in the cloud. Alternatively, you can create your own table. This is ideal if you want local, offline access to your data. Creating your own table is also the fastest and easiest way to get started with the data viewer.
In the Data_Viewer_List component properties, click the Add
button. In the pop-up modal you can choose an existing data source. If this is your first time using the Data Viewer you can create a new one by clicking on the Create New
button.
In the next modal, choose between Create your own table, Airtable or Google Sheets as the source of your data.
Start by naming your data source.
Next, select the Data Viewer component and click on the link that says Click here to edit the data
. This allows you to edit the placeholder data that was automatically generated
The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.
In Airtable, a base in considered to be the data source. Adding an Airtable DB is really simple.
To start, copy your API key from your Airtable account page. An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the Refresh
button to see a list of your Airtable bases.
Choose the base you want to use as your data source and click Create
.
In Google Sheets, the entire document is considered to be the data source.
In order to use a Google Sheet as a Data Source, the first row in your Sheet must be a header row.
To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.
Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select
to return to your Thunkable project.
At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.
Some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. The quickest way around this, for now, is to user a personal Gmail account. If you need a large group or class to use this feature then you may need to contact your G Suite administrator to review your security settings.
Once you have specified a data source you can choose your List Item Layout. There are 7 options to choose from. Depending on the raw data you have you can choose a layout that best fits your particular needs
You can also design a Custom Data Viewer Layout and save it with the Layout Type 'List' to use it in your Data Viewer List.
You can now manually specify which columns in your data source correspond with the placeholders in your chosen layout. Each layout will have its own specific set of data bindings. Two examples are included below for reference.
If you use the Title layout, you will only have one data binding, the Title property.
This increases all the way up to five properties, in the case of the Image Title Subtitle Secondary Image Description layout.
You can set a customizable, clickable button to appear when the list item is swiped to the left. If Left Swipe
is set to true you will see additional options to customize the button text, text color and button background color.
When you test this on your phone you will see that each list item can be dragged to the left to reveal a clickable button. The Left Swipe Click event handler controls what happens when this block is clicked.
You can also set a customizable, clickable button to appear when the list item is swiped to the right.
When you test this on your phone you will see that each list item can be dragged to the right to reveal a clickable button. The Right Swipe Click event handler controls what happens when this block is clicked.
The Item Click event is fired when any list item in the Data Viewer is clicked. It returns a row id
which corresponds to the unique Thunkable Id of the item that was clicked. The row id is most useful when used with the the Data Source blocks.
The left and right swipe click events are fired when these buttons are clicked. Both return a row id
to quickly identify which row was clicked when using the Data Source blocks
The following blocks allow you to work with the height and width properties of the Data Viewer.
The entire Data Viewer can be hidden or shown by setting the Visible
property to false or true, respectively.
Refresh the Data Viewer List to sync with the Data Source.
When you connect a Data Source to your project you will also have access to a second block drawer. These Data Source blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on your data.
Click on the link below to learn how to use the Data Sources blocks in your project.
Connect a data source to your app in minimal time.
Add a Data Viewer List or a Data Viewer Grid to your app in order to connect to your data source:
You can design custom layouts for displaying your data:
You can use blocks to let your user create, read, update and delete information in your data source by interacting with the Data Viewer, using Data Sources blocks:
Design a custom layout for displaying your data in a Data Viewer
If you want to set the height or width of your parent row/column to fill the container, we recommend setting it to Relative Size - 100% for best results.
Select your Parent Row/Column and click the 'Save as Data Viewer Layout' button.
When you click Save as Data Viewer Layout, you will see the following dialog:
To save a basic Data Viewer Layout:
Enter a Layout Name
Select if your Layout Type is List or Grid
Let Advanced Binding be set to false
Click OK
To save an advanced Data Viewer Layout:
Enter a Layout Name
Select if your Layout Type is List or Grid
Set Advanced Binding to true
You can now select which properties of the components in your Parents Row/Column you want to bind to the values in your Data Source.
Once you have selected all of the properties that you want bound to the values in your Data Source, click OK to save your custom Data Viewer layout.
With Basic Data Binding, Thunkable will automatically select basic properties of your components to bind to values in your data source.
With Advanced Data Binding, Thunkable will allow you to bind the properties that you specified to your data source:
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.
The data viewer components allow you to create beautiful user interfaces for your data. All of this is done in just 3 steps, no blocks required!
To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.
In the Data_Viewer_List component properties, click the Add
button. In the pop-up modal you can choose an existing data source. If this is your first time using the Data Viewer you can create a new one by clicking on the Create New
button.
Start by naming your data source.
Next, select the Data Viewer component and click on the link that says Click here to edit the data
. This allows you to edit the placeholder data that was automatically generated
The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.
Choose the base you want to use as your data source and click Create
.
In Google Sheets, the entire document is considered to be the data source.
In order to use Google Sheets, the first row in your Sheet must be a header row.
To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.
Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select
to return to your Thunkable project.
Please note that some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. The quickest way around this, for now, is to user a personal Gmail account. If you need a large group or class to use this feature then you may need to contact your G Suite administrator to review your security settings.
At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.
Finally, you need to manually specify which columns in your data source correspond with which placeholders in your chosen layout.
Each layout will have its own specific set of data bindings. Here is what your Data Bindings section will look like if your chosen Data Viewer Grid layout has an Image, Title and Subtitle field:
The following blocks allow you to work with the height and width properties of the Data Viewer.
The entire Data Viewer can be completely hidden or shown by setting the Visible
property to false or true, respectively.
Refresh the Data Viewer Grid to sync with the Data Source.
When you connect a Data Source to your project you will also have access to a second block drawer. These Data Source blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on your data.
Click on the link below to learn how to use the Data Sources blocks in your project.
The Data Sources blocks allow you work with the information that you have stored in your connected Airtable Bases, Google Sheets or Local Tables.
The Data Sources blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on records that you have stored in Airtable, Google Sheets or Local Tables.
To access the Data Sources blocks you need to add a Data Source to your app. There are two ways to do this:
Click on the ⊕ icon in the Data Sources section of your component tree:
In the modal that appears, you can choose a previously connected Data Source, or add a new Data Source.
Start by naming your data source.
You can now see this Data Source from your Data Sources section. Click on the Data Source name to edit it.
The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.
Choose the base you want to use as your data source and click Create
.
In Google Sheets, the entire document is considered to be the data source.
In order to use a Google Sheet as a Data Source, the first row in your Sheet must be a header row.
To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.
Some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. You may need to contact your G Suite administrator to review your security settings.
Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select
to return to your Thunkable project.
At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.
The create row in
block allows you to append new rows to the end of your data tables.
The inputs are dynamic so if you change the name of Column 1 or Column 2 in the designer these changes will be reflected in the block too.
The get value from
blocks allows you get read one value from a specific cell in your data table. You can specify the column name in the block itself and pass the unique row id as an input.
Note that each row has its own unique 24 character ID. You must use this ID to refer to rows of your Airtable and Local data sources in the blocks below.
If your data source is a Google Sheet, you can refer to the row by its integer position (1 for the first row, 2 for the second row, etc.)
The number of rows in
block returns an integer corresponding to how many rows are in a given table.
You can use the update value in
block to modify or update an existing cell in your data table. The column name is specified in the block itself. Both the row id and new value are passed as inputs.
You can use the Delete Row
block to delete a row of data from your Data source.
The row id
is passed as an input.
If there is an error
, the error message is passed as an output.
You can use the delete all rows
block to delete all rows in your data source.
If there is an error
, the error message is passed as an output.
How to set up and organize your app.
To go from an idea to app, we strongly recommend that you sketch out your vision using the below app templates. It's important to first create a roadmap for how people will interact with your app.
Here are three examples of navigators that you can use on Thunkable.
While the and have different layout options, you may want to design a custom layout for your data. This can be achieved with and components.
Use a or to create the custom layout you want. We will refer to this as the 'Parent Row/Column' for the rest of this doc.
This layout is a Row that contains two Columns. The first Column contains 3 : TitleLabel, DescriptionLabel, and PriceLabel. The second Column contains an , ProductImage, and a Rating, called ProductRating. These components will be referenced in subsequent screenshots in this document.
Once you have saved your custom layout, you can select it as a layout for your Data Viewer. If your layout was saved with the Layout Type List, it can be used with the . If it was saved with the Layout Type Grid, it can be used with the .
You can bind the properties of your data to a .
You can manage your custom data layouts by going to your Thunkable homepage at and clicking on the My Modules tab at the top of the page. From here, you can edit and delete your custom data layouts.
Check out our Hockey teams to see the Data Viewer grid in action. Click the "Copy Project" button is you'd like to reuse this open-source sample for yourself.
If you have any feedback for us about the Data Viewer components please let us know over in the .
You can add additional functionality to the Data Viewer Grid by using the included or you can work directly with your raw data by using the .
You can use or to store data in the cloud. Alternatively, you can . This is ideal if you want local, offline access to your data. Creating your own table is also the fastest and easiest way to get started with the data viewer.
In the next modal, choose between , or as the source of your data.
In Airtable, a base in considered to be the data source. Adding an is really simple.
To start, copy your API key from your Airtable . An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the Refresh
button to see a list of your Airtable bases.
If you're new to Airtable you can read more about it in our documentation.
You can also design a and save it with the Layout Type 'Grid' to use it in your Data Viewer Grid.
The Item Click
event is fired when any card in the Data Viewer is clicked. It returns a row id
which corresponds to the unique Thunkable Id of the card that was clicked. The row id is particularly useful when used with the the blocks.
Add a or a to your project
When adding a new Data Source, you can choose between , or as the source of your data.
In Airtable, a base in considered to be the data source. Adding an is really simple.
To start, copy your API key from your Airtable . An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the Refresh
button to see a list of your Airtable bases.
Your Google Sheet must be for Thunkable to access its data.
Looking to reset your Google Sheets connection? for instructions
Get row object
will return the row object of the specified row ID. The row object can be used with
The list of values in
block allows you to read an entire column of data from a table and returns it as a list that you can then manipulate with the built-in .
Most apps navigate through screens using navigators. Click to watch a tutorial on how to use each navigator.
and Navigators - These navigators allow you to change screens by clicking on icons at the top or bottom of the screen.
2. - A navigator that pulls out a side menu of different options to choose from.
3. - Navigators that allow you to stack screens on top of other screens.
Navigate to different screens using a bottom tab navigator.
To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
You have many options for styling your Bottom Tab Navigator, such as changing the background color or tint color. Here are the different options for customization:
Active Tint Color: Select a font color for the tab currently in use.
Active Background Color: Select a color for the tab currently in use.
Inactive Tint Color: Select a color for the text of the tabs that are not in use.
Inactive Background Color: Select a color for the tab not currently in use.
ShowLabel: Toggle whether to show tab labels in the Tab Navigator.
ShowIcon: Toggle whether to show icons in the Tab Navigator.
When designing a tab, you can use words or images to guide users to different screens.
Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator. Step 2. Select the Bottom Tab Navigator. Decide if you would like to display icons or labels by clicking on these switches:
Step 3. Depending on if you are adding icons or labels, select the screen you would like to style and upload an image or add content:
Additional descriptions are below:
Tab Bar Label -- The name of your tab label
Active Tab Icon -- Icon that appears when tab is selected; You can upload an image for this icon.Inactive Tab Icon -- Icon that appears when tab is not selected; You can upload an image for this icon.
To ensure that your bottom tab navigator is visible, the TabBarVisible switch must be set to true. If the TabBar is visible switch is set to false, the bottom tab navigator will not be visible in your app.
Possibly the most common style of navigation in mobile apps is tab-based navigation.
The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking.
To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
You have many options for styling your Top Tab Navigator, such as changing the background color or tint color. Here are the different options for customization:
SwipeEnabled: Allow the user to swipe between screens.
AnimationEnabled: Select whether to animate the transitions between screens.
Lazy: If true
, tabs are only loaded once the tab is opened. If false
, all tabs are loaded when the Tab Navigator is first opened.
Background Color: Select a color for the top tab navigator.
Tab Indicator Color: An underline will appear underneath the tab you select. You can select a color for the underline.
Active Tint Color: Select a font color for the tab currently in use.
Inactive Tint Color: Select a color for the text of the tabs that are not in use.
ShowIcon: Toggle whether to show icons in the Tab Navigator.
ShowLabel: Toggle whether to show tab labels in the Tab Navigator.
Upper Case Label: Make the text for all the tabs upper case.
PressColor: Color of material ripple as a tab is pressed
PressOpacity: Opacity of material ripple as a tab is pressed
ScrollEnabled: Toggle whether to enable scrollable tabs
Tab Indicator Height: An underline will appear underneath the tab you select. This section will allow you to choose how tall the underline is.
When designing a tab, you can use words or images to guide users to different screens.
Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator.
Step 2. Select the Top Tab Navigator. Decide if you would like to display icons or labels by clicking on these switches:
Step 3. Depending on if you are adding icons or labels, select the screen you would like to style and upload an image or add content:
Additional descriptions are below:
Tab Bar Label -- The name of your tab label
Active Tab Icon -- Icon that appears when tab is selected; You can upload an image for this icon.
Inactive Tab Icon -- Icon that appears when tab is not selected; You can upload an image for this icon.
Swiping is a popular way to move through screens and is enabled by the Tab Navigator. You can enable the swipe feature by clicking the "SwipeEnabled' switch.
Navigators are the only component that you cannot drag and drop into your phone at the moment. You'll have to drag it left to the tree hierarchy. Make sure that screens are fully contained within your navigator.
The Stack navigator creates a header bar across all screens. You can add a title to this bar by navigating to the Screen properties
To enable a Stack transition, you will have to add a Screen navigation block like the one below. You can find the Screen navigation block in the pre-built Control category:
Screens can Stack from left to right or from top to bottom. You can set the transition style with the Stack property below:
It is not possible to use blocks to navigate from a screen outside of your Stack Navigator to a screen inside your Stack Navigator
It is possible to hide the Header bar and maintain the Stacking transition by using the Stack property below. Hiding the Header bar will also hide the back button that makes it easier to transition to your original screen
Navigate to different screens using a clickable drawer that slides out from the side.
To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
To name your drawers, click on each screen and navigate to the Drawer label on the bottom right corner of the properties section.
You have many options for styling your Drawer Navigator, such as changing the background color or tint color. Here are the different options for customization:
Drawer Width: Width of the Drawer in pixels
Drawer Position: Position Drawer swipes out from: left or right
DrawerOptions
Active Tint Color: Tint color for selected drawer.
Active Background Color: Background color for selected drawer.
Inactive Tint Color: Text color for unselected drawers.
Inactive Background Color: Background color for unselected drawer.
Property | Description |
Header Title | Title of your header |
Header Back Title | Title of the back button on a stacked screen; if |
Property | Description |
Mode | Default ( |
Property | Description |
Header Mode | Default ( |
A row is horizontal container that allows you to position components side by side.
For more information on sizing in your app, please see our introduction here
The Horizontal Alignment
property allows you to space elements in a Row horizontally
The Vertical Alignment
property allows you to space elements in a Row vertically
Background Picture Resize Mode
Cover: Fills the entire screen without changing the height and width ratio of the image
Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the screen length-wise
Repeat: Repeat the image to cover the screen. The image's height and width ratio
will not change
Center: Positions the image in the middle of the frame
Property | Description |
Height |
|
Width |
|
Property | Description |
Background Color | Default ( |
Background Picture | You can upload a background image to your app or reference an image url e.g. |
A column is a vertical container that allows you to stack components.
For more information on sizing in your app, please see our introduction here
The Vertical Alignment
property allows you to space elements in a Column vertically
The Horizontal Alignment
property allows you to space elements in a Column horizontally
This determines how to resize the image when the frame doesn't match the raw image dimensions.
Cover: Fills the entire screen without changing the height and width ratio of the image
Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the screen length-wise
Repeat: Repeat the image to cover the screen. The image's height and width ratio
will not change
Center: Positions the image in the middle of the frame
When building apps on Thunkable, Screens function like blank pages in a book. They allow you to display different components and information.
The Horizontal Alignment
property allows you to space elements in a Screen horizontally
The Vertical Alignment
property allows you to space elements in a Screen vertically
This determines how to resize the image when the frame doesn't match the raw image dimensions.
Cover: Fills the entire screen without changing the height and width ratio of the image
Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the screen length-wise
Repeat: Repeat the image to cover the screen. The image's height and width ratio
will not change
Center: Positions the image in the middle of the frame
Please Note: The Translucent StatusBar
property will only work on Android devices at this time.
Please Note: The StatusBar Color
property will only work on Android devices at this time.
Thunkable allows you to reuse a screen, and its associated blocks, in multiple projects with the "Save to My Screens" feature. You can find the save screen button at the top of the properties for every screen component in your app.
It's important that when you save your screen you use a descriptive and memorable name that describes what your screen does. The example below is for a sign in screen, which is something that often get reused across multiple projects.
Once you've saved a screen, any time you click the +
button to add a new screen you will be given the option to add a blank screen or to "Copy from My Screens".
Simply choose the screen that you want to add in and click the "Copy" button to proceed.
Property
Description
Height
Fill container - The column fills the entire screen vertically
Fit contents - The column’s height changes to fit the components it contains
Relative size - The column fills the specified percentage of the screen
Absolute size - Sizes the column to a specified number of pixels
Width
Fill container - The column fills the entire screen horizontally
Fit contents - The column’s width changes to fit the components it contains
Relative size - The column fills the specified percentage of the screen
Absolute - Sizes the column to a specified number of pixels
Property
Description
Background Color
Default (none
). Select any color using the color picker, RGBA or HEX value
Background Picture
You can upload a background image to your app or reference an image url e.g.beaver-yellow.png
Property
Description
Scrollable
Default (false
). Indicates whether the column is scrollable. For scrollable to work, you must also set your screen height to fit contents
and the components in your column must have heights set in absolute
pixels
Property | Description |
Background Color | Default ( |
Background Picture | You can upload a background image to your app or reference an image url e.g. |
Property | Description |
Scrollable | Default ( |
Property | Description |
Screen Orientation | Default ( |
Property | Description |
Show StatusBar | Default ( |
Property | Description |
StatusBar Style | Choose between |
Property | Description |
Translucent StatusBar | Default ( |
Property | Description |
StatusBar Color | Default ( |
Event | Description |
Starts | Fires when the Screen is first opened |
Event | Description |
Opens | Fires anytime the Screen is opened |
Event | Description |
BackButtonPressed | Fires when the physical or on-screen back button is pressed. (Android only) |
Function | Description |
ToggleDrawerMenu |
The image component lets you display pictures in your app.
The Image component lets you display pictures in your app and pairs nicely with image based components like the Camera, Photo Library, Image Recognizer and Media DB
There are a few ways you can display an image in your app:
Take a picture with the Camera component
The blocks above open up your phone’s camera and set the Image component to the picture that you took.
You can set how tall the Image is using the height property and set how wide it is using the width property.
Height
Fill container - The Image fills the entire screen vertically
Fit contents - The Image’s height changes to fit the contents it contains
Relative size - The Image fills the specified percentage of the screen
Absolute size - Sizes the Image to a specified number of pixels
Width
Fill container - The Image fills the entire screen horizontally
Fit contents - The Image’s width changes to fit the contents it contains
Relative size - The Image fills the specified percentage of the screen
Absolute - Sizes the Image to a specified number of pixels
With the Resize Mode property, you can do the following:
Cover: Resizes the picture to its max height or width regardless without changing the image quality.
Contain: Resizes the picture to fit the area without changing its quality
Stretch: The picture’s height will change to fill the image component length-wise
Repeat: Repeats the picture at its original quality within the image component area
Center: Positions the picture in the middle of the image component
You can style the image with the following properties:
Border
Width: Enter how wide you want the border outline of the image to be
Color: Pick a color for the border of the image
Radius: Enter how round you want the edges of the border for the image to be
You can change the spacing and positioning of the Image with the Margin and Padding properties.
Margin
You can specify how much space you want between the edges of the image and the screen using either pixel or percent values.
Padding
You can specify how much space you want between the border and the contents of the image using either pixel or percent value.
This event handler is fired when the user clicks on the image.
The Computed Height
and Computed Width
blocks return the on screen dimensions of the image, after it has been rendered on-screen. The value returned is an integer, representing the size of the image in pixels.
The set and get height blocks work with the Height property of the image component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The set and get picture blocks work with picture property of the image component. Pictures can be uploaded as local assets or specified as URLs
The set and get resize mode blocks work with how the picture is scaled within the image component. Acceptable values are:
Cover
Contain
Stretch
Repeat
Center
The set and get visible blocks are used to show or hide the entire image component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the image component. Acceptable values are.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
Opens or Closes the drawer menu, if available. Must be used in conjunction with the
Upload a picture to your project Files:
Provide a link in the Image properties
Name
Data Type
Data
Photo
Image
Image the user selected
DidUserCancel
True/False
If user cancelled action, returns true
; else returns false
Error
Text
If error, returns error; else returns null
Upload image to Microsoft Image Recognizer and get a result
This component is powered by Microsoft Azure. You can get your own server URL and subscription key for Microsoft Azure here. You can add these details to your app in the Project Settings panel, which you can access by clicking on your app icon.
Enable your apps to read barcodes and QR codes
Barcodes and QR codes can be useful features in many types of apps from social apps like WeChat and Venmo to connect friends together or location-based games like scavenger hunts. The Barcode Scanner component uses the camera to read any barcode or QR code.
The Barcode Scanner is among the easiest components to set-up and use. After adding the component to your app, you can connect it with a button and a label like the blocks below.
In most cases you'll use the default back
camera in your mobile device but you also have the option to specify the front camera in certain cases.
The Animation component powered by Lottie makes adding animations as easy as adding images. For designers, animations can be created in Adobe After Effects or Haiku and imported as a .json
file.
For the rest of us, there is a large and growing community of designers who have created free and editable animations that you can easily add to your app.
For more information on sizing in your app, please see our introduction here
You can trigger some action to happen when the animation is clicked using the 'when Animation Click' event.
Output Name
Data Type
Function
Photo
image
if a photo was taken, returns the photo
DidUserCancel
true/false
returns whether the user cancelled taking the photo
Error
text
if there was an error, returns the error
Name
Data Type
image
Image
Name
Data Type
Data
tags
List
Tags used to categorize the image
description
Text
Description of the image
confidenceLevel
Decimal
Value between 0 and 1 describing confidence that the description and tags are correct
error
Text
If error, returns error; else returns null
Name
Data Type
Data
value
text
value from scanned barcode/QR code
type
text
barcode
or QR code
was cancelled
True/False
If user cancelled action, returns true
; else returns false
error
Text
If error, returns error; else returns null
Property
Description
Animation
Please upload and reference your After Effects .json
animations to your app project. You can create your own or find a library of open sourced ones from sites like this
Loop
If true
, animation will run as a loop
Property
Description
Height
Fit contents
Container is just as large as the animation; Fill container
Container is as large as it can be on the Screen; Relative size
Size in percent of the Screen; Absolute size
Size in pixels
Width
Fit contents
Container is just as large as the animation; Fill container
Container is as large as it can be on the Screen; Relative size
Size in percent of the Screen; Absolute size
Size in pixels
The video component lets you play videos in your app.
The Video component lets you play videos in your app that are stored in the cloud or in your app. App users can easily pause, rewind or fast-forward the video with the built in player.
There are a few ways you can set a video source in your app:
Provide a link to the video. The link has to end in .mp4
, .mov
, …so videos uploaded to YouTube and other video sharing sites may not work.
Please note that the Video component is not recommended for streaming live video content.
You can set how tall the Video is using the height
property and set how wide it is using the width
property.
Height
Fill container (default)- The Video fills the entire screen vertically
Fit contents - The Video’s height changes to fit the contents it contains
Relative size - The Video fills the specified percentage of the screen
Absolute size - Sizes the Video to a specified number of pixels
Width
Fill container (default) - The Video fills the entire screen horizontally
Fit contents - The Video’s width changes to fit the contents it contains
Relative size - The Video fills the specified percentage of the screen
Absolute - Sizes the Video to a specified number of pixels
To set a video to play automatically, just toggle the Play property to true
See what video is currently set as the Video component's source
Many apps require a simple table of data to perform a number of essential tasks. One way to add this data is through a Local DB, short for database.
The first thing you want to do after you add the component is to edit the data table.
Please note that video files can be quite large and might exceed the 50 MB for your project.
Upload a video to your app. Be careful of the Thunkable 50 MB
You may want to update the data in your Local DB from the app itself. At the moment, you can only update a specific cell. We are hoping to add the ability to add and delete an entire row. Any updates you make to the table from the app will only be seen by the specific user of the app. To make changes that will be reflected across all apps, we suggest you use the component where data is stored n the cloud.
At present, changes made to your Local DB data will not be stored across app sessions. If you want the changes to your data to be stored across app sessions, you can use an Airtable component, whose data is stored in the cloud, or use to store data locally, either as strings of text or as with multiple properties. Date stored with the component is also persistent across app sessions.
Event | Description |
Get Cell ( | Gets the data in a cell based on the |
Get Column ( | Gets the data in a column formatted as a list based on the |
Get Row ( | Gets the data in a row formatted as a list based on the |
Number of Rows | Gets the number of rows |
Event | Description |
Set Cell ( | Updates the data in a specified |
Information is the lifeblood of any organisation so Thunkable gives you several options for collecting, storing and, retrieving data in your app
You can use the Local DB and the Local Storage components to store data on your users device.
If you want to store data in the cloud, whether you're working with plain text or with media files, Thunkable has a wide variety of components to suit your needs.
The WebAPI component allows you to quickly and easily connect to any third-party API. Click on the link below to see some examples of how to get started.
Record videos to play in your app or save to the cloud.
You can record a timed video, where the app records for a set amount of time, or an untimed video, where the user can choose how long to film for.
You can display the videos you record with the Video component. You can also save you recorded videos to the cloud with our Media DB component. Once you have saved a video to the cloud, you can store the URL as a cloud variable or in an Airtable DB to make it accessible through the app on other devices.
Select a camera to film with. You can record with the front or back camera of your device.
Returns the camera currently being used to record. Will return front
or back
.
This storage option is useful for saving simple info on the device, especially helpful for remembering user's setting from a previous session.
To save data locally to your phone, simply name a key
to store a value
under. If you have a previous value
in your key
, saving it will override that value
You should now use instead of adding a Local Storage component. This will work the same way in the background but will save you a lot of blocks. To work with tabular data in your app please use the component in your app.
Input
Data Type
Function
seconds
Integer
Specify a number of seconds to record for
Output
Data Type
Function
video file
web: Ogg
Android: MP4
iOS: MOV
Returns the recorded video
error
text
If there is an error, returns an error message
Output
Data Type
Function
video file
web: Ogg
Android: MP4
iOS: MOV
Returns the recorded video
error
text
If there is an error, returns an error message
You should now use cloud variables instead of adding a Realtime DB component. This will work the same way in the background but will save you a lot of blocks.
We highly recommend you use your own Firebase account with your app. With the increased focus on user privacy, we strongly advise that you use own Firebase account both to ensure the privacy of your user data and to give you visibility into the database itself. We provide our database for your convenience but we may also clean out our shared account periodically
This storage option is useful for anything from saving game high scores to tracking work credit, powered by Firebase.
Thunkable provides a default Firebase account for testing purposes. When your app is ready to be distributed, we strongly advise connecting your app to your personal Firebase instance.
Firebase Realtime Database also pairs well with Sign in and you can use a single Firebase project for both services.
If you are using Sign In powered by Firebase in your app, you do not need to edit the default database rules which permit reading and writing to the database for authorized users.
Otherwise, you will need to set your Read and Write rules to true
To connect your Firebase project with Thunkable, you'll have to add an API key
and Database URL
to the Firebase Settings in the App Settings, which you can find by clicking on your app icon
One way to retrieve the API key
and Database URL
from Firebase is to click on the Add Firebase to your web app option
Once your project is connected to your Thunkable app, we recommend that you do a simple test and save a value into your database. It should appear in your data tab in your Firebase console.
You might want to split your database into smaller spaces, also known as project buckets. To do this, you would need to save your value as an object and use the create object block to create your project bucket. More details in this post.
Cloudinary Media DB is a service that allows you to store media files in the cloud. Thunkable's Media DB component allows you to send media directly from your Thunkable app to a linked Cloudinary account.
If you use Thunkable's default Cloudinary DB, your files will be deleted after 90 days. Please connect your own Cloudinary DB to your Thunkable project to keep your media safe.
No set up is required but creating your free Cloudinary account is highly recommended. Thunkable provides its own subscription key for your convenience but we strongly recommend creating your own account to ensure privacy for your uploaded media. We also have a current media size limit of 10MB per app and we may periodically clean out our default Cloudinary account
To connect your Cloudinary cloud to Thunkable, simply retrieve the following fields from the Cloudinary dashboard: Cloud name
, API key
, and API secret.
You can add these details to your app in the properties panel of the Media DB component.
Airtable is a service that looks like a spreadsheet but actually acts like a database so it can do database-like things like store attachments i.e. images in your spreadsheets (and not just text) and link records between spreadsheets.
We like Airtable because set-up is relatively a breeze for a spreadsheet
There are four properties that you need to retrieve from Airtable to connect it with Thunkable: API key
, Base ID
, Table Name
and View Name
To retrieve the API key, you'll have to navigate to the Account page and generate an API Key
The Table Name and View Name can be retrieved by grabbing the fields from your spreadsheet as shown below. Your default Table Name should be "Table 1". Your default View Name should be "Grid View".
You can upload any media file from your phone to your Cloudinary account with the mediaDB component. In this case we do some additional checking with the block to make sure that the user has attached an image and that neither the photo library nor the mediaDB components encounter an error.
To retrieve the Base ID, navigate to the page and select your spreadsheet. You will see the Base ID in the 'Introduction' section of this page.
Event
Description
Save (key
, value
)
Asks Firebase to save a given value
under the given key
Event
Description
Get (key
,value
)
Asks Firebase to get thevalue
stored under the givenkey
Event
Description
Add Listener (key
)
Asks Firebase to listen to a specifickey
for changes in the database. Required for Data Changed block.
Data Changed (key
,value
)
Asks Firebase for updates tovalue
for specifiedkey
. Requires an Add Listener block.
Remove Listener (key
)
Ask Firebase to stop listening to a specifickey
for changes in the database
Event | Description |
Upload ( | Uploads the image to the Cloudinary cloud. Returns a Else returns |
Event | Description |
Get Cell ( | Returns the |
Get Column ( | Returns a |
Get Row ( | Returns a row |
Get All Rows | Returns |
Get Selected Rows ( | Returns |
Event | Description |
Create Row ( | Uploads a new row of data based on a |
Set Cell ( | Updates the |
Update Row ( | Updates a row based on a |
Update Row Num ( | Updates a row based on a |
Replace Row Num ( | Replaces a row based on a |
Replace Row ( | Replaces a row based on a |
Event | Description |
Delete Row Num ( | Deletes a row based on |
Delete Row ( | Deletes a row based on a |
The File Picker will open your end user's file library and allow them to select a file. The file can then be used in the app.
You can allow your end user to upload any kind of file, or limit their selection by file type, eg. HTML, PDF, etc.
Your end users may experience lags or delays if the size of the file the try to upload is larger than 5MB
Input | Description | Data Type |
---|---|---|
Output | Description | Data Type |
---|---|---|
type
Select the type of file you want your end user to upload
Select from list [any type of, image, video, html, pdf]
file
Points to the file that has been uploaded
Data type of the file that has been uploaded. Can also return address of the file as text
name
Name of the uploaded file
Text
mime type
Describes the type of file in MIME format
Text
size
Returns size of uploaded file in bytes
Number
was cancelled
Indicates whether the end user cancelled selecting a file
True/False
error
If there is an error, returns the error. Else returns null
Text
Great data is an essential part of many apps built today and the Web API component enables apps to retrieve data from any public or private API (application programming interface) service on the web. For more advanced developers who have write access to a private API, this component also enables you to upload and delete data.
To see what public APIs are available, we recommend this list from Todd Motto
For most public APIs, you'll likely have to first create an account to get your own unique API key. This is usually to prevent individuals from making too many requests or to charge developers when they exceed certain free limits.
Once you have the API key, you'll need to enter the unique URL into the property field of the Web API component
Query parameters and headers can be set in the designer or in the blocks editor. In the example below you can add any property:value pair you want. You can add as many params to your app as you need, but each parameter has to be added one at a time.
In the blocks editor, it is possible to use the create object
block to add multiple property:value pairs simultaneously.
You can learn more about creating objects in the Objects blocks.
To retrieve data from an API, you simply need to use the Get
block.
Most APIs will return data in JSON format, so we'll take a few moments to walk through a few examples of how to parse this data using our Object blocks
You can find a working example of this in the sample app, Office Weather & Traffic.
One of the most common output formats for APIs is JSON, short for Javascript Object Notation. The Open Weather Map API returns a JSON file like the one below.
In your JSON response, objects can be found within the "
quotes "
followed by a colon :
. The properties of the object is follows the colon :
but is within the {
curly brackets}
.
In the example above, "base"
, "dt"
, "id"
, "name"
and "cod"
are simple properties of the JSON response. "coord"
, "main"
, "wind"
, "clouds"
and "sys"
are properties of the overall response, but each of these properties is also an object with properties of its own, or nested properties, contained within the {
curly brackets }
. "weather"
is a one-item list which also contains an object.
The first step in parsing this response is converting the JSON response to an Object. Objects have properties (like name
) that we can retrieve and display in our app. Objects can be embedded within another object.
Once you have converted the JSON into objects, you can then specify the objects
and property
that you are interested in. To get the name of the city we are viewing weather data for ("name":
in line 22), we'll want to get the property name
of the response:
If we wanted to get the temperature in Dhaka from the Open Weather API above, we would need to do the following:
Convert the JSON response to an object
Get the property main
of the response object
Get the property temp
of main
We can write this as getting the property main.temp
of the response object:
You can read about getting nested values from Objects here.
You can read about getting nested values and values from lists in Objects here. Let's work through an example.
You can find a working example of this in the sample app, Ride.
The JSON output of the Google Maps Distance Matrix API seems similar to the Open Weather Map API with one notable exception: it includes multi-item lists. Lists are items bounded by [
square brackets ]
.
If you want to retrieve the "text"
property in line 13, you'll have to:
convert the JSON to an object
select the "rows"
property of the object
select the first item in the list
select the "elements"
property of the rows object
select the first item in the list
select the "duration"
property of the elements object
select the "text"
property of the duration object
You can see the example below for how this would look using the Object and List blocks
This can also be written as the property rows[1].elements[1].duration.text
of the response:
Uploading and deleting data is usually reserved for a private API that you or your organization owns
You can also post and receive messages between a web page and a Web Viewer using the Post Message function. Read more about that here.
Property
Description
Required?
URL
The url for the web request which usually contains an API key
Required
Query Parameter
Specifies some parameters of the data
Optional
Body
Body of your API call
Optional
Headers
Specifies some meta-data, eg: usernames and passwords
Optional
Event
Description
Get (response
, status
,error
)
Performs an HTTP GET request using the Url property and retrieves the response
. Reports status
of request and if request does not go through, will report an error
Event
Description
Put (response
, status
,error
)
Performs an HTTP PUT request using the Url property and retrieves the response
. Reports status
of request and if request does not go through, will report an error
Post (response
, status
,error
)
Performs an HTTP POST request using the Url property and retrieves the response
. Reports status
of request and if request does not go through, will report an error
Patch (response, status, error
)
Performs an HTTP PATCH request using the Url property and retrieves the response
. Reports status
of request and if request does not go through, will report an error
Event
Description
Delete (response
, status
,error
)
Performs an HTTP DELETE request using the Url property and retrieves the response
. Reports status
of request and if request does not go through, will report an error
The Location Sensor returns a user's current location in latitude
and longitude
as well as a location
object which includes additional properties like accuracy
, altitude
, speed
and heading
(or direction) which you have to retrieve with the object blocks above
For iOS, you have the option to choose between Apple Maps or Google Maps. On Android, only Google Maps is available. Google Maps provides more custom style options from different map types to coloring and exposing or hiding map features.
You can live-test your app without adding your unique Google Maps API keys, but you need to add them if you want to download or publish your app.
To generate your personal Google Maps API key, you need to:
Create a Google Cloud project for your app.
Create a billing account or enable billing for the project.
Click Enable to enable the Maps SDK for Android or Maps SDK for iOS.
Copy the provided API key.
Note: If you close this pop pup message without copying your API key
Navigate to APIs & Services.
Select Credentials from the left side menu.
Click SHOW KEY.
For more detailed instructions, please see here: Google Maps Platform: Set up your Google Cloud project.
Once you've generated your Google Maps API keys, you can add them to your Thunkable project. Click the gear icon at the top of the components tree on your project's designer tab to access your Project Settings. Scroll to the Google Map Settings section and paste your Android and iOS API keys into the corresponding fields.
There are a number of Advanced
properties available to help you add custom styling to your map. Below are the most popular.
For more information on sizing in your app, please see our introduction here
For more information on adding spacing in your app, please see our introduction here
To find the spacing properties, you'll have to select the Advanced
tab
The map has several events. You can trigger actions to happen when these events occur.
This event happens when the Map has loaded in your app.
This is a good time to add any markers, polylines or polygons to your app that you want the user to see as soon as your app opens.
This event happens when the location of the user changes. It returns the coordinate object. You can use object blocks to get the properties of the coordinate object.
The coordinate object has the following properties:
{ target: Numeric ID for your app coordinate:{ latitude: latitude of point selected longitude: longitude of point selected } position:{ x: x-position of selected point on the Map component y: x-position of selected point on the Map component } }
This event happens when the user taps on the Map.
This event happens when the user presses on the map for a longer period of time.
This event happens when the user clicks on a Marker that is on the Map.
The On Marker Press block returns an event object. This is an object which can be used with object blocks.
The event object has the following properties:
{ latitude: latitude of the selected Marker longitude: longitude of the selected Marker }
Adds a generic map marker to your map at the specified latitude/longitude.
This block takes the following inputs:
Adds a marker of a selected image to your map at the specified latitude/longitude
This block takes the following inputs:
Add a polyline to your map. This is an outline that connects several points on your map.
This block takes the following inputs:
These blocks:
Will produce this polyline:
Note that polylines won't automatically create a closed shape. You would need to add a forth object with the properties latitude: 37
and longitude: -122
to the coordinate
input of the addPolyline
block above to close this triangular polyline.
Add a polygon to your map. This is a solid shape that connects several points on your map.
This block takes the following inputs:
These blocks:
Will produce this polygon:
Note that the polygon outline will automatically connect the first and last points in the list of coordinates.
You can use the deleteAllMarkers block to delete all markers from your app.
You can use the deleteAllPolylines block to delete all polylines from your app.
You can use the deleteAllPolygons block to delete all polygons from your app.
Set and get properties of the Map component.
Returns the height of the Map on the device screen in pixels.
Returns the width of the Map on the device screen in pixels.
You can pair the Map component with a Location Sensor. This helps you show content relevant to the user's location.
These blocks will set the map's latitude and longitude to show the user's location once the map is ready:
In-App Purchases is available to Thunkers on PRO, Business and Enterprise plans.
The IAP component works on the Android platform and iOS platform.
Currently, there is no support for IAP on web apps
The IAP component doesn’t work on the Thunkable live apps (Android/iOS)
Before you set up your IAP blocks in Thunkable, you need to establish a set of product IDs. Each product ID is associated with the item being paid for.
If you are developing for both Android & iOS, we suggest you use the same product ID for similar items in both stores.
Product IDs need to start with a number or lower case letter, and be 148 characters or less. They can contain any of the following characters: numbers (0-9), lowercase letters (a-z), underscores (_), and periods (.)
Select your product type:
In-App Product - a one-time purchase
Subscription - recurring purchases
Before you can create your In-App Purchases, you are required by Apple to request and fill out their Paid Applications contract.
To do so, log into your App Store Connect account, and go to the Agreements, Tax, and Banking section. In this section, you will see the ability to request the Paid Applications contract towards the top of the page.
After this is complete, you will now be able to add your In-App Purchases.
Consumable - a one-off purchase which can be repeated and keeps no history
Non-Consumable - a product that can only be purchased once and keeps history in your apple account. If you try and buy a second time, it reports you have already purchased and offers a free download
Auto-Renewable Subscription
Non-Renewing Subscription
To add IAP to your project, navigate to Add Components and enter “IAP” into the search bar. Drag the In-App Purchase component to the Invisible Components section above.
Next, you will need to add the product IDs on the Properties panel on the right. These strings must match what you have in the App Store or Play Store. Make sure you double-check that you add Items as Items, and Subscriptions as Subscriptions.
If you need to pull the product/subscription info from the Play Store or App Store, you can use the following block. For the fields in the return object, you can reference them here.
You can use the following blocks to start the one-time purchase or subscription. For the fields in the return object, you can reference them here.
You can use the following block to get the purchase history and you can verify the purchase from the return list. This block is helpful when you need to restore an existing purchase either on a new device or a new app installation. For the fields in the return object, you can reference them here.
The "Get Most Recent Active Purchase" block may crash your iOS app.
To test the IAP component, you have to publish it to the Google Play Store or App Store. You will not be able to test IAP with the Thunkable Live App or through Web Preview.
Be mindful to leave extra time for testing in your app development cycle to allow time for each respective store to review your apps. Depending on your stage of app development, a review could take anywhere from an hour to 4 days.
On iOS you need to submit to the App Store via Testflight to test the features.
Testflight sets up a sandbox environment automatically. When you send your update to the app store, you are able to test without having it go to the live version.
On Android publish to the Play Store via internal beta testing. You can read more about internal beta testing in the Play Store here.
You have to upload the APK or AAB file to the Play Store console before you can add any In-App Purchases.
There are two ways you can test how a pre-release app functions on the Google Play store: You can publish an app to the alpha or beta distribution channels. This makes the app available on the Google Play store, but only to the testers you put on a "whitelist."
In a few cases, you can test Google Play functionality with an unpublished app. For example, you can test an unpublished app's in-app billing support by using static responses, special reserved product IDs that always return a specific result (like "purchased" or "refunded").
AdMob is the most popular ad network for monetizing mobile apps today. Apps with large audiences can use AdMob to not only generate revenue for the creator but in some cases (like with AdMob Rewarded Video), create better user experiences than the alternative (e.g. in-app purchases to play a new game level).
We highly recommend that you only add ads to your app after you have a large audience of users (otherwise, you won't generate much revenue anyway).
Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.
Default value: "This identifier will be used to deliver personalized ads to you."
Thunkable has partnered with AdMob to ensure that apps created on our cross-platform use ads to monetize apps in a way that both provides high quality traffic to advertisers and a high quality user experience for end users of apps.
Inappropriate content that advertisers do not want to be associated with e.g. copyrighted, adult
Invalid activity that lowers the quality of traffic to advertisers e.g. ad placements that encourage clicks
Thunkable will review apps for compliance with AdMob policies but will specifically reject apps that are:
Incomplete apps - apps that are still in their early stages and won't show how ads will be used in the app
Earning apps - apps that encourage users to clicks ads in exchange for some form of payment
Auto-impression apps - apps that repeatedly load banner ads in the background of apps
Once approved, apps can be downloaded and published without further review.
Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.
AdMob banner ads are the simplest ad format to implement and are recommended for beginners.
That's it. There's no blocks needed.
The first banner ad will load when ready and will reload a new ad every minute.
Interstitial ads are recommended after a user has completed a task in your app. We don't recommend showing an interstitial ad right after the app opens and the user has not spent any time in your app.
To show an interstitial app, you need to first add the component and then add the Show Ad
block after the appropriate event in your app.
You can set the following as properties of your Interstitial ad:
The Name of the AdMob component
The Ad Unit ID (Android)
The Ad Unit ID (iOS)
Whether Test Mode is enabled for this ad component
Use the when Ad Open and when Ad Close blocks to trigger events to happen when the interstitial ad opens or closes.
Use the Show Ad block to show an interstitial ad in your app. If there is an error, the error block will catch and return it.
Use these blocks to set and get the Android Ad Unit ID of your interstitial ad.
Use these blocks to set and get the iOS Ad Unit ID of your interstitial ad.
Use these blocks to set and get the Test Mode status of your interstitial ad.
Rewarded video ads are recommended after a user has completed a heavy task in your app and would be willing to watch a long video to continue.
To show a rewarded video app, you need to first add the component and then add the Show Ad
block after the appropriate event in your app. You'll then want to add a Reward User
event to reward your user in the app.
You can set the following as properties of your Rewarded Video ad:
The Name of the AdMob component
The Ad Unit ID (Android)
The Ad Unit ID (iOS)
Whether Test Mode is enabled for this ad component
Use the when Ad Close block to trigger events to happen when the interstitial ad closes.
Use the Show Ad block to show the ad video, and the Reward User block to reward the user after displaying the video.
Use these blocks to set and get the Android Ad Unit ID of your Rewarded Video Ad.
Use these blocks to set and get the iOS Ad Unit ID of your Rewarded Video Ad.
Use these blocks to set and get the Test Mode status of your Rewarded Video Ad.
For your convenience, we have provided a test Ad Unit ID
for you to see how a particular ad format may appear in your app.
During live test, all AdMob ads will be set to test mode = true
, which means clicks and impressions will not be counted. This is true even if you add your own Ad Unit ID
and set test mode = false
.
Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.
Ad Unit ID
Below is a visual walkthrough of the steps after you have created your AdMob account:
Ad Unit ID
The Ad Unit ID should begin with ca-app-pub-xxx
test mode = false
To protect the integrity of your account, we have by default set test mode = true
.
When you are ready activate your ads when you download or publish, you'll simply need to set test mode = false
.
With iOS 14.5, your app users will be asked if they consent to an advertising identifier being used to show them personalized ads. This is what the dialog looks like:
If this permission is declined, your app will still show ads. These will be more generic ads and won't be targeted at the user.
If the user has turned off the Allow Apps to Request to Track
property in their device settings, this permission will be declined by default and they will not see this dialog.
If you are not seeing ads appear in your app, it may be due to the following reasons:
Your AdMob account has been disabled due to a policy violation. Please sign in to your AdMob account
Your AdMob component property test mode = true
. To activate, you'll need to flip the switch to test mode = false
Your Ad Unit ID
has not yet been activated. This may take up to a few hours
You have entered the App ID or the Publisher ID instead of the Ad Unit ID which begins with ca-app-pub-xxx
Please check the mobile device internet connectivity or disable ad blockers on the mobile device
Your setup is correct. The issue is that AdMob does not always have an ad to return for every request. This may happen particularly if you have just registered your AdMob publisher ID, as it takes some time and multiple requests before the new ID starts returning ads
Select Enable all Google Maps APIs for this project.
Input | Description | Data Type |
---|---|---|
Input | Description | Data Type |
---|---|---|
AdMob is a component. While all Thunkers can add AdMob to their app projects and live test the ads in their apps, only PRO Thunkers can download and publish apps with AdMob.
All apps must be approved by Thunkable subject to our . If you are a PRO Thunker, you can . Once approved, apps can be downloaded and published without further review.
You need an to show ads in your project.
Once you have an AdMob account, you will need to paste the following into the :
(if publishing to App Store)
(if publishing to Play Store)
(if publishing to App Store)
All apps with AdMob must be first approved by Thunkable before they can be downloaded or published. AdMob has its that an app must comply with including but not limited to:
Only members can download and publish apps with AdMob
All apps with AdMob must be approved by the team at Thunkable (). Once approved, apps can be downloaded and published without further review.
To set your ads live, you'll need to first. Once you have created your account, you'll need to set up an app and create an Ad Unit ID
. (It may take up to an hour for Ad Unit ID
to be activated and start showing ads)
You can set a personalized Tracking Usage Description in your .
Event / Property
Description
Get Current Location
Returns a user's location in latitude
and longitude
degrees; also includes additional information in a location object including i) estimated location accuracy
in meters, ii) altitude
in meters, iii) speed
in meters/second and iv) heading
in degrees
Property
Description
Data Type
Latitude
Co-ordinate of the map's center on the north-south axis
Number
Longitude
Co-ordinate of the map's center on the east-west axis
Number
Zoom
Zoom level between -15 (most zoomed out) and 15 (most zoomed in)
Number
Property
Description
Data Type
Height
Height of Map in pixels
Number
Width
Width of Map in pixels
Number
Visible
Set whether the Map is visible
True/False
Property
Description
Data Type
Border Width
Width of border around Map in pixels
Number
Border Radius
Radius of corners of border on Mapr in degrees
Number
Border Color
Color of border (only visible if border width > 0)
Color
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
Select from menu
Property
Description
Map Type Advanced
Default (standard
); standard
is the classic map style; satellite
displays only satellite imagery; hybrid
shows roads and features layered over satellite imagery; terrain
shows physical terrain overlay on top of a classic map (Google Maps only)
Custom Map Style String (Google Maps Only) Advanced
Accepts a JSON string imported from the Google Maps API styling wizard. Map Type must be set to standard
and provider must be set to google
.
Shows Traffic Advanced
Default (false
); if true
, shows real-time traffic overlay on the map
Property
Description
Height
Default (Fill container
); Four options: 1) Fit contents
which auto-sizes to the content size or 2) Fill container
which auto-sizes to the container 3) Relative size
in percent of Screen, 4) Absolute size
in pixels
Width
Default (Fit container
); Four options: 1) Fit contents
which auto-sizes to the content size or 2) Fill container
which auto-sizes to the container 3) Relative size
in percent of Screen, 4) Absolute size
in pixels
Property
Description
Margin Advanced
Default (none
); Margin is the space outside of the border of a component; You can set space on the top
, bottom
, right
or left
of the component in both pixels or percent of Screen
Padding Advanced
Default (none
); Padding is the space between the contents and the border of a component; You can set space on the top
, bottom
, right
or left
of the component in both pixels or percent of Screen
Output name
Output value
Data Type
Latitude
Latitude of selected position
Number
Longitude
Longitude of selected position
Number
position X
X Co-ordinate of selected position on map component
Number
position Y
Y Co-ordinate of selected position on map component
Number
Output name
Output value
Data Type
Latitude
Latitude of selected position
Number
Longitude
Longitude of selected position
Number
position X
X Co-ordinate of selected position on map component
Number
position Y
Y Co-ordinate of selected position on map component
Number
Latitude
Latitude of marker's position
Number between -90 and 90
Longitude
Longitude of marker's position
Number between -90 and 90
Title
Title of marker (displayed when marker is clicked)
Text
Description
Description of marker (displayed when marker is clicked)
Text
Pin Color
Color of marker
Color
Latitude
Latitude of marker's position
Number between -90 and 90
Longitude
Longitude of marker's position
Number between -90 and 90
Title
Title of marker (displayed when marker is clicked)
Text
Description
Description of marker (displayed when marker is clicked)
Text
Icon
Image to use as marker
Dropdown menu (select asset)
Input
Description
Data Type
Coordinate
List of points to draw a line between. List can be any length.
Stroke Width
Width of polyline
Number
Stroke Color
Color of polyline
Color
Input
Description
Data Type
Coordinate
List of points to draw a line between. List can be any length.
Stroke Width
Width of outline
Number
Stroke Color
Color of outline (Only visible if Stroke Width > 0)
Color
Fill Color
Color of polygon shape
Color
Banner ad | Interstitial ad | Rewarded video ad |
Description | Banner ads are rectangular image or text ads that occupy a spot within an app's layout. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start. | Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app. |
Recommended for | Single-screen apps | Multi-screen apps | Multi-level games |
Limit | 1 per screen | 1 per app | 1 per app |
There may be some instances where you want to start an event by shaking your mobile device or when the mobile device is shook. There is a Shaking
event that you can add to your blocks that has sensitivity levels of high
, medium
and low
When the accelerometer sensor detects a change in the force acting on the phone the Changes
event will be fired. Each time the event fires the four associated parameters will be updated.
You can get the values for xAcceleration, yAcceleration and zAcceleration at any time with the following blocks.
By default the accelerometer sensor will be turned on, but you can use the Enabled
property to read its current state and to change its state, i.e turn the sensor on and off.
You can use the Sensitivity blocks to set the sensitivity of the Accelerometer and get its current level of sensitivity.
The gyroscope is capable of measuring how quickly the phone is being turned. It measures the rate of rotation of the phone and returns values in radians per second about the x axis, the y axis and the z axis. This rate of rotation is also known as the Angular Velocity, so the gyroscope can tell us the speed of rotation of the phone. By extension, if the speed of rotation is any number greater than 0, we can infer that the phone is being turned.
Whenever the phone is turned, or rotated, the Changes
event will fire.
By default the gyroscope sensor is turned on, but the enabled
property can be used to read and write new values to the gyroscope, thus allowing you to turn it on or off.
When the magnetometer detects a change in the ambient magnetic field the Changes
event will fire. The event returns 4 parameters that we can work with.
Returns a value between 0 and 360 which denotes the user's direction relative to the Earth's geographic North Pole
The magnetometer is, by default, turned on, but the enabled
property can be used to turn in on and off by setting it to true
or false
respectively.
Full-screen video ads that users have the option of watching in full .
The accelerometer sensor is used to measure the force of acceleration acting on the phone. The sensor reports this force for each of the three principal axes, the x axis, y axis and, the z axis. The values obtained from the sensor are in metres per second squared, .
The magnetometer is used to measure magnetic flux density. This is the total magnetic field passing through a given area, per metre squared, . The sensor will returns values with units of microtesla for each of the three coordinate axes; x, y and, z. The magnetic flux density is quite similar to magnetic field strength.
Returns flux density, in the x direction, expressed in
Returns flux density, in the y direction, expressed in
Returns flux density, in the x direction, expressed in
Parameter
Type
Returns
xAcceleration
Number
Change in speed of the phone, along the x axis, in
yAcceleration
Number
Change in speed of the phone, along the y axis, in
zAcceleration
Number
Change in speed of the phone, along the z axis, in
error
String
Error message from sensor
Property
Type
Default
set Enabled
Bool
True
get Enabled
Bool
Property
Type
Default
set Sensitivity
one of [low, medium, high]
low
get Sensitivity
one of [low, medium, high]
Property
Type
Default
set Enabled
Bool
true
get Enabled
Bool
Property
Type
Description
Alpha
Number
Rotation about the y-axis
Beta
Number
Rotation about the x-axis
Gamma
Number
Rotation about the z-axis
Property
Type
Description
X
Number
Angular velocity about the X axis
Y
Number
Angular velocity about the Y axis
Z
Number
Angular velocity about the Z axis
Property | Type | Default |
| Bool | true |
| Bool | true |
Parameter | Type | Returns |
| Number |
| Number |
| Number |
| String | Error message from the Sensor |
You can set:
The Name of the Timer
The Interval of the Timer, in seconds or milliseconds
Whether or not the Timer should Count Up
Whether the Timer should Loop, ie. if the Timer should reset itself once it fires
Whether the Timer is Enabled (this can be changed with blocks)
Set something to happen when the Timer fires.
Starts the Timer.
Stops the Timer.
If Count Up
is false
, returns remaining time from the Timer's interval in seconds.
If Count Up
is true
, returns elapsed time from the Timer's interval in seconds.
If Count Up
is false
, returns remaining time from the Timer's interval in milliseconds.
If Count Up
is true
, returns elapsed time from the Timer's interval in milliseconds.
Set interval of Timer in milliseconds.
Returns interval of Timer in milliseconds.
Set whether Count Up is enabled for this Timer.
Returns true
or false
value for whether Count Up is enabled for this Timer.
If Loops = true
, the timer will reset itself after it fires. If your interval is 10 seconds, the Timer will fire every 10 seconds.
If Loops = false
, the timer will finish its current interval if it is in the middle of one, and will no longer fire. If your interval is 10s, the timer will finish its current 10 second interval, fire, and then stop.
Returns true
or false
value for whether Loops is enabled for this Timer.
Set whether the Timer is enabled.
Returns true
or false
value for whether this Timer is enabled.
Read some text aloud in your app.
Default Language
: Set component to recognize text and speak in this language. Can be changed in blocks.
Read text aloud in the specified language
Stop Speaking. Can be used with a Button to create a stop button.
Set default language to item from drop-down menu. Can also use Text block or variable to set language.
Returns current language of Text to Speech component.
The sound component plays a designated sound.
There are a few ways you can set a sound source in your app:
Upload a sound to your app. Be careful of the Thunkable 50 MB app size limit
Provide a link to the sound. The link has to end in .mp3
, .wav
, etc
You can set a volume for the Sound component between 0 and 100.
This block will be triggered when the source of a Sound component is loaded. It is recommended to use this block if changing a Sound component's source during app runtime.
If a given audio is already the source of a Sound component, and you use a block to set the same audio as the source of the Sound component, this block will not be triggered. We recommend using an if statement to say that if the audio is already the source of the Sound component, execute the action you would take when the source is loaded.
In the following screenshot, we want this audio to play when the Button is pressed. If this audio is already the source for the Sound component, we play the sound. If not, we set the audio to be the Sound's source. Once the source is loaded, we play the audio.
This block will be triggered if there is an error with the Sound component.
Play, Pause, Resume or Stop a sound.
A sound can only be resumed if it has been paused.
Set the Sound's source using the drop-down menu or by using a Text block to specify a filename or URL.
Get the name of the Sound source.
Set Sound volume to value between 0 and 100.
Get Sound volume.
Bluetooth Low Energy, or BLE, is used to wirelessly connect two devices to one another. The BLE component allows you to find and connect to BLE devices and to communicate directly with them.
BLE functionality can't be tested with the Thunkable Live app on iOS. To test the BLE functionality in your app on iOS, please download your app.
This function is used to scan for nearby BLE or Bluetooth enabled devices. Scanning happens for 10 seconds. Once scanning has successfully completed then a list of the available device ids and a list of available names will be returned. If the scanning function can not be completed then an error will be returned.
The Connect to Device Id
function allows your app to connect to a BLE enabled device based in the Id of that device.
When you know the name of the BLE device that you want to connect to you can use the Connect to Device Name
block to connect directly to it. Please note that device names are not unique and it is relatively easy to change the name of a BLE device.
If you have a BLE device that is capable of sending data to another device then you will need to use the Receive
function in your app in order to listen to, or receive, data coming from the BLE device.
You need to be connected to another Bluetooth device in order to use this block.
You can receive a String or a Byte Array.
Should you need to send data to a BLE device then you can use the Transmit
function to send that information.
You need to be connected to another Bluetooth device in order to use this block.
You can transmit a String or a Byte Array.
Translate text. Powered by Yandex.
Source Language: Language of text that is to be translated. Can be changed in blocks.
Target Language: Language to translate text to. Can be changed in blocks.
Yandex API Key: If you have your own Yandex API key, enter it here. Uses Thunkable's default
key by default.
Translates a given piece of text from Source Language to Target Language. Returns result.
Get source language.
Get target language.
Set Yandex API Key.
Get Yandex API Key.
Flux density, in the x direction, expressed in
Flux density, in the y direction, expressed in
Flux density, in the z direction, expressed in
Set source language using drop-down menu. Can also be set with blocks or . Any language code from can be used.
Set target language using drop-down menu. Can also be set with blocks or . Any language code from can be used.
Records for a set amount of time in seconds. Can type number of seconds into ghost block. Can also use blocks or to set this time.
Parameter
Type
Description
Device Ids
List
Returns a list of the IDs of the available devices
Device Names
List
Returns a list of the names of the available devices
error
String
Returns an error message from the function
Parameter
Type
Description
Device Id
String
Expects a text string with the device id you want to connect to
Device Name
String
Returns the name of the device you have just connected to
error
String
Returns an error message from the function
Parameter
Type
Description
Device Name
String
Expects a text block with the name of the device to connect to
Device Id
String
Returns the Id of the device that you have just connected to
error
String
Returns an error message from the function
Parameter
Type
Description
characteristic UUID
String
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
data
String
Returns a string containing the information received from the BLE device
error
String
Returns an error message from the function
Parameter
Type
Description
characteristic UUID
String
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
data
String
Expects a text block with the message that you want to send to your BLE device
error
String
Returns an error message from the function
Name | Data Type | Data |
audioFile | Sound | Sound from recording |
error | Text | if error, returns error; else, returns |
Name | Data Type | Data |
error | Text | if error, returns error; else, returns |
Name | Data Type | Data |
audioFile | Sound | Sound from recording |
error | Text | if error, returns error; else, returns |
Default Language
: Set component to recognize text and speak in this language. Can be changed in blocks.
Outputs
Outputs
Set default language to item from drop-down menu. Can also use Text block or variable to set language.
Get current language of Speech Recognizer component.
Opens your phone app with the given number ready to call. This block will not place a phone call without the app user's knowledge.
Opens your default text messaging app with the given text ready to be sent to the given number. This block will not send a text message without the app user's knowledge.
Opens your default email app with an email with the given subject and body ready to be sent to the given email address. This block will not send an email without the app user's knowledge.
You can send an email to multiple recipients by separating the different email addresses with a comma in the 'send email to' section of the block.
You can use HTML formatting to customize the emails you send with the Share component (iOS only)
Opens a menu of apps that the app user can choose from to share the given message.
Opens a menu of apps that the user can choose from to share the given image.
Name
Data Type
Data
error
text
if error, returns error; else, returns null
value
text
text of speech that was recognized
Name
Data Type
Data
error
text
if error, returns error; else, returns null
partial result
text
text of speech that was recognized
Create interactive gaming apps with the canvas component.
The canvas component is a touch-sensitive panel that enables the movement of items.
You can use this component to create a variety of games and experiences that involve different methods of touching a screen.
To add a canvas to your app, drag and drop the canvas component into the app builder.
When you click on the Canvas in your component tree, Canvas tab will appear. Click on this tab to customize your canvas
The three elements of a Canvas are the Stage, the Sprites, and the Canvas Label.
The Stage is the background of your Canvas. You can set a background color or background picture, a border color, and the stage's Height and Width. You can click and drag your Sprites on the stage in the Canvas tab.
You can set Gravity of the Stage along the X and Y axis. The Sprites on the stage can be toggled to ignore gravity or not. If a Sprite is affected by gravity, it will be pulled in the direction of the gravity.
Your Canvas Stage will automatically scale up in order to match the size of the device screen. If the aspect ratio of the Stage does not match the aspect ratio of the device, you can use Stage Scaling Mode to resize the background to fill the device screen.
Scale: The aspect ratio of the background will be maintained, and the background will be scaled up. May result in some of the background being cropped.
Stretch: The background image will be stretch in order to fill the screen. May result in the background image being distorted.
Select how you want your background image to be centered when it is scaled to match the device screen.
Can be set to center, center horizontally only, center vertically only, or none.
You can enable Touch Drawing on your Screen. You can set the Drawing Color to choose the color you draw in. You can set the Drawing Width to choose the thickness of the line you draw on the stage.
You can add multiple stages to a Canvas component, in the same way you can add multiple Screens to an app project. when you have selected your Canvas tab, click on the + next to your Stage name to add another Stage to the Canvas.
Each Stage has its own Sprites, background color, gravity, etc.
Create interactive gaming apps with sprites.
Looking for some images to use as sprites in your project? Check out our new Sprite Gallery!
Sprites are images that can be placed on the Stage in the Canvas. They can react to being touched or dragged across the screen, or colliding with other sprites or the edge of the screen.
A Sprite Type is a category of Sprites that you can add to your app. For example, in a video game you might have a Main Character Sprite Type and Obstacle Sprite Types.
A Sprite is a single instance of a Sprite Type. In the video game example, you could have a single Obstacle Sprite Type, but multiple Obstacle Sprites in your app. They would be multiple Sprites of the same Sprite Type.
To add a Sprite Type to your app, click on the Stage of your Canvas. This will automatically bring you to the Canvas tab. Underneath your component tree, where you would see a component menu in the Design tab, you will see your Sprite Type menu.
You can click on 'Add Sprite Type' to add a new Sprite Type to your app.
Just like the components menu in the Design tab, you can click and drag Sprites from their Sprite Type category into your app.
In the below GIF, there is a canvas with a Sprite, called Sprite1. There is also a Sprite Type in the Sprite Type menu called Sprite_Type1. When a Sprite is dragged from Sprite_Type1 and dropped onto the Canvas, we see a new Sprite, called Sprite_2.
Picture List: You can upload multiple images to a Sprite Type's Picture List. This allows you to change the appearance of the sprite when some event happens.
In the GIF below, we see that when one Sprite (the Thunkable Beaver) collides with another Sprite (the tree trunk), the appearance of the Tree Sprite changes.
Angle: Change the angle of the sprite. The angle is measured in a clockwise direction and is measured in degrees, eg. setting angle to 30 will rotate your sprite 30 degrees clockwise.
Opacity: Change the opacity of the Sprite.
Bounce: When a sprite hits a surface or another sprite, this is the percentage of the speed that sprite with bounce back with. A bounce of 100 means that the sprite will bounce back at the same speed it had in its collision. A bounce of 200 will cause the sprite to bounce off with twice its speed. This is demonstrated in the GIF above under Picture List, where the beaver has a bounce of 50, or half its initial speed.
Is Draggable: When true, the player can drag the sprite
Passes Through: When true, all sprites will pass under or above the sprite. When false, the sprites will collide using the physics engine. This is demonstrated in the GIF above under Picture List.
Is Static: When a sprite is static, it acts like a wall. No forces can move it.
Ignore Gravity: Toggle whether of not the sprite is affected by the Stage's gravity. You can read more about the Stage's gravity properties here.
FixedRotation: When fixed rotation is false, the sprite can rotate in any direction. When fixed rotation is true, the sprite will remain at its current angle.
Drawing: Toggle whether the sprite will draw a line when it is dragged around the Screen. You can set the Drawing Color and Drawing Width of the line that is drawn.
Angle, Opacity, Bounce, Is Draggable, Passes Through, Is Static, Ignore Gravity, Fixed Rotation, and Drawing are all Sprite Type properties as well as Sprite properties. These are described in the previous section.
Picture Selection: Select an image from the Picture List defined in the Sprite Type to display on the Sprite.
X, Y: Location of the top left pixel of the Sprite on the X-axis and Y-axis of the Stage. You can also click and drag the Sprite to your desired initial position.
Z: Where the Sprite is in the Depth of the Canvas. A Sprite with a higher Z-value will appear in front of a Sprite with a lower Z-value. This is demonstrated in the GIF above under the 'Picture List' section of Sprite Type Properties: the beaver has a higher Z-value than the tree, so it is in front when it passes the tree.
Groups of sprites that have the same behavior should belong to the same sprite type. In the example below, WallType is a Sprite Type, and there are multiple Sprites of this type in the app (ie. the walls).
Whenever the ball touches any of the WallType Sprites, the ball goes back to its starting location.
Push notifications are one of the biggest advantages of mobile apps over mobile websites since they can send messages to users without the app being open.
When a user first opens an app with push notifications enabled they receive an alert prompting them to enable push notifications. Once they accept they are a subscriber of your app's push notifications.
Thunkable utilizes the services of OneSignal to facilitate push notifications from your app. OneSignal is a free service that supports unlimited devices and notifications. You can learn more about their features here: OneSignal pricing page.
To send push notifications to your app's users, you must link your Thunkable app to your OneSignal apps (iOS and/or Android). Once you've added your OneSignal App IDs into Thunkable, the work in Thunkable is done, and the remainder of the management takes place in third-party platforms (OneSignal, Apple Developer, and Firebase, depending on the platform).
Push Notifications are available on Thunkable Pro, Business, and Team plans. While all Creators can add Push Notifications to their projects and live test them in their Android apps, only Creators on the previously mentioned plans can download and publish apps with Push Notifications. See our pricing page for more details.
Push notifications are one of the biggest advantages that mobile apps have over mobile websites, since they can send messages to users without the app being open.
However, annoying notifications---those that are irrelevant and too frequent---can be dismissed or blocked easily. We highly recommend sending notifications only when the content is relevant to the user. Examples of this include an e-commerce app notifying users of a sale, or a game notifying users of new levels and features.
Push Notifications cannot be tested with the Thunkable Live app on iOS You can test Push Notifications on iOS by publishing your app to TestFlight and downloading it from there.
To add Push Notifications to your app :
Drag and drop the component onto any screen.
That's it. There are no blocks needed.
Click Push Notification at the bottom of the screen
The Push Notification settings modal opens. This is where you will enter your OneSignal Android App ID and OneSignal iOS App ID to configure the connection between OneSignal and your Thunkable project.
OneSignal allows you to push messages to users in certain locations. You will need permission from your end users to register their location to use this feature. You can toggle whether you request geolocation permissions from your end users in the Push Notifications settings panel.
The remainder of this document will assist you with:
Go to OneSignal.
Click Sign Up.
Create your account and complete the OneSignal onboarding.
If you didn't create an app as part of the OneSignal onboarding, navigate to your OneSignal dashboard and click + New App/Website.
If you intend to send push notifications to your app's users on Android and iOS you will need to create a new app in OneSignal for each, Android and iOS.
Enter your app name. We recommend including the platform in your app name, for example, Employee Directory - Android or Employee Directory - iOS.
Select Apple iOS (APNs) or Google Android (FCM).
Click Next: Configure Your Platform.
Follow the platform-specific configuration instructions below:
A Google Service Account is a special type of account from Google that applications use to make authorized calls to a variety of APIs, including Firebase Cloud Messaging APIs. For more details, see Google's own documentation on Service Accounts. In order to send push notifications to Android devices, you will need a Service Account to generate a private key for OneSignal to utilize.
If you don't already have one, create a Firebase account. Instructions for getting started with Firebase are available here: Firebase Account Setup.
Follow OneSignal's instructions to generate Firebase Cloud Messaging API Credentials for sending Android App Notifications here: Android: Firebase Credentials.
To continue sending messages in 2024, you need to provide updated authentication credentials from Firebase for all apps created in OneSignal before September 1, 2023:
In your Firebase project, go to Project settings and the Service accounts tab to download your private key JSON.
In your OneSignal App Settings, upload the private key file you just downloaded
More information on these steps is available here: Android: Firebase Credentials.
Copy Your App ID.
In the Android App ID field, paste Your App ID that you copied from OneSignal in step 3.
Click the Live Test on Device icon and open the Thunkable Live app on your device.
Return to your OneSignal tab.
Click Check Subscribed Users.
If the configuration is successful, you will see a congratulations message.
Click Done.
To test Android push notifications, download the app to your Android device and send a test message through OneSignal to see the push notification in action.
OneSignal is a powerful choice of push provider. With their platform, you can setup for your users to be pushed notifications based on their locations. This is optional, however. This also means you need to make a conscious decision as to whether or not to track your Android users geographical locations. These tracking data can be accessed via the OneSignal dashboard. This feature can be toggled on and off in the Push Notifications settings by clicking on the icon at the bottom of your design screen.
If you enable Geolocation Permissions, when you publish your app, ensure that you indicate that you're tracking location when you publish your app.
When you get to the section titled "Provisioning Profiles," return to these instructions.
Follow OneSignal's instructions to generate a p8 certificate: iOS: p8 Token-Based Connection to APNs.
In your Apple Developer account, select Identifiers under the Certificates, IDs & Profiles heading.
Select your app from the list of Identifiers.
Scroll down the list of app capabilities, and place a checkmark next to Push Notifications.
Click Save.
Select your app from the list of Identifiers again.
Scroll down the list of app capabilities, until you get to Push Notifications again.
Click the associated Configure button.
Under Production SSL Certificate, click Create Certificate.
Under Upload a Certificate Signing Request, click Choose File.
Select the Certificate Signing Request (CSR) you downloaded from Thunkable as part of the publishing process.
Click Continue.
Click Download to download your iOS certificate.
Access your Apple Developer account’s Profiles.
Select your app from the list of Profiles.
Click Edit.
Click Save.
Click Download
In OneSignal, select Native iOS as your target SDK.
Click Save & Continue.
Copy Your App ID.
Return to the Blocks tab of your Thunkable project. Do not close the OneSignal tab.
Click on the icon at the bottom of your design screen to open the Push Notifications dialog and paste this ID into the iOS App ID field.
You require a new provisioning profile with push notifications enabled to publish to the App Store. See OneSignal's instructions here: Generate a Provisioning Profile.
To test iOS push notifications, you have to publish to TestFlight. This requires the provisioning profile with push notifications enabled.
Once you have your platforms configured in OneSignal you can create and sent push notifications to your app's users. Follow OneSignal's instructions here: Sending Messages.
The first time your app is opened on a new device, it is automatically assigned a unique push notification user ID. This block returns the user's push notification user ID that can be used to send a notification to a specific user with a web API call.
Display text on your Canvas.
To add a Canvas Label to your app, click on the Stage of your Canvas. This will automatically bring you to the Canvas tab. Underneath your component tree, where you would see a component menu in the Design tab, you will see your Sprite Type menu and a User Interface menu. You can find the Canvas Label in the Unser Interface menu.
You can drag and drop the Canvas Label onto your Stage.
Text: The Text being displayed on your Canvas Label X: The X-co-ordinate of the top-left pixel of the Canvas Label Y: The Y-co-ordinate of the top-left pixel of the Canvas Label Font Size: The size of the font of the Canvas Label Color: The Color of the text of the Canvas Label Background Color: The color of the background of the Canvas Label Stage Selection: Select a Stage to display the current Canvas Label on
To use Sign In, you will need to first create your own Firebase account and project
In the Firebase console, navigate to Authentication and the tab "Sign-In Method". Enable Email/Password as shown below.
There are two properties that you need to retrieve from Firebase to connect it with Thunkable which are both retrievable from the Firebase console: API key
and database URL
API key
and database URL
Click on the Sign In drawer of blocks to access the Sign In blocks.
The first step for users is to Sign Up with their email address and a password. They will be sent an email to verify the address that they provided.
Here is an example of using this block:
This block will sign a user in and return their user ID.
When the user's email and password have been stored locally, the following blocks can be used to sign the user in with these details automatically.
Signs the user out.
Send an email to the specified email address to reset their password
On the Firebase console, navigate to the Users tab under Authentication and you'll find a dashboard where you can reset a user's password, disable and delete their accounts.
Property | Description | Data Type |
---|---|---|
This is a gallery of Sprites that have been awarded to the winner (as voted by the Community) of our Game Design challenges. This is a part of our Weekend Design Challenge challenge calendar. You can find these Weekend Design Challenges in our .
The Canvas contains the Stage where your Sprites are displayed. Read more in the .
Sprites are the elements on your stage that represent characters, obstacles, and more. Read more in the
Use the Canvas Label to display text on your Canvas. Read more in the docs.
You can use blocks to change the appearance and behavior of your Stage and Sprites. Read more in the
The Canvas Label is a piece of text that can be placed onto your .
Android App ID
App ID for Android from OneSignal
Text
iOS App ID
App ID for iOS from OneSignal
Text
Geolocation Enable (Android Only)
Toggle whether your end user is asked for permission to share their location
True/False
Event | Description |
Sign up ( | Signs up a user for a new account. Returns an |
Name | Data Type | Data |
error | Text | If error, returns error; else, returns |
userId | Text | Returns unique ID for each account |
isEmailVerified | True/False | If email has been verified, returns |
Learn how to program the canvas and sprite components.
When you add a canvas to your project, you will get 7 additional categories of blocks. Each of these categories will allow you to programatically control what happens with your sprites and sprites types, on the canvas and the stage.
Program a sprite's image, size, and visibility
Show the selected sprite or hide the selected sprite on the canvas.
Returns true if the sprite is visible, and false if it is hidden
Set the Sprite's height or width.
Change the sprite's height or width.
Get the sprite's height or width.
Flip Sprite along a specified axis.
Add freeze frame of sprite in current position.
Draw line between two points with specified width and color.
Draw circle outline at specified point with a given radius.
Draw filled circle at specified point with a given radius.
Draw a polygon outline at a specified point. The number of sides, length of sides, and angle of rotation (measured in degrees) can be specified.
Draw a filled polygon at a specified point. The number of sides, length of sides, and angle of rotation (measured in degrees) can be specified.
Clear all the drawings on the specified canvas.
Get an image of the specified canvas. Returns a base 64 encoded image.
Program a sprite's speed and location
Set the X or Y value for the sprite's speed to a particular value.
Change the X or Y value for the sprite's speed by a specific amount.
Get the X or Y value for the sprite's speed.
Set or change the sprite's velocity, by a given amount, in the pointing or moving direction.
Move the sprite to the x and y location specified in the block
Set the sprite's X, Y, Z or Angle value to a specific position.
Change the sprites X, Y, Z or Angle value by a given amount.
Note: Sprite angle is measured in degrees, so should be a value between 0 and 360.
Get the sprite's current X, Y, Z or Angle value.
Note: Sprite angle is measured in degrees, so should be a value between 0 and 360
Get the X, Y, or Angle of the where the user tapped on the canvas
On the canvas, it's possible to make a sprite either draggable or to have it fixed in position.
Similarly, it's possible for other sprites to pass through a sprite, or it can be made impassable.
Finally, if a sprite is moving, it's possible to programatically cause it to stop moving.
Set the draggability or passability of the sprit
Get draggability of the sprite
Stop all sprites that are moving.
When the user clicks on the canvas these blocks will move the Sprite1
to the location that was touched.
Events Blocks: Blocks that program the canvas to respond
Program an action after the canvas loads.
Program an action when the user touches the canvas
Please note, that for the sprite events, event handlers can be configured to work with an entire type of sprite or just with one specific sprite.
This event triggers when the sprite is clicked.
This event triggers when the two sprites collide.
This event triggers when the sprite collides with the edge.
This event triggers when the user stops dragging the sprite.
Set the sprite's image to the next or previous image in the sprite type's .
Set the sprite's image to an image in the sprite type's .
Program a sprite's direction
Turn the sprite in the direction of where the user has tapped on the canvas
Turn a sprite in the direction of another sprite
Set or change the angle of the sprite
Get the angle of the sprite
Set or change the angular velocity of the sprite
Get the angular velocity of the sprite
Select which Stage to display in the Canvas.
Sets the background color of the specified Stage.
Returns the hexadecimal value of the background color for the specified Stage.
Sets the color of the Frame for the specified Stage.
Returns the hexadecimal value of the Frame Color for the specified Stage.
Set the background image of the stage to the specified item in the list.
Please refer to the Canvas docs to see some animated examples of the gravity properties.
Sets the Stage gravity in the vertical direction.
Returns the value of the Stage gravity, in the vertical direction.
Sets the Stage gravity in the horizontal direction.
Returns the value of the Stage Gravity, in the horizontal direction.
Enable drawing on the stage if set to true
.
Disable drawing on the stage if set to false
.
Return true or false, depending on whether or not drawing is enabled on the Stage.
Set the Drawing Color, or Line Color, for the stage.
Returns the hexadecimal value of the Drawing Color for the specified Stage.
Set the Drawing Width, or Line Width, for the stage.
Returns the numeric value for line width on the Stage.
Get the distance between two sprites
Get the distance between a sprite and a point
Get angle between sprites
Gets the closest instance of the provided sprite type to the given sprite
Set the text being displayed in the Canvas Label.
Get the text of the Canvas Label.
Set the X Co-ordinate of the top-left pixel of the Canvas Label.
Get the X Co-ordinate of the top-left pixel of the Canvas Label.
Set the Y Co-ordinate of the top-left pixel of the Canvas Label.
Get the Y Co-ordinate of the top-left pixel of the Canvas Label.
Set the font size of the text of the Canvas Label.
Get the font size of the text of the Canvas Label.
Set the color of the text of the Canvas Label.
Get the color of the text of the Canvas Label.
Set the color of the background of the Canvas Label.
Get the color of the background of the Canvas Label.
Move the Canvas Label to the named Stage.
An app is simply a sequence of events.
The best apps define an elegant sequence of events that happen without the user even noticing. A great sign in flow for example can happen in seconds but the logic and sequence behind them is a work of art that has been iterated on many times (often using Thunkable's Live Testing app).
This is where Thunkable Blocks come in.
Thunkable Blocks are the building blocks of a great experience for your app users. Every component has its own set of blocks to start or trigger an event and set and change properties.
They can be connected to a commonly used set of blocks that range from opening screens, setting up logic, reformatting data or simplifying code.
You can manage much of your screen navigation through our Top Tab, Bottom Tab, Drawer and Stack navigator components but for simple screen navigation, you can use the very popular block below
this
, do that
In most apps, one event leads to another event if a condition is met. To specify these scenarios, the this
, do that
block is commonly used with Logic blocks that define the conditions that lead one event to the next.
The if this
, do that
block can be transformed to support more complex logic
A truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy. That is, all values are truthy except false, 0, "", null, undefined, and NaN.
Returns False:
Returns True:
The Test block can be used to return a value based on a given condition. If the condition is true, one value is returned. If the condition is false, a different value is returned.
Wait the specified amount of time before performing the next action.
Repeat a set of blocks for a specified amount of time
Repeat an action for an unlimited period of time
Repeat an action the specified number of times
Repeat an action for a certain amount of times, with the incrementer index i
Repeat an action over every item in a list
Repeats an action while a condition is true
Break out of an existing loop
You can prompt a user to open a page within an app installed on their phone or a URL in their browser using the block above.
Thanks to the development of universal links for iOS and Android app links, you simply need to enter the URL of the webpage for your app to automatically open to the app if it's installed or open the web browser if it is not.
If then
, do that
blocks are often paired with statement blocks that test whether a condition is met
The comparison blocks will compare two values and return true or false based on whether the condition is met.
You can compare multiple conditions at once.
The and block will return true if both statements are true, false otherwise.
The or block will return true if either statement is true, and false if neither statement is true.
Inverts the value of a true/false statement. Not true = false, not false = true.
Value blocks can be used to set the value of a variable. They can be used in conjunction with any of the above blocks.
The most basic but most often used text block is below. You can type into this text block, or leave it empty.
Often, you'll want to join text values together with the join
block:
You can use the newline
block to add a line break in a piece of text.
Use these blocks to change the content or formatting of your text. These blocks will return the reformatted text.
Set a piece of text to the selected case:
Trim blank spaces from the left side, the right side, or both sides of a string of text:
Find and replace all occurrences of a substring within a string.
The block below tests whether the text value is empty. Returns true
or false
Returns the character at the specified position, where 1 is the first letter of the string. Returns the empty string if the length of text given is less than the position specified.
Returns the substring at the specified start and end position, where 1 is the first letter of the string. Returns the empty string if the length of text given is less than the starting position specified.
Returns the starting position of a substring within a string, where 1 is the first letter of the string. Returns 0 if the string does not contain the substring.
Checks if a string contains a substring. Returns true
or false
.
Returns length of a given string
You can create a list of variable lengths with the blocks below
Creates an empty list
Allows you to specify what items in what order you want in your list
Creates a list of a given item repeated a specified number of times.
This block lets you create a list from text and even lets you set delimiters i.e. ","
You can also use this block to make text from a list with a given delimiter
If you are importing a list from a Spreadsheet or other data source, it may be helpful to sort it in your app. You can sort a list alphabetically or numerically, ascending or descending
The following blocks analyze a list in different ways
Returns the length of a list.
Checks if a list is empty. Returns true or false.
Returns the position of the first or last occurrence of an item, where the index of the first item is 1. Returns 0 if the item is not in the list.
Returns a sub-list of items between two positions in a longer list.
Checks if a given list contains a given item. Returns true or false.
Returns the result of the chosen operation on a list of numbers. Returns NaN if the operation cannot be performed on the given list of values.
Items in a list have an index number, the first item is 1, second is 2 and so on. Not only can you select
an item from a list by number from the front
but also from the back
, the first
, the last
and also a random
item. You can but remove
it after you have selected it
You can change an item in your list with the blocks below
This block will either insert an item at the specified location, or set the item at the specified location to the new value.
Removes the item at the specified position from a list
Get a copy of a list with the items shuffled in a random order.
There is a predefined set of colors in the blocks palette
As pictured below, the easiest way to set a specific color is using a text block with the syntax rgba(r,g,b,a)
If you want to select specific colors, use the RGB block below
Strangely, you can also create a color by blending two together
or you can choose one at random
A popular alternative to setting RGB color is to set Hue, Saturation and Value colors with the block below
You can use a Text block to include a hex value for your preferred color:
Use this block to specify a number you want to use in your app.
You can also round up or down a decimal figure into an integer using the round block
You can also round a number to a selected amount of decimal places
There is also a block for irrational numbers like π
Returns true or false based on whether the chosen condition applies to the number
If the given number is of a lower value than the lower bound, this block will set the given number to have the value of the lower bound.
If the given number is of a higher value than the upper bound, this block will set the given number to have the value of the upper bound.
Perhaps the most often used calculation in an app is addition
but this block also supports subtraction
, multiplication
, division
and exponential
figures
Returns the remainder when a number is divided by another number.
There are also a few more advanced calculation blocks that may be helpful including trigonometric.
These blocks will return a value assuming the input is given in degrees.
For games and other apps, it may be important to introduce randomness into your app.
Returns integer between two given integers. Is inclusive of the given integers.
Returns a random fraction where
The Lists blocks also have blocks for selecting random items from a list of values.
The Lists blocks have a block for getting certain mathematical values from a List, including sum min, max, averages, and standard deviation.
The Object blocks pair well with the Web API, Map and Location Sensor components which often send data in object format. The Spreadsheet component also requires data to be in object format for it to upload successfully as a row
You can use the following block to create a new object. Objects can be uploaded to your Firebase DB as the value of a cloud variable, or they can be uploaded to an Airtable DB as a row object.
You can click on the gear icon to add properties to your object:
Sometimes, you want to convert between JSON (JavaScript Object Notation) and Objects. If an API returns a JSON value, you can convert it to an Object to use with Object blocks. Use the get object from JSON
block:
Similarly, you may want to convert an Object to JSON to make an API POST, or set headers or query parameters for your API call. You can do this with the generate JSON from Object
block:
You can use the get property
block to read the value of an object's property.
If the object does not have a property with this name, it will return undefined
.
The Get Values Of block can be used to get nested values, ie. properties of properties of an object. If you are trying to get nested property b of property a of an object, you can simply get property a.b of an object, instead of using multiple get property of blocks.
You can also get a value from an Array (or list) of values. If an object property b is a 3-items list, and you want to get the second item of that list, you can get property b[2] of that object. The first item of the list is at index 1.
The blocks below demonstrate each of these methods, as well as a block that combines these methods by getting a value from an array that is a nested property of an object. The blocks are presented with the objects written in JSON format as well as created with Objects blocks, but both sets of blocks are doing exactly the same thing. In these blocks, Get nested property
will return 5, Get value from array
will return 6, and Get value from nested array
will return 7.
You can use the get Object properties of
block to return the names of the properties of an object.
This block returns a list of property names. This list can be used with list blocks.
With the set property
block, you can change the value of a single property of an object.
You can use Object blocks when making calls to an API.
Often, when retrieving data from an API like Weather Underground, you will get a large data dump in JSON format like shown below.
{ "response": { "version": "0.1", "termsofService": "http://www.wunderground.com/weather/api/d/terms.html", "features": { "conditions": 1 }}, "current_observation": { "image": { "url": "http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png", "title": "Weather Underground", "link": "http://www.wunderground.com" }, "display_location": { "full": "San Francisco, CA", "city": "San Francisco", "state": "CA", "state_name": "California", "country": "US", "country_iso3166": "US", "zip": "94101", "latitude": "37.77500916", "longitude": "-122.41825867", "elevation": "47.00000000" }, "observation_location": { "full": "SOMA - Near Van Ness, San Francisco, California", "city": "SOMA - Near Van Ness, San Francisco", "state": "California", "country": "US", "country_iso3166": "US", "latitude": "37.773285", "longitude": "-122.417725", "elevation": "49 ft" }, "estimated": {}, "station_id": "KCASANFR58", "observation_time": "Last Updated on June 27, 5:27 PM PDT", "observation_time_rfc822": "Wed, 27 Jun 2012 17:27:13 -0700", "observation_epoch": "1340843233", "local_time_rfc822": "Wed, 27 Jun 2012 17:27:14 -0700", "local_epoch": "1340843234", "local_tz_short": "PDT", "local_tz_long": "America/Los_Angeles", "local_tz_offset": "-0700", "weather": "Partly Cloudy", "temperature_string": "66.3 F (19.1 C)", "temp_f": 66.3, "temp_c": 19.1, "relative_humidity": "65%", "wind_string": "From the NNW at 22.0 MPH Gusting to 28.0 MPH", "wind_dir": "NNW", "wind_degrees": 346, "wind_mph": 22.0, "wind_gust_mph": "28.0", "wind_kph": 35.4, "wind_gust_kph": "45.1", "pressure_mb": "1013", "pressure_in": "29.93", "pressure_trend": "+", "dewpoint_string": "54 F (12 C)", "dewpoint_f": 54, "dewpoint_c": 12, "heat_index_string": "NA", "heat_index_f": "NA", "heat_index_c": "NA", "windchill_string": "NA", "windchill_f": "NA", "windchill_c": "NA", "feelslike_string": "66.3 F (19.1 C)", "feelslike_f": "66.3", "feelslike_c": "19.1", "visibility_mi": "10.0", "visibility_km": "16.1", "solarradiation": "", "UV": "5", "precip_1hr_string": "0.00 in ( 0 mm)", "precip_1hr_in": "0.00", "precip_1hr_metric": " 0", "precip_today_string": "0.00 in (0 mm)", "precip_today_in": "0.00", "precip_today_metric": "0", "icon": "partlycloudy", "icon_url": "http://icons-ak.wxug.com/i/c/k/partlycloudy.gif", "forecast_url": "http://www.wunderground.com/US/CA/San_Francisco.html", "history_url": "http://www.wunderground.com/history/airport/KCASANFR58/2012/6/27/DailyHistory.html", "ob_url": "http://www.wunderground.com/cgi-bin/findweather/getForecast?query=37.773285,-122.417725" } }
You may just want to pull out one attribute (like temp_f or the temperature in Farenheit). To do so, you'll need to use the object blocks below:
This block will vibrate the device.
At the moment, all the dates and times are in numerical format i.e. month = 1 rather than month = Jan. If you want to convert the numbers into names, we suggest you to add a Local Data Source and a simple table like the ones shown below.
Measures seconds since 00:00:00 UTC on 1 January 1970. This timestamp is also known as Unix time or Epoch time. You can read about its use in computer programming at the Unix time Wikipedia page.
There may be times you may want to design a different experience when a user is offline. To detect a user's connection, you can simply use the blocks below:
This block will return true
or false
.
Returns the height or width of the screen running the app in pixels.
Since Thunkable can build apps for Android, iOS and web, there may be times when you want to modify your user experience depending on their mobile operating system. To do so, you can use the block below:
This block will return true
or false
.
If you have a Text Input in your app, there may be situations when you want to dismiss the keyboard for the user. The block below will help with that:
Some devices will auto-sleep if there is no user activity in an app for a certain period of time.
The Keep Screen Awake block can be used to keep the screen awake even if the user is not actively interacting with the app.
This block can be set to true
or false
.
Having dark mode and light mode available is a popular choice for apps and device operating systems.
This block can be used to detect whether the user's device has a light or dark theme on their device.
You can then use blocks to change the color scheme of components in your app to match the user's preferences.
This block will return true
or false
.
In app creation, variables work like containers to hold numbers, phrases, the results of a calculation, a database call, or other important values in the app, in the mobile device itself or in the cloud.
Instead of repeating these values in multiple places, a variable can be used wherever it is needed in your Blocks code.
App
, stored
and cloud
variablesWhen you create a variable, you'll have the choice between an app, stored and cloud variable. All variable types work across screens and the only difference is where they are stored.
An app variable works across screens and is stored in the app itself. You can save any data type as an app variable.
A stored variable also works across screens but is saved to the mobile device itself. This means that a stored variable can be retrieved from a previous session. A stored variable is similar to saving a value to Local Storage and is especially useful for retrieving a user's previous setting. If you use stored variables, you no longer need to add Local Storage to your app.
You can save any data type as a stored variable.
A cloud variable also works across screens but is saved to the cloud powered by Firebase. By default, the cloud variable is saved to the Thunkable default Firebase database. We recommend saving them to your own private Firebase DB by connecting a private Firebase DB to your app.
Cloud variables can be used similar to saving and retrieving values to a Realtime DB powered by Firebase and can be used in a number of applications that share data across users in the cloud. If you use cloud variables, you no longer need to add a Realtime DB to your app.
You can only save a piece of text or an object as a cloud variable.
To save a list as a cloud variable, use the 'make text from list' block to convert the list to a piece of text.
When you retrieve this text from your cloud variable, you can convert it to a list with the 'make list from text' block to work with it as a list in your app.
To save media as a cloud variable, use the Cloudinary Media DB component to upload your audio to the cloud and get a URL that points to it. You can save this URL as a cloud variable.
To create a variable when the app starts, you can grab the block above, select your variable scope
(app, stored, cloud) and give the variable a name
like hello. You'll have to connect a block to give app variables an initial value (in the picture above). We recommend placing these blocks in the initial app screen.
You can also set a variable within a block event like the one above. Simply grab the set variable block and connect it to the value that you want it to be set to.
Once you have stored a value to your variable, you can retrieve it any time using a block like the one above.
Once you have created your variable, you can set it to update when the variable updates in your app.
With Cloud variables, this block will also be triggered when the value of the Cloud variable is changed in your Firebase DB. This block replaces the Add.Listener and DataChanged blocks in the Realtime DB.
Variables do not have to be fixed values and there may be times when you want to change your variable automatically like incrementing it by 1 after an event. To do so, grab a block like the one above.
The above blocks use hard coded variable names, where you must select a variable from a list of variables that you have initialized.
You can also create dynamically named variables. There are variables that you create and name during app runtime, which do not have an initialize block.
You can name these by typing in a name, or by using other variables to name the dynamically created variables.
You can create dynamically named app, stored or cloud variables.
One of the reasons you may want to create your own app is to keep the data that you often share with apps visible to only people you trust (and not a big company or hackers).
Since big companies and hackers often target large repositories of sensitive data, simply using an app that you build and keep secure may be one of the best defenses for keeping data in your own hands.
Here are a few tips on how to keep your data private even and especially from us:
For simple, personal pieces of data like user login info, you can use the Local Storage component to save data to the phone itself.
Data stored locally on the phone is often uploaded to the cloud by a phone's back-up provider.
Most data today is stored and shared from the cloud so the first step in keeping your data private is to create your own repository that can be linked to your app. This includes Realtime DB powered by Firebase, Media DB powered by Cloudinary, and Spreadsheet (required by default) powered by Air Table.
Creating your own repository takes a few more steps to set up but makes data you upload not visible to Thunkable (We provide a default account for convenience purposes).
Cloud database services like Firebase, Cloudinary and Air Table will often use another 3rd party like Google Cloud or Amazon Web Services to store your data but smaller repositories of data are less likely to be looked at.
You may want to limit access to your app on the initial screen by requiring a unique one-time password that all users must know to proceed further. You can use a Text Input component to create a simple version of this. One challenge of this approach is to communicate securely to your users what this password is.
If you don't want to require a password, you can use the Sign In component to manage users who have access to the app. Users must first create a password with their email address. You can add an additional level of security by requiring users to verify their email address, which sends them an email at their address before they can sign in to your app.
There is currently a bug with email verification. We hope to fix this soon.
Any type of sign in creates friction for the user and one way to avoid this is to ensure that your app only reaches the users you specify.
There are several approaches to sharing an app with a shared cloud database. Unfortunately all approaches do require a bit of friction that we are working to reduce.
The components in the ‘Any Component’ drawer are great tools to use instead of repeatedly using the same combination of blocks. They will also help you use fewer blocks in your app.
For example, to change the colour of any button on the screen to blue (the blocks on the left) we have to use 6 blocks. Using the ‘Any Component’ Blocks (on the right), we only need to use 2 blocks.
With the Generic Event block, you can set when an event will take place.
For example, in the picture below, any button you click on the screen will change the text of Label1 to be “Thunking Is Fun!”.
With the first dropdown menu, you can select what type of component you want to handle events for.
With the second dropdown menu, you can choose when an event will take place.
If you want to customize the button that you clicked on the screen, you can use this block.
With these blocks, anytime a button is clicked, the text of that button will be set to “I Love Thunkable!”.
With the Create Block, you can program your app to create visible components (things you can see--like button or images) while it is running.
When you use the create block, your app will automatically create something. For example:
This picture shows that when Screen1 Opens, your app will create a button and put it on Screen1.
With the first dropdown menu, you can select what type of visible component you want to create.
With the second dropdown menu, you can select where you want to position the component you are creating on the app’s screen.
Note: The options in the second and third drop down will vary depending on which component you select from the first dropdown. The following block creates a new button and places it as the first item on Screen1.
The table below explains the different block options:
Note: You can replace the third dropdown with any block that represents a visible component using the component block. It can also be a variable function parameter, or any block whose value is a component.
If you want to customize the component you just created, you can use this block.
These blocks say, when any button on the screen1 is clicked, create a new label. Next, set the new label’s text to “I was just created!”.
The clone block makes a copy of an existing component in your app. For example, if you have a button on your screen and want to create another button that looks exactly the same, you can use the clone block to do that.
You can use the clone block instead of repeatedly using the same combination of blocks. This will also help you use less blocks.
Note: You cannot clone screens and invisible components with the clone block.
With the first dropdown menu, you can select the component that you want to clone.
With the second dropdown menu, you can select where you want to position the cloned component relative to another component on the app’s screen.
Note: The options in the third drop down will vary depending on which component you select from the first dropdown.
If you want to customize a cloned component, you can use this block.
When Screen1 opens, these blocks will tell your app to clone Button2, and then set the clone’s text to be “I was just cloned!” (Try this out for yourself here).
The Generic Method Block can be used to call functions for components that were made with the clone or create blocks.
The blocks above say that when Button1 is clicked, create a Web Viewer component and call the reload function for it.
With the first dropdown menu, you can select the component you want to call a function for.
The second dropdown menu allows you to select which function you want to call.
Notes: The options in the second drop down will vary depending on which component you select from the first dropdown. Also, the component you plug-in needs to be of the same type as the one in the first dropdown.
The Generic Set Block allows you to change properties such as text and colour of any component that is on the app’s screen.
Using the Generic Set Block
There are two ways to change the text of a component using the Generic Set Block.
Use the dropdown menu to select the component whose text you want to set
2. You can use the Component Item Block with the Generic Set Block to change the text of the component that was clicked.
The Generic Get Block allows you to get properties (such as text and color) of any component that is on the app’s screen.
You can use the dropdown menu to select the component whose text you want to get.
There are two ways to get the text of a component using the Generic Get Block.
Use the dropdown menu to select the component you want to get the text for.
2) You can use the Component Block, as well as the Component Item Block, with the Generic Get Block to select the component you want to get the text of.
The ‘All Components in Container’ block groups together all the visible components in a container (ie. Row, Column or Screen) that are of the same type, in a list.
In the block above, all of the buttons that are on Screen1 are stored in list. This means that you can use list blocks to select items from this list, eg. the first item in 'all Button in Screen1'.
The ‘All Components in Container’ block can be used with the loop block from the control drawer.
The combination of blocks above goes through all the buttons on screen1 and sets the text of each button to “Thunkable!”.
The Remove Block allows you to delete a component from your app. You can delete a component that you dragged out from the designer, cloned, or made with the create block.
There are two ways to delete a component using the Remove Block.
Use the dropdown menu to select the component you want to remove from the app.
2. You can use the Component Item Block with the Remove Block to remove the component that was clicked. You can also use a variable, function parameter or any block whose value is a component.
The Component Block has a dropdown menu which lists all the components that are on the screen.
You can select one of the components from the menu and use it within any of the blocks that have an input for a component. Some examples include: the clone, create or generic event block.
With these blocks, when Screen1 is opened, the Component Block sets the text of Button3 to be “I Love Thunkable!”.
Click the button that says “Download Genymotion Personal Edition” and install the emulator that fits your system, either Mac, Microsoft Windows or Ubuntu.
IMPORTANT PLEASE READ:
There may be an error in installing for Macs. If so, go to System Preferences → Security & Privacy and you should see a message on the screen that says “System software from developer ‘Oracle America inc.’ was blocked from loading.
Did you finish downloading both Genymotion and VirtualBox? Now you're ready to download the emulator. After arriving at this screen, click "for personal use" and accept the terms and conditions. Then sign into your account.
Click the add button and install the phone "Custom Phone 8.0 - API 26".
This is your new testing device! Upon getting to the home screen, download the GA apps, the button on the top right corner of the virtual phone. Then restart the device when prompted. This will download the Google Play store and will allow you to retrieve the apps you want.
Click the up arrow towards the bottom of the screen, located just above the menu bar. This will show you all your apps. Scroll down and open Google Play. Search for Thunkable Live in the app store. Continue to install the app.
To create a function, you will need to specify if it has any inputs and give it a name
One example of a function is below. This function will create and shuffle a list of items.
After you have created your function, you can simply use it at any time using the function block you have named
You can also create a function that returns a specific output.
You can add multiple return
blocks to your function. This allows you to return a different output based on some conditions.
For example, this function will take a rating out of 100, and return a description of the quality of the item being reviewed:
The function will break when the return
block is fired. For example, in the above example, if the quality rating is 100, the function will return Perfect and then stop. It will not run the other tests, and won't return Excellent. Good, Fine, etc.
When you have invested time building your app, you may want to make a copy of your app project. To do so, just select 'Make Copy.' A copy will automatically be generated and appear in your project page.
You can make a copy of your project while your working on it by clicking on the "Copy" button in the top menu.
You can also make a copy of your project from your projects page. Click on the menu and choose "Duplicate" to create a copy.
Go to and create an account by clicking the Download Genymotion Personal Edition button.
Use this link: . Download and install the package for your specific system. Follow the directions that are prompted.
Approach
Description
For Android, users will have to follow instructions to install the Thunkable app on their device. This approach is not recommended for iOS since there is a download limit of one app per device and users are not advised to share their download link. Users will also have to follow these instructions to install the app on their iOS device. You will also have to re-share these links if you update your app.
Share a read-only version of your app
Users will have to install the Thunkable Live app on their device, sign up for a Thunkable account and select "Live Test" from the Thunkable platform
Share a copy of your app
Users will have to install the Thunkable Live app on their device, sign up for a Thunkable account, and for apps powered by Firebase, copy the credentials into their app project (credentials are cleared with apps are shared). Users can Live Preview from their app.
Property
Description
As first in
This creates and positions the component as the first item in the specified row, column or screen.
As last in
This creates and positions the component as the last item in the specified row, column or screen.
Before
This creates and positions the component before the component selected in the third dropdown menu.
After
This creates and positions the component after the component selected in the second dropdown menu.
Property
Description
As first in
This clones and positions the component as the first item in the specified row, column or screen.
As last in
This clones and positions the component as the last item in the specified row, column or screen.
Before
This positions the cloned component before the component selected in the third dropdown menu.
After
This positions the cloned component after the component selected in the third dropdown menu.
Before you download, we recommend first adding an App Icon and Name to your app
Due to special circumstances from Apple, there is a limit of one downloaded app per phone on iOS. Download wait times may also be a bit longer. You can download and install as many apps as you like to your Android device.
In order to facilitate iOS testing, you will need to follow the instructions on the Publish page to use TestFlight.
To download your Android app:
select Download > Download Android
Enter your email address in the pop-up window
You will be sent an email with a link to download your app.
To install the app on your Android device, you must indicate that you trust Thunkable. To do that:
Open your Android device's Settings menu.
Navigate to Lock Screen and Security.
Set the Unknown Sources option to true.
In addition, you may be alerted that Play Protect has blocked an unsafe app. This is because you are downloading the app outside of the Play Store. If that is the case:
Select the APK file you downloaded to your device.
Click Install.
Click More details.
Click Install anyway.
Click Open.
Anyone installing your app directly, instead of from the Play Store, will need to change the setting on their phone to allow installation of apps from Unknown Sources
Common issues
You receive an email from the hard-working beaver saying that this app will not build
You uploaded an icon that has the same name as an existing asset that you have uploaded
Your app icon is not an image file
Your app icon contains transparent pixels. Apple does not allow you to have any icons with any transparent colors
We are having trouble with our build servers. Please try again in 30 minutes or chat with us if you are still having problems
App (Bundle) ID. Your App (Bundle) ID is a series of short strings of text that are separated by periods, such as com.thunkable.creator.app. These string of text must i) be lowercase, ii) begin with a letter.
Examples of App (Bundle) IDs that can cause errors: com.thunkable.creator.1app, Com.Thunkable.Creator.APP
Asset names. We recommend that asset names only contain Roman alphabet characters with no accents, and numbers.
Examples of asset names that could cause errors: image(1).jpg, imãge.jpg
Examples of asset names that won't cause errors: image1.jpg, image.jpg
You cannot install your app and get the message "Cannot connect to storage.googleapis.com"
You have a special character like "&" in your App Name
When you install your app on Android, you see the message "There was a problem parsing the Package"
This is caused by your package name, also known in your project as your App (Bundle) ID. Your App (Bundle) ID is a series of short strings of text that are separated by periods, such as com.thunkable.creator.app. These string of text must i) be lowercase, ii) begin with a letter.
Examples of App (Bundle) IDs that can cause errors: com.thunkable.creator.1app, Com.Thunkable.Creator.APP
Android | iOS |
---|---|
No limit
Due to Apple recently updating its enterprise certificate guidelines we are unable to facilitate direct downloads at this time. Historically we've had an agreement with Apple that allowed Thunkable to give our users this capability, however the updated eligibility requirements preclude Thunkable from accessing this feature and making it available to our users.
TestFlight beta testing lets you distribute beta builds of your app to testers and collect feedback. You can enable TestFlight beta testing for up to 100 apps at one time in your App Store Connect account. Learn more.
Make improvements to your app and continue distributing builds until all issues are resolved before you submit your app to the App Store.
Enter test information about your app, such as a description and feedback email. You will need this if you plan to distribute your build to external testers (persons outside your team).
Upload your build to the App Store. Read Cryptography and U.S. Export Compliance to determine if you need to provide export compliance documentation for your app. After builds are uploaded, they are available for testing for 90 days.
You can create groups for internal and external testers, then assign specific builds to them. After you've added builds to a group, you can add external testers (up to 10,000 people) and internal testers (up to 100 App Store Connect users with access to your content) to test your app. If you invite external testers, the build needs to be approved by TestFlight App Review before testing can begin.
Testers install the free TestFlight app on their devices. Then they use their invitation email or a public link to accept invitations, install your app, send feedback, and get updates. Testers download and install thinned variants of your app.
Track your tester engagement and your app’s performance by viewing build status and metrics in App Store Connect—such as numbers of sessions and crashes. You can also resend email invitations to testers who have not yet accepted their invitation.
Testers running TestFlight for iOS, version 2.3 or later and iOS 13 or iPadOS 13 or later, can send feedback through the TestFlight app or directly from your beta app by taking a screenshot. This is also available in TestFlight for Mac. You can view this tester feedback in the Feedback section in App Store Connect. Testers running tvOS or earlier versions of iOS can send feedback to the email address you specified in step 1.
When you are done testing, you can optionally expire a build to stop testing it, and then go to Overview of publishing an app for the process of submitting your app to the App Store. If you don’t expire your build and submit it to the App Store, testers that have received an invite to test will still be able to test your build even after it goes live on the App Store. Your build will become unavailable in TestFlight after 90 days.
To make your beta builds available to members of your App Store Connect team, your app doesn’t need review by TestFlight App Review. To make your beta builds available to external users, your beta build may require review. When you add the first build of your app to a group, the build gets sent to TestFlight App Review to make sure it follows the App Store Review Guidelines. A review is only required for the first build of a version and subsequent builds may not need a full review. Testing can begin once a build is approved.
Since Thunkable's cross platform ✕ allows creators to build one app that works on both Android and iOS devices, most creators who want to distribute and monetize their app with larger audiences will choose to publish in both the App and Play Stores.
The App Store review is typically more rigorous and consequently more time-intensive than the Play Store review--but both stores are continually raising the bar for what can be listed in their stores.
You may need to create screenshots in different sizes for your app listing. You can learn how to do that here: Generate Screenshots.
Publish to App Store (iOS)
Publish to Play Store (Android)
Min requirements
Apple Developer Program account ($100 / year)
Google Play Developer account ($25 one-time fee)
Add'l requirements
Design assets
Icon (1024 x 1024 px)
iPhone and iPad screenshots
Privacy policy url for all apps
Design assets
Icon (512 x 512 px)
App screenshots
Feature graphic (1024 x 500 px)
Privacy policy (for certain apps that require sensitive information e.g. access to phone camera)
Est. approval time
A few days
A few hours
For security purposes, when you share your project we automatically clear out any app settings which currently includes Firebase and Stripe keys and urls
When you share a link to your project the recipient will get a copy of your UI components and your blocks. For your safety, we remove personal data from your project settings such as API keys and URLs.
Please note, that if you have account information in your blocks or your UI design then this will not be removed. Only data in your project settings is removed.
When you generate a share link, it will create a copy of your app project at the point in time you generate the link. If you update your app and want your collaborators / remixers to have the latest copy, you'll have to generate a new link
When a user clicks on your share link, a copy of your app will automatically appear in their account. For every copy of your app that is created in a user's account, you will get credit for a share on your project page
If you want to share a read-only version of your app project, you simply set your project to Public
in your App Settings page and share the link of your project url
Users who visit the project url link do not automatically get a copy of your app in their account but they can use the button to create a copy if they wish
How to publish your Thunkable Project to the Apple App Store
Publishing your app to the App Store can be a rewarding process.
Apple requires a lot information for apps that are available in their App Store. As a result, the publishing process can feel long and will require at least 20 minutes to complete the necessary steps on the Thunkable website, which currently requires information from 4 different Apple websites. We recommend completing the Prepare for Submission steps before starting the publishing process in Thunkable.
Thunkable is continually looking for ways to streamline the publishing process and has made it possible for creators to publish from a non-Mac computer, which is normally required by the standard publishing process.
In this document, the version of your app that you submit to the App Store is referred to as a build.
Apple holds a high standard for apps that are approved for distribution in the App Store so please review Apple's policies and guidelines to make sure your app is in compliance before you sign up for the Apple Developer Program
You will need to set a version number in your project. You can set your version number in the Project Settings panel under iOS > Version Number.
If this is your first time sending this app to App Store Connect, you can set the version number to 1. You will need to increment your version number, or increase it by 1, every time you submit a build to App Store Connect.
Apple requires that you explain to users why you may need access to sensitive services like a camera, photo library and microphone. You can add these explanations in the Project Settings panel under iOS Permissions.
User Tracking If your app shares trackable data with any third parties, you must tell your end user what data is being shared and why. This should be left blank if no trackable data is shared with third parties.
To learn more about when to include a tracking string, click here.
You will need an Apple Developer Account to publish an app to the App Store. To obtain a developer account you must enroll in the Apple Developer Program. An Apple Developer Account costs $99/year.
Certain educational institutions qualify for free Apple developer accounts. To check if your school or university if eligible, please visit this Apple site.
If a developer uses a third-party platform like Thunkable to send an app build to App Store Connect, the developer needs to create an app-specific password.
You only need one app-specific password for Thunkable to send any build to App Store Connect on your behalf.
You do not need separate app-specific passwords for separate Thunkable projects.
You will need this password to send a new build to your App Store listing in the future, so make sure to record it securely.
Go to the Apple ID account website and create an app-specific password.
Step 1: Enter your Apple ID and Password
Step 2: If prompted, enter your 6 digit authentication code.
Step 3: Once signed in, click on the Generate password... link highlighted above.
Step 4: Give your password a meaningful name so you will be able to recognise it later.
Step 5: You will not be able to retrieve this password once you click Done so make sure you save it some place safe.
To change an app-specific password, you will need to revoke your old password and generate a new password using the steps above. To revoke an app-specific password:
Sign into your Apple ID account page
In the Security section, click Edit
Go to the App-Specific Passwords section and click View History
Click the ⓧ next to an individual password to revoke it, or click 'Revoke All' to revoke all of your app-specific passwords
Every app published on the App Store must have a unique name. For example, there can only ever be one app called Thunkable Sample App
. You can Register your App ID to reserve the name you want!
Go to the Apple Developer website to register a new App ID. Click through the tabs below to see each screen in the ID creation process.
Step 6 in the tabs below shows you where to find your App Name, Team ID, and Bundle ID.
App Name: The app Name must be unique to the App Store and is what appears next to the app icon when it is downloaded on a user's phone.
Team ID: A unique account identifier that is linked to your Apple Developer Program membership. Apple will automatically create this for you, and it can be used for every app you publish.
Bundle ID: Also unique to your app, but not visible to your app users. Otherwise, a single Explicit App ID should work. Apple recommends reversing your domain name to create your bundle ID i.e. com.yourDomainName.yourAppName to avoid conflicts with other apps.
Note: Starting June 16, 2020, uploading apps to the App Store requires an explicit bundle ID. Wildcard bundle IDs are no longer available when creating app records.
Open your Apple Developer account page and choose the Certificates, IDs & Profiles option from the menu on the left hand side of the screen.
From the menu on the left, click on the Identifiers menu item
Click on the blue + icon to add a new ID to your account.
Choose App IDs from the list of options and then click on the blue Continue button to go to the next screen.
For the app Description enter the name you want to give your app and for the Bundle ID enter the bundle ID from your Thunkable project settings. Click Continue to review these details.
Once you are happy with these detail, click Register to confirm your app ID.
This new app ID is added to your list of app IDs.
Once you have registered an App ID, you can create an app listing on App Store Connect. This is where you will manage your submission to the App Store.
Go to the App Store Connect website and follow the steps below to create your App Store listing with the App Name and Bundle ID you registered earlier.
Click My Apps to create a new app and to manage your existing apps.
Click the blue + button to create a new app
You will need to use the same App Name and Bundle ID you registered earlier. If you registered an 'Explicit App ID', you will enter it into the Bundle ID field above.
Now click on your app name to prepare your store listing.
Thunkable enables you to send your build directly to the App Store without the need for any specialized software or hardware. To begin the process, click on the Publish icon and choose Publish iOS from the drop-down menu.
A publishing dialog will pop up to guide you through the publication process. Please take a moment to read all the instructions.
Click the Get Started button to proceed.
Enter the Apple ID that is associated with your Apple Developer account. Click the Next button to proceed.
If you did not register an App ID before getting started, now is the time to do so.
In the next tab, you will be prompted for your App Name, Team ID and Bundle ID. If you are unsure of what these are, please refer Register an App ID on App Store Connect, above.
This step should only need to occur once. Although you need a different provisioning file for each project, your Account Certificate should remain the same between any projects published with Thunkable. Once you issue a new certificate, that will be good for a period of 1 year from the date of creation. You should be able to publish as many apps as you want with that 1 distribution certificate for you (the publisher) and 1 provisioning file per app (per published Thunkable project) A certificate is specific to the email account that was used to create the certificate. I.E. If you are helping another Thunker publish their app, you would need to log in and publish from that users account using their certificate.
Two-factor authentication helps to keep your account secure and Apple has made it mandatory for new developers to turn two-factor authentication on. If you do have 2FA turned on, you'll need to complete the following steps to confirm your identity with Apple.
In the publishing dialog, click the link that says Click to Download CSR. This is your Certificate Signing Request file and you will need it to generate an iOS Distribution Certificate.
Go to the Certificates page in your Apple Developer account to generate an iOS Distribution Certificate.
You may already have an account certificate in your account. You can only have two certificates per account so you may need to revoke a certificate before you can create a new one.
Click on the blue + icon to create a new iOS distribution certificate.
Choose iOS Distribution (App Store and Ad Hoc) from the next list and click Continue.
Upload the Certificate Signing Request you download from Thunkable and click Continue to get your certificate.
Click the blue Download button to save a copy of this certificate to your computer.
Back in Thunkable, click the Upload Certificate button and choose the .cer
file that you have just created.
Provisioning profiles are required by Apple to install an app on a device. You need to create a .mobileprovision
file in your Apple account and then return to Thunkable to upload this file.
Open up the Profiles list in your Apple Developer account and click the blue + button to get started.
Make sure you are creating a Distribution profile and that the App Store option (highlighted above) is selected. Click Continue to choose an App ID.
From the drop down menu, choose the ID for the app that you are trying to publish. Click Continue to go to the next page.
Choose a certificate and click Continue.
Finally, give your provisioning profile a meaningful name and hit the Generate button.
Once the provisioning profile has been generated you can then Download it to your computer.
The profile has a .mobileprovision
file type. You now need to go back to Thunkable and upload this file.
Back in Thunkable, upload your .mobileprovision
file and click the Next button to proceed.
Paste your app-specific password into the empty text box and click the Next button to proceed.
If you did not create an app listing on App Store Connect before getting started, now is the time to do so.
You're almost there! Review your app icon and your Build Number and Version Number.
App icon: This app icon appears when a user downloads your app from the App Store. Our recommended size is 192 x 192 px. This icon must not have any transparent pixels.
Build and Version Numbers: The version number is visible to your users when they download a new version of your app. The build number needs to increase with each version and is only visible to you. You can opt to let Thunkable automatically increment your build and version numbers.
You should shortly receive an email from Thunkable to let you know that your build is being sent to the App Store. There are still a number of steps that you need to complete on App Store Connect before your app can be published, but that's everything completed from the Thunkable side of things - congrats!
You will need to provide some information to Apple about your app before it can be reviewed and published.
You should receive an email from Apple that says your app is ready in the App Store Connect website. This may take up to an hour.
To view your build:
Go to your App Store Connect dashboard
Select the app listing of the build you have just uploaded
You will see the app listing homepage. This page contains the tabs App Store, Features and TestFlight.
If your build is submitted successfully, it should appear under the TestFlight tab in this app listing homepage. TestFlight is a tool from Apple that allows you to test your app before it is submitted for release in the App Store.
(If there are any issues, you’ll get an email from us telling you what you’ll need to fix.)
Back in the App Store tab, scroll down to the section titled Build and click the button that says Select a build before you submit your app.
You will see a dialog that allows you to select a build to attach to this app listing. Select your chosen build and click Done.
Now you can review the App Information included in your App Store tab. You can review Apple's advice on filling in your app information on this webpage.
Set a price point for your app. Apps can also be distributed for free.
The final section requires screenshots for both iPhone and iPad and a high resolution icon.
The high resolution icon will be featured in the App Store listing and must be 1024 x 1024 px with no transparency. To generate this icon, we recommend a tool like this.
You can see the screenshots you need in Apple's screenshot specifications document.
You can create your own iOS screenshots in your browser. Learn more here: Generate Screenshots
You may need to answer a question about export compliance. Select Yes when asked if your app uses encryption.
After submitting your app for review, you may asked, "Does this app use the Advertising Identifier (IDFA)?"
The app will still be able to be published but you will want to check the following three boxes:
Note, you should not check the box labeled Serve advertisements within the app.
Now your app listing is ready for Apple to review!
To update an existing App Store listing, follow the instructions on Apple's website here.
For Step 6, Upload your new build to App Store Connect, follow the instructions in Send a Build to App Store Connect.
You do not see your app uploaded to App Store Connect
Download. One way to check if your app is build-able is to download it to your phone first. Two common download errors are:
You uploaded an icon that has the same name as an existing asset that you have uploaded
Your app icon is not an image file
Icons. Apple additionally does not allow you to have any icons with any transparent colors. We recommend app icons to be 192 x 192 px
Membership. To publish to the App Store, you'll need to sign up for Apple Developer Program Membership. This currently costs $99 / year.
App Store Connect. Make sure to follow this step on creating a new app on iTunes Connect
Certificates. If you have an existing Apple Developer Program account with 2 iOS certificates, you'll have to revoke one. Apple only allows developers to have 2 iOS certificates at a time and Thunkable creates one when it publishes to your account
Provisioning profile. After you revoke your certificate, it is possible that one or more of your provisioning profiles will become inactive. To publish successfully, you'll also need to delete any inactive provisioning profiles
Login. Apple ID or password were entered incorrectly. Since we don't store either one, there's no easy way for us to check so enter it slowly
Apple ID and privacy terms. You must accept Apple's new Apple ID and privacy terms.
You see a message saying "ITMS-90809: Deprecated API Usage - Apple will stop accepting submissions of apps that use UIWebView APIs". This is a warning, but you can still publish your app. See the Web Viewer documentation for more details.
To publish an app to the App Store that contains Push Notifications, you need to:
send an app that does not contain Push Notifications to App Store Connect
add push notifications to your app project (see instructions here)
send the new version of your app to App Store Connect
Between sending these two versions of your app to App Store Connect, you will need to create a new .mobileprovision file. Here's a quick overview of what that process looks like.
Click on Provisioning Profiles > All to see your current iOS provisioning profiles. Notice that the app you just created is now invalid so we need to generate a new one.
Open the inactive profile and click on Edit to generate a new one.
Scroll to the bottom of the page and click Generate.
On the next screen, click the Download button and the .mobileprovision file will be saved to your downloads folder.
If you want to remove your apps from being listed in the App Store, open your app listing on App Store Connect and follow these instructions:
On the “App Store” tab, click on “Pricing and Availability”
Click the “Remove from Sale” radio button
Then click the “Save” button to unpublish your app
You can see these buttons in the screenshot below:
Please note that if your Apple Developer account expires, your apps will no longer be available for download in the App Store.
Removing your app from the Play Store will not delete it from devices which have previously downloaded the app.
By adding app screenshots that showcase your app's features and functionality on its store listing page, you can help your app attract new users on the Apple App Store and Google Play Store. They are a requirement of the publishing process.
To generate app screenshots, the instructions vary depending on your Thunkable plan.
To generate screenshots with a Business of Teams plan:
Publish your app as a responsive web app. See instructions here: Responsive Web App
Copy the Web App URL link.
Open the link in Google Chrome.
Click the vertical ellipsis in the upper right of your Chrome browser to access Chrome Settings.
Click More Tools.
Click Developer Tools to view the app in developer mode.
In the top left-hand corner of the developer tools, click the icon that looks like a laptop and a phone.
Use the drop-down menu at the top of the screen to select different devices and screen orientations.
Refresh your screen each time you select a new device to ensure the selection is applied to your responsive web app.
If the device you need isn't listed, click Edit... at the bottom of the selection list and add additional devices as necessary.
Alternatively, if you know the device dimensions, select Responsive from the device menu and enter the dimensions manually.
To generate the screenshot, click the vertical ellipsis to the left of the developer's tools console.
Click Capture screenshot.
Repeat for required devices.
We recommend that you create a folder on your computer to save and organize all of the assets you will require for publishing your app.
Publish your app as a mobile web app.
Capture a screenshot of your mobile web app. You don't need to worry about the grey border.
Use a design tool such as AppMockUp to create all the required screenshots.
Here is a list of screenshot sizes you need to publish to the App Store.
To get all of the screenshot sizes you need, create screenshots using the following device settings. Each device name will be followed by its corresponding screen size in the screenshot doc linked above.
iPhone X (5.8 inch screenshots)
iPhone 6/7/8 Plus (5.5 inch screenshots)
iPad Pro (12.9 inch screenshots - suitable for iPad Pro 3rd gen and iPad Pro 2nd gen screenshots described in doc)
5.8 inch screenshots are used as an alternative to 6.5 inch screenshots. There are two ways to upload these iPhone X screenshots to your App Store listing:
When you look at your screenshot upload window, you will see the text ‘View All Sizes in Media Manager’. Click here. In the iOS tab, you will see a segment that says ‘6.5-inch display’. At the bottom of this segment you will see the text ‘5.8-inch display’. Next to this you will see a checkbox with the text ‘Use 6.5-inch Display’. Uncheck this box and expand the ‘5.8-inch Display’ segment. Click on ‘Choose File’, and upload your 5.8-inch screenshots.
Use an image editor of your choice to resize your iPhone X screenshots from 1125 x 2436 pixels (5.8-inch Display) to 1242 x 2688 pixels (6.5-inch Display). Upload your new 6.5-inch screenshots to the App Store.
Here are some of the most common issues that our users are running into:
Common issue
You see a blank / white screen when you live test (even if there are items in your app)
If you have a Navigator as the first item in your tree, make sure your screen is dropped within it
Your have unconnected blocks
You have an event triggered by a Screen.Start which may be causing the screen to crash
Common issues
You receive an email from the hard-working beaver saying that this app will not build
Common issues
You uploaded an icon that has the same name as an existing asset that you have uploaded
Your app icon is not an image file
We are having trouble with our build servers. Please try again in 30 minutes or chat with us if you are still having problems
You cannot install your app and get the message "Cannot connect to storage.googleapis.com"
You have a special character like "&" in your App Name
Trouble downloading AAB and APK files from Google Chrome:
The Google Chrome browser blocks downloads for your safety. If you open the email with a download link for your APK or AAB file in Google Chrome, you may not be able to download your file. You can try one of these options:
Open the email in another browser, like Firefox or Safari, and download the file.
Change your Google Chrome settings to allow you to download files. You can find instructions to do this here. Please note that changing your browser security settings can make you more vulnerable as you use the web, and Google Chrome recommends against disabling this setting.
Common issues
You do not see your app uploaded to App Store Connect
Download. One way to check if your app is build-able is to download it to your phone first. Two common download errors are:
You uploaded an icon that has the same name as an existing asset that you have uploaded
Your app icon is not an image file
Icons. Apple additionally does not allow you to have any icons with any transparent colors. We recommend app icons to be 192 x 192 px
Membership. To publish to the App Store, you'll need to sign up for Apple Developer Program Membership. This currently costs $99 / year.
App Store Connect. Make sure to follow this step on creating a new app on iTunes Connect
Certificates. If you have an existing Apple Developer Program account with 2 iOS certificates, you'll have to revoke one. Apple only allows developers to have 2 iOS certificates at a time and Thunkable creates one when it publishes to your account
Provisioning profile. After you revoke your certificate, it is possible that one or more of your provisioning profiles will become inactive. To publish successfully, you'll also need to delete any inactive provisioning profiles
Two-factor authentication. You must turn off two-factor authentication for your Apple Developer ID to publish with Thunkable. Please click here to see our recommendations for turning off two-factor authentication
Login. Apple ID or password were entered incorrectly. Since we don't store either one, there's no easy way for us to check so enter it slowly
Apple ID an privacy terms. You must accept Apple's new Apple ID and privacy terms.
You cannot update an existing app on the Google Play Store
If you updating an existing app on the Google Play Store, your app will need to have the i) same package name, ii) a higher or incremented version number, and the iii) same keystore. The first two are easily editable in the App Settings page but the keystore is not yet able to be imported / exported.
Copied apps within an account (using the Make Copy) will keep the same keystore as the original app. Apps that are copied from a Share copy link will not have the same keystore. Apps from the Thunkable Classic platform cannot yet be updated since it is not yet possible to import the keystore.
Go to x.thunkable.com
Navigate to the My Data Sources tab
Delete your Google Sheets data sources by clicking the trashcan icon
If you are having difficulties connecting to your Google Sheets from Thunkable, you may need to reset your Google Sheets connection.
Go to Third-party apps with account access
and click Manage third-party access
Click on Thunkable and click Remove Access
You can now return to Thunkable and re-connect to your Google Sheets account
Connect to Airtable.
Click
Click Third-party integrations.
Click Thunkable.
Click Revoke access
Return to Thunkable, re-connect to your Airtable account, and give access to all the bases you need.
How to publish your project to the Internet as a Web App
Publishing as a Web App is currently the fastest way to publish your Thunkable app. This means that you can get user feedback in minutes instead of hours or days. One major advantage to publishing on the internet is that you don't need to pay additional fees to an app market place.
The "Publish as a Web App" component is a feature just for Thunkable creators with active Pro subscriptions. To upgrade your subscription please visit your membership page. If you cancel your Pro membership, your app will be unpublished once your Pro membership expires.
Mobile web apps are best experienced by opening the link directly on your phone. To make your mobile app feel more like a native app you can add it to the home screen directly from your mobile web browser.
If you preview a mobile web app on a desktop or laptop computer you will see a phone frame around the app. This is to give you a rough idea of its final proportions, but ultimately this will vary from device to device depending on factors such as screen size, aspect ratio, and pixel density.
To get an app that can respond to devices of any size, consider publishing as a Responsive Web App.
Publishing your app as a responsive web app means that it will scale according to the size of the device that it is being opened on.
If your app in designed only to be run on phones, consider publishing as a Mobile Web App.
Here's a 3 minute overview of how "Publish as a Web App" works.
Start by clicking on the Publish menu and choose the "Publish as Web App (PRO)" option at the bottom of the drop down menu
The first time you publish a new project you will have to click on the blue Get link and publish
button.
In the next modal you can:
open the app in a new tab
copy the app link
select whether to publish as a Mobile web app or a Responsive web app
share your app through popular channels like Facebook, Twitter and Reddit
unpublish your app by clicking on Disable published link
text
🎉 Congratulations - your Thunkable project is now live on the internet a published web app.
Publishing to a custom domain is available with the Thunkable Business or Team plan.
You need to configure your domain before you can publish your app to that domain. To do so, add the Thunkable IP address (34.136.177.42) to the A record of your domain which you can usually find in the DNS section of your domain provider.
Here are the instructions from some popular domain name providers:
DNS synchronization often takes less than an hour but may take up to 72 hours. If your domain is not connecting within 48 hours, we recommend the following troubleshooting steps:
Confirm the IP address added to your A record is the correct IP (34.136.177.42).
Ensure you are using http://
and not https://
.
Note: The windows you see may look slightly different from the ones shown below. The windows and prompts vary based on whether or not you’ve published your app as a web app previously.
To publish your web app to a custom domain:
Click the Publish icon.
Select Publish Web app.
Add your custom domain in the provided field and click Add Domain. Note: this must be the domain and not the URL.
Click Check Status.
A green Connected tag will appear in the field when there is a successful connection.
Ensure the box next to Publish web app to this domain is checked.
Select a web app format (Mobile web app or Responsive web app).
Click Get link and publish or Publish current version.
Click Done.
Each time you press publish it’s similar to creating a new release of your app in one of stores. This means you can make changes and updates to your without worrying about users seeing a half-finished new feature that you’re still working on.
When you’re ready to release a new version, choose “Publish as a Web App” then click the blue “Publish current version” to update your app. The URL will remain the same, but the project that it links to will be updated.
If you host a webpage, you can embed your Thunkable web app in an iframe using the syntax
<iframe src="https://thunkable.site/w/K0XDxMqwl" title="Chop Down the Tree Thunkable App" height = 500 width = 500></iframe>
You can read more about iframes here.
Not all components are supported on the web at this time so please see the list below of components that are not supported. Please note that some are Supported but may not work as expected
so may not work consistently on every device. Others, such as AdMob Can not be supported
but may be replaced by an alternative in the future. While other are Not supported yet
but may be made available in future updates.
How to publish your Thunkable project in the Google Play Store
From July 20, 2022 you must now review how your app collects and shares user data before publishing or updating in the Play Store.
Publishing your app to the Play Store will help your app reach 2 billion active Android devices. The ability to publish an Android app is available to PRO, Business and Enterprise Thunkable creators. Learn more at our pricing page.
Google Play Developer Account ($25 one-time fee). Don't have an account? Sign up here
Success on Google Play starts with quality. The best apps and games have higher ratings, more installs, and more engagement. We recommend visiting the Play Store Developer Policy Center before you submit your app to the Play Store
To publish your app on Android, you'll need to add an app icon
, a name
, a package name
and an app version
. To find the App settings, click on the App Icon on the top left.
For recommendations on your app icon
and name
, please see this guide.
Each Android app that is published to the Play Store has a unique package name
. Currently, you can enter this in the App (Bundle) ID field.
Your app's package name is unique to your app. We recommend reversing your domain name to create your package name i.e. com.yourDomainName.yourAppName to avoid conflicts with other apps.
You can find your package name in your Project Settings under App (Bundle) ID.
Your package name should be all lower case. None of the segments should begin with a number. None of the segments should have an accent on the characters.
If you are only publishing to the Play Store, you do not need to enter a Team ID to publish to the Play Store (this is for iOS only)
Before you download your app, make sure you set the appropriate Build and Version Number. Google Play requires each new version of your app to have a unique and sequentially higher Build and Version Number. You can also let Thunkable auto-increment (or automatically increase) the build and version numbers for you.
You can download your AAB file by clicking Publish > Publish Android
You will see a dialog asking you to enter your email address. An AAB file will be sent to you:
An AAB file cannot be installed on an Android device. If you want to download and install your project, please read the Download docs.
Go to the Google Play Console to complete these next steps.
Click Create app in your Google Play console to get started.
You will be asked to provide some details about your app:
App Name (Text)
Default Language (Select from a drop-down menu)
If you're releasing an App or a Game (select one)
If your app is Free or Paid (select one)
You will also be asked to confirm that your app meets the Google Play Developer Program Policies and to accept that your app may be subject to US export laws.
Google offers optional steps to set up internal testing for your project. You can follow the steps to set this up. We will focus on the Set Up Your app and Publish Your app on Google Play steps.
Provide some information about your app's content.
App access: is any of your app's content locked behind a paywall or login screen?
Ads: does your app serve ads?
Content rating: Does your app contain strong language, violence, or other sensitive material?
Target audience: Is this app designed for children?
At this time, you will not be able to target children as your select audience.
News apps: Is the function of your app to provide news updates to your users?
You can also add some information for how your app should be categorized and presented in the Play Store:
Set an App Category, and add Tags to make your app more easily searchable
Add Contact Details: you must provide an email address, and you can also provide a phone number or website
Choose whether or not your app may be marketed outside of the Google Play store
Setting up your Store Listing will require the following:
An App Name to be shown the Play Store
A Short Description of your app
A Full Description of your app
An App Icon
512 * 512 pixels
Up to 1MB in size
A Feature Graphic
1024 * 500 pixels
Up to 1MB in size
An optional YouTube Video URL to demonstrate your app
At least one Phone Screenshot
16:9 or 9:16 aspect ratio
Each side between 320 and 3,840 pixels
Up to 8MB in size
At least one Tablet Screenshot
16:9 or 9:16 aspect ratio
Each side between 320 and 3,840 pixels
Up to 8MB in size
All images can be in PNG or JPEG format.
See Sample Assets at the end of this document for examples.
You will be asked which countries and regions you want your app to be available in.
Then you will be asked to create a new release.
Google will offer to protect your app signing key. You can click Continue to allow this to proceed. You will only be asked this the first time you publish a release.
See Manage Your Own App Signing below if you do not want Google to manage your app signing.
Upload your AAB file in the App Bundles and APKs section. This may take a few minutes.
Add a Release Name and Release Notes in the Release Details section.
Review and Release
Errors, Warnings, and Messages will let you know if there are any issues with your release or any information you should be aware of. Errors will prevent you from publishing your release. Warnings and Messages will not prevent you from publishing a release.
New App Bundles and APKs will show any new APK or AAB files you have added to this release.
Release Notes will show the release notes for this release.
Click Start Rollout to Production to publish your app!
Once your app has been reviewed, it will go live on the Google Play Store.
Apps that request access to sensitive permissions or data (as defined in the user data policies) are required by the Google Play Store to include a privacy policy. Currently all apps made on Thunkable request access to sensitive permissions or data, which means you will need to provide a privacy policy
Congrats! You are now ready to submit to the Play Store.
You can view Google's instructions for updating your app here. Please refer to the content that references app bundles, not APK files.
If you are updating an existing app on the Google Play Store, your Thunkable project will need to have:
the same package name as the published app
an incremented version number (version number is higher than the version number of your published app)
the same keystore as the published app
You will need need to change any app signing settings when updating a published app.
Keystores in Android are storage mechanisms for security certificates to prevent others from updating your app on the Google Play store. Your keystore contains a private key that is unique to your app. Copied apps within an account (using the Make Copy) will keep the same keystore as the original app. Apps that are copied from a Share copy link will not have the same keystore.
Thunkable does not store your keystore outside of your app. If your app has been deleted, and you have not downloaded a copy of your keystore, then it is permanently lost. Please use Google's App Signing Service so that you can update your published apps in the event that your keystore is lost.
If you make a copy of a Thunkable app project, the copy will have a different keystore to the original project.
To export a keystore from a Thunkable app project, Click the name and icon of your app in upper left corner to bring up App Settings on right side as seen in 'Import keystore to Thunkable X'. Scroll all the way to the bottom of the App Settings and click Export Keystore.
In the dialog that comes up, you will see the keystore's password and a button that says Export Keystore. You will need this password to import your keystore to other projects. You can change the password at this stage by editing the password in the text box.
Click OK to save the .keystore file to your computer.
Note: A Thunkable app project will not have a keystore until either a keystore is imported or the project is downloaded as an Android app for the first time
Select the the app that you are trying to publish as an update to the Google Play Store.
Click the name and icon of your app in upper left corner to bring up App Settings on right side.
Scroll all the way to the bottom of App Settings and click Import Keystore. Note this will replace the existing keystore for this app so be sure you haven’t used it to publish to Google Play store before proceeding. You can always Export it first and save it to your computer just in case.
Enter the password and select the .keystore file you previously saved to your computer.
Congrats! You should be able to successfully publish updates now. Note that you’ll need to repeat the steps every time you want to update an app that was originally built as a different project as every app has their own keystore.
To make your app unavailable for download on the Play Store, open your app listing on the Google Play Console and do the following:
Scroll down to “Release” and click on “Setup”
Then “Advanced Settings”.
Click the “Unpublished” radio button
Then click “Save” to unpublish your app.
You can see the relevant areas below:
Removing your app from the Play Store will not delete it from devices which have previously downloaded the app.
If you don't want Google to manage your App Signing, you can do so yourself. This is not necessary.
You will need to download your Keystore Zip. This is a compressed version of your app's Android Keystore.
You can download this from your project settings under Keystore Zip:
We recommend creating a new folder on your computer. Download your AAB file and your Keystore Zip to this new folder. That way the correct AAB file and Keystore Zip will be together!
Click Manage App Signing:
Click Export and upload a key from Java keystore:
You can skip straight to Step 3: Upload generated ZIP and Upload the Keystore ZIP you downloaded from your project settings.
Click Continue.
Continue following the instructions in this document from Upload your AAB file.
Help developers test beta versions of their apps and App Clips using the TestFlight app. Download TestFlight on the App Store for iPhone, iPad, Mac, and Apple TV.
To test beta versions of apps using TestFlight, you’ll need to accept an email or public link invitation from the developer and have a device that you can use to test. You’ll be able to access the builds that the developer makes available to you.
If you’re a member of the developer’s team, the developer can give you access to all builds or certain builds.
iOS or iPadOS apps: iPhone, iPad, or iPod touch running iOS 13 or iPadOS 13 or later. App Clips require iOS 14 or iPadOS 14, or later.
macOS apps: Mac running macOS 12 or later.
Arabic, Catalan, Chinese (simplified), Chinese (traditional), Croatian, Czech, Danish, Dutch, English (Australia), English (U.K.), English (U.S.), Finnish, French, French (Canada), German, Greek, Hebrew, Hindi, Hungarian, Indonesian, Italian, Japanese, Korean, Malaysian, Norwegian, Polish, Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian, Slovak, Spanish, Spanish (Latin America), Swedish, Thai, Turkish, Ukrainian, and Vietnamese.
Each build is available to test for up to 90 days, starting from the day the developer uploads their build. You can see how many days you have left for testing under the app name in TestFlight. TestFlight will notify you each time a new build is available and will include instructions on what you need to test. Alternatively, with TestFlight 3 or later, you can turn on automatic updates to have the latest beta builds install automatically.
When the testing period is over, you'll no longer be able to open the beta build. To install the App Store version of the app, download or purchase the app from the App Store. In-app purchases are free only during beta testing, and any in-app purchases made during testing will not carry over to App Store versions.
To get started, install TestFlight on the device you’ll use for testing. Then, accept your email invitation or follow the public link invitation to install the beta app. You can install the beta app on up to 30 devices.
Install TestFlight on the iOS or iPadOS device that you’ll use for testing.
Open your email invitation or tap the public link on your device.
When installing via email invitation, tap “View in TestFlight” or “Start testing” then tap “Install” or “Update” for the app you want to test.
When installing via public link, tap “Install” or “Update”.
Install TestFlight on the Mac that you’ll use for testing.
Open your email invitation or click the public link on your Mac.
When installing via email invitation, click “View in TestFlight” or “Start testing” then click “Install” or “Update” for the app you want to test.
When installing via public link, click “Install” or “Update”.
Create a group and add up to 100 internal testers (App Store Connect users with access to your content) to test your app using TestFlight beta testing. You can choose to automatically distribute builds to internal groups or add them manually. Builds created by Xcode Cloud always need to be manually added to groups in App Store Connect.
Required role: Account Holder, Admin, App Manager, Developer, or Marketing. See Role permissions.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, click the Add button (+) next to Internal Testing.
In the dialog that appears, enter the name for a new internal group, then click Create. You can change the name later, if needed.
Select the “Enable automatic distribution” checkbox to allow Xcode to automatically deliver builds to everyone in the group. If automatic distribution is not enabled, all builds must be manually added to the group. Builds created by Xcode Cloud always need to be manually added to groups in App Store Connect.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, click the Add button (+) next to Internal Testing.
Next to Testers, click the Add button (+).
Users that are eligible to be internal testers appear in a dialog.
Note: If a user you want to add doesn’t appear, change their user role.
Select the checkbox next to each user you want to invite, then click Add.
If you have builds available for testing, the users you select will receive an email inviting them to test the app. They’ll be directed to accept the invitation using theTestFlight app on their device or via a redemption code. Internal testers can download and test all builds for 90 days.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, click the group you want to add a build to.
On the right, click the Add button (+) next to Builds.
Select the build you want to add to the group, then click Next.
Enter the What to Test information and optionally enter localized versions of test information in the fields under each language-specific section.
Note: This information will be available to testers in all groups that have access to the build.
Click Add.
If you have builds available for testing, the users you selected will receive an email inviting them to test the app. The users will be directed to accept the invitation using the TestFlight app on their device or via a redemption code. Internal testers will be able to download and test all builds for 90 days.
You can invite external testers (persons outside your team) to test your app using TestFlight beta testing once you’ve uploaded at least one build. To make your build available for external testing, create a group, add builds, and then invite testers using their email address or by sharing a public invitation link.
Required role: Account Holder, Admin, or App Manager. See Role permissions.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, click the Add button (+) next to External Testing to add a new group.
In the dialog that appears, enter a group name, then click Create.
Later, you can change the name of the group if needed.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, under External Testing, select the group you want to add builds to.
On the right, click the Add button (+) next to Builds.
In the build dialog, select the platform and version from the pop-up menus.
From the table, select a build, then click Next.
Although you can add only one build at a time, you can add additional builds later.
Note: Enter test information such as Feedback Email and Contact Information if these details have not yet been provided in the Test information dialog.
In the What to Test dialog, enter what you want testers to focus on.
Optionally, enter localized versions of testing information in the text fields under each language-specific section.
Optionally, select “Automatically notify testers.”
If you leave this checkbox deselected, you will have to manually distribute the build to testers after it's approved by TestFlight App Review later.
Depending on the status of the build, click either Submit Review or Start Testing.
You can only have one build of each version in review at a time. Once that build is approved, you can submit additional builds.
After you submit your build to TestFlight App Review, Apple reviews the build and the accompanying metadata. The first build you submit requires a full review, but later builds for the same version may not.
If Apple approves your build for TestFlight beta testing, users on the App Store Connect account with the Admin role will receive an email notifying them of the approval.
If Apple rejects your build or metadata, the external status will be Rejected and you can click status to see rejection details.
Note: Submitting a build to TestFlight App Review doesn’t submit it to App Review for sale in the App Store.
Once you have builds available to test, and you've added them to a group, you can invite testers.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, under Testers & Groups, select a group.
You can Invite testers using a public link, email, or both.
To invite testers using a public link:
1. Click Enable Public Link, and confirm in the dialog that appears.
2. Under Tester Count, click Set Limit to limit the number of testers that can join this testing group using the public link. Enter a number between 1 and 10,000.
3. Copy the link, and share it using social media, messages, email, or other channel.
Keep in mind that anyone can share this link, so testers may be able to join your testing group even if you don't invite them directly. If a tester joins your group using a public link, their name and email will not be displayed in the Testers section in App Store Connect (it will display as anonymous), but you will be able to see their installation date, sessions, and crashes. You can disable the public link at any time.
1. Click the Add button (+) next to Testers.
2. In the pop-up menu that appears, choose an option. You can add new testers using their emails address, existing testers you've previously added, or import testers from a CSV file.
3. Testers you invite will get an invitation email to start testing. If a tester accepts an email invitation, their name, email address, installation date, sessions, and crashes, will display in the Testers section in App Store Connect.
If you didn’t select “Automatically notify testers” when you added your build to your group, you must manually notify testers when your build is approved.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, under Builds, click the platform for your app (iOS or tvOS).
Choose a version, then under Status, click Notify Testers for the build row.
The build status changes to Testing. The external testers will receive a notification directing them to accept the invitation using the TestFlight app on their device.
From My Apps, select your app.
Click the TestFlight tab.
In the sidebar, under Testers &Groups, select a group.
On the right, under Builds, hover over the build you want to remove.
Click the delete button.
In the dialog that appears, confirm you want to remove the build from the group and click Remove.
If you want to remove a build from testing for all your testers, go to Stop testing a build.
After installing TestFlight 3 or later for iOS, iPadOS, or tvOS, or TestFlight for macOS, you’ll be prompted to turn on automatic updates. This allows the latest available beta builds to install automatically. TestFlight will notify you each time a new build is installed on your device. Automatic updates can be turned off at any time.
Note: This setting will apply to all new beta app builds. Beta apps that have automatic updates set at the individual app level won't be affected
TestFlight for iOS or iPadOS
Open TestFlight and tap Settings in the top right.
Tap Automatic Updates.
Tap On or Off.
TestFlight for macOS
Open TestFlight and choose Preferences from the TestFlight menu.
Under General, select Automatic Updates for New Apps.
TestFlight for iOS or iPadOS
Open TestFlight and go to the app’s page.
Under App Information, turn Automatic Updates On or Off.
TestFlight for macOS
Open TestFlight and go to the app’s page.
Under App Settings, select Automatic Updates.
When viewing an app in TestFlight, you'll see the latest available build by default. You can still test all other builds that are available to you.
If you already have the App Store version of the app installed on your device, the beta version of the app will replace it. After you download the beta app, you’ll see an orange dot next to its name that identifies it as a beta.
When you accept a TestFlight invitation through a public link, your name and email address aren’t visible to the developer. However, they’ll be able to see your number of sessions and crashes, the day you installed their app, and the latest installed version.
Open TestFlight and go to the app’s page.
Tap View Previous Builds or, if you're using Xcode Cloud, tap Versions and Build Groups.
Tap either the Versions tab or Build Groups tab, then tap and install the build you want to test. The build you choose will replace what's currently installed.
Open TestFlight and go to the app’s page.
Next to Build Information, click View Previous Builds or, if you're using Xcode Cloud, click Versions and Build Groups.
Click either the Versions or Build Groups tab, then select and install the build you want to test. The build you choose will replace what’s currently installed.
While testing a beta version of an app or App Clip, you can send the developer feedback about issues you experience, or make suggestions for improvements based on the “What to Test” content. Feedback you submit through TestFlight is also provided to Apple as part of the TestFlight service.
You can send feedback through the TestFlight app or directly from the beta app or beta App Clip by taking a screenshot, and you can report a crash after it occurs. If you were invited to test an app with a public link, you can choose not to provide your email address or other personal information to the developer. Apple will also receive all feedback you submit and will be able to tie it to your Apple ID.
For iOS or iPadOS:
Open the TestFlight app on your device.
From the Apps list, tap the app.
Tap Send Beta Feedback.
In the share dialog, tap Include Screenshot to choose a screenshot. If you don’t want to send an attachment, tap Don't Include Screenshot.
Add your comments (up to 4,000 characters), and optionally enter your email address if you were invited with a public link.
Tap Submit.
For iOS 12.4 or earlier:
If your device is running iOS 12.4 or earlier, tap Send Beta Feedback to compose an email to the developer. The feedback email contains detailed information about the beta app and about your iOS device. You can also provide additional information, such as necessary screenshots and steps required to reproduce any issues. Your email address will be visible to the developer when you send email feedback through the TestFlight app even if you were invited through a public link.
For macOS:
Open the TestFlight app on your Mac.
From the Apps list in the sidebar, select the app you want to send feedback for.
Click Send Beta Feedback.
In the feedback dialog that appears, add your comments (up to 4,000 characters), and optionally enter your email address if you were invited with a public link.
Optionally, attach a screenshot by clicking Attach Screenshot.
Click Submit.
Note: You can drag and drop screenshots into the feedback text field.
When you take a screenshot while testing a beta app or beta App Clip, you can send the screenshot with feedback directly to the developer without leaving the app or App Clip Experience. Developers can opt out of receiving this type of feedback, so this option is only available if the developer has it enabled.
For iOS or iPadOS:
Take a screenshot on your device. For details on how to take screenshots, see Take a screenshot on your iPhone, Take a screenshot on your iPad, and Take a screenshot on your iPod touch.
A thumbnail of your screenshot appears in the lower-left corner of your device. Tap the thumbnail and, if needed, add drawings and text with Markup. Then tap Done.
Tap Share Beta Feedback.
Optionally, you can add comments (up to 4,000 characters), and your email address if you were invited with a public link.
Tap Submit.
For macOS:
Take a screenshot on your Mac. For details on how to take screenshots, visit Take a screenshot on your Mac
A thumbnail of your screenshot appears in the lower-right corner of your Mac. Click the thumbnail to open the Quick Look window and, if needed, add drawings and text with Markup.
From the Share menu in the Quick Look window, click Send Beta Feedback.
Optionally, you can add comments (up to 4,000 characters), and your email address if you were invited with a public link.
Click Submit.
If you experience a crash while testing a beta app or beta App Clip, you’ll receive an alert asking if you want to send crash details to the developer through TestFlight. Developers can opt out of receiving this type of feedback, so this option is only available if the developer has it enabled.
When a crash alert displays for TestFlight for iOS or iPadOS, tap Share, add any additional comments, then tap Submit.
When a crash alert displays for TestFlight for macOS, click Report, add any additional comments, then click OK, Send, or Reopen.
To provide feedback on a tvOS app, open TestFlight, go to app’s page, go to the Information section to view the developer's email address, and send them an email. Provide as much information as you can, including screenshots and steps required to reproduce any issues you encountered. Please note that your email address will be visible to the developer when you send email feedback through TestFlight.
If you need to contact the developer while you’re testing their beta app for reasons other than feedback, you can view their email address. In TestFlight, go to the app’s page, go to the Information section, and tap App Details to view the developer’s email address.
If you don’t accept your email invitation, the beta app will not be installed and Apple will not send you any further communications regarding testing. If you accepted the invitation but no longer wish to test the app, you can delete yourself as a tester on the app’s Information page in TestFlight by tapping Stop Testing. Alternatively, you can email the developer to ask them to remove you by clicking the Unsubscribe link at the bottom of a TestFlight build notification email.
When you test beta apps or beta App Clips with TestFlight, Apple will collect and send crash logs, your personal information such as name and email address, usage information, and any feedback you submit to the developer. Information that is emailed to the developer directly is not shared with Apple. The developer is permitted to use this information only to improve their app and is not permitted to share it with a third party. Apple may use this information to improve the TestFlight app.
Apple retains TestFlight data for one year. To view and manage your data with Apple, including your data that is sent to Apple through TestFlight, visit Data and Privacy. For more information about how the developer handles your data, consult their privacy policy. To request access to or deletion of your TestFlight data, contact the developer directly.
The following data is collected by Apple and shared with the developer when you use TestFlight. If you accepted an invitation through a public link only, your email address and name are not visible to the developer.
When you send feedback through TestFlight or send crash reports or screenshots from the beta app, the following additional information is shared. This information is collected by Apple and shared with developers. Apple retains the data for one year.
Copyright © 2022 Apple Inc. All rights reserved.Terms of Service Privacy Policy
Answers to some of the most asked questions from the Thunkable community
How much does it cost to use Thunkable ✕?
Thunkable is free to use to create public projects. Thunkable charges a maintenance fee for the use of certain components such as Payment by Stripe and Ads by AdMob.
What does it mean if my project is public or private?
Public projects are included in the Thunkable Public Gallery for anyone to preview and remix. Private projects are just that, private. They are not included in the Thunkable Gallery and are for your eyes only.
Private projects can only be shared with other PRO users. Please note: If you share your project with another PRO user, they have the ability to make the project public.
Since mobile phones and tablets are made in all different shapes and sizes, it's not possible to simply drag and drop elements on a screen so that they are positioned on a screen like you would in a Google Slides document, which is set to a fixed height and width.
You can space elements within a Screen, Row or Column using two powerful properties:Horizontal Alignment
and Vertical Alignment
.
Horizontal Alignment
in a Screen, Row or Column
Vertical Alignment
in a Screen, Row or Column
We currently allow creators to log in with either a Gmail account or with any other email address the choose.
If you are seeing this page, you are likely having problems logging into our web platform. Our hardworking beaver is sad to hear that.
Fortunately, we have some recommendations that will hopefully help you fix your login issues. Our top suggestions are:
Sign out completely from Google and then sign back-in
Switch your browser to Chrome, Firefox or Safari (if using Internet Explorer or Edge Web Browsers)
Uninstall AdBlocker extensions or add-ons (if you have them installed)
Disable Kaspersky Lab Antivirus or whitelist thunkable.com (if you have it installed)
A helpful summary is below:
To enable cookies, please follow the directions below:
In Chrome you need to make sure that you are allowing sites to save and read cookie data. You will also need to ensure that you do not block third-party cookies.
Open Safari > Preferences ... > Privacy
Prevent cross-site tracking should be checked.
Block all cookies should be unchecked.
IMPORTANT: Please make sure to refresh your page after you enable cookies
Your app and desktop may not be logged into the same account
Data | Description |
---|---|
Data | Description |
---|---|
For users who want to keep their projects private, users have the option of upgrading to Thunkable PRO. .
To position elements of an app in Thunkable, you'll have to manage the spacing between elements with a few powerful properties. You will also find some helpful examples in the section.
To create space around a visible component like an Image, you can use the margin
and padding
that are found in the Advanced section of the component properties. In most cases, you can add a margin OR padding to create space around an element -- they are interchangeable and can be set both in pixels and percent of the height or width. The fastest way to see what makes the most sense is to on your phone.
in your browser, if you have them switched off.
Open you Chrome cookie settings: .
More info about cookies in Chrome .
You will need to have settings like the one below. More info .
Read more about cross-site tracking .
Read more about managing cookies .
You can currently change the font on the and components by setting their FontFamily
property in the Advanced tab.
The available font choices differ depending on whether you are developing for or and are listed below.
You can view these fonts .
You can view these fonts .
Component
Category
Status
Accelerometer
Sensors
Supported but may not work as expected
AdMob
Monetization
Can not be supported
Assistant
Voice
Not supported yet
Barcode Scanner
Image
Not supported yet
Bluetooth Low Energy
Sensors
Not supported yet
Camera
Image
Not supported on browser on iOS
Gyroscope
Sensors
Supported but may not work as expected
Local Storage
Data
Not supported yet -
stored variables
are supported
Magnetometer
Sensors
Supported but may not work as expected
Map
Location
Not supported yet
Photo Library
Image
Not supported yet
Push Notification
Social
Not supported yet
Share
Social
Email and Phone work, other blocks not supported yet
Speech Recognizer
Voice
Not supported yet
Web Viewer
User Interface
BACK block not supported yet, some Google sites not supported
Email Address
The email address with which you were invited to test the app. This may or may not be the same as the Apple ID associated with your device. If you were invited with a public link, your email address is not shared with the developer.
Name
Your first and last name as entered by the developer when they invited you to test the app using your email address. If you were invited with a public link, your name is not shared with the developer.
Invitation Type
Whether you were invited by email or through a public link.
Status
The status of your invitation: Invited, Accepted, or Installed. This status is refreshed when you accept or install a beta build.
Installs
The number of times you've installed a beta build.
Sessions
The number of times you've used a beta build.
Crashes
The number of crashes per beta build.
App Name
The name of the app you are testing.
App Version
The most recent version and build that you have access to. This is the number that displays under the app name in the list of apps in TestFlight.
Installed App Version
The version and build you have installed on your device.
Device
The model of your device.
iOS Version
The version of iOS your device is running.
macOS Version
The version of macOS your device is running.
Language
Your device language.
Carrier
Your wireless service provider.
Time Zone
The time zone your device is set to.
Architecture
The type of Central Processing Unit (CPU) for your device.
Connection Type
Whether you were connected to Wi-Fi, cellular, or not connected at the time that the feedback was sent, and your network type.
Paired Apple Watch
The model and watchOS version of the paired Apple Watch, if applicable.
Screenshots
The screenshots you shared when providing feedback.
Comments
The comments you shared when providing feedback.
App Uptime
The length of time the app was open and running at the time the feedback was sent.
Disk Free
The amount of disk space you had available when you sent feedback.
Battery
Your battery level at the time the feedback was sent.
Screen Resolution
The screen resolution of your device.
Crash Logs
Symbolicated crash logs. This includes information about how long the app was running before it crashed.
Compatible with Thunkable | Not compatible with Thunkable |
Browser | Chrome, Firefox or Safari | Microsoft Internet Explorer or Edge Web Browser |
Cookies | Cookies enabled in the browser | Cookies disabled in the browser |
AdBlockers | No AdBlockers extensions or add-ons | AdBlockers extensions or add-ons |
Kaspersky Antivirus | Either disabling Kaspersky Lab Antivirus completely or whitelisting Thunkable.com | Kaspersky Lab Antivirus software |
Font Name |
normal |
notoserif |
sans-serif |
sans-serif-light |
sans-serif-thin |
sans-serif-condensed |
sans-serif-medium |
serif |
Roboto |
monospace |
Academy Engraved LET |
AcademyEngravedLetPlain |
Al Nile |
AlNile-Bold |
American Typewriter |
AmericanTypewriter-Bold |
AmericanTypewriter-Condensed |
AmericanTypewriter-CondensedBold |
AmericanTypewriter-CondensedLight |
AmericanTypewriter-Light |
Apple Color Emoji |
Apple SD Gothic Neo |
AppleColorEmoji |
AppleSDGothicNeo-Bold |
AppleSDGothicNeo-Light |
AppleSDGothicNeo-Medium |
AppleSDGothicNeo-Regular |
AppleSDGothicNeo-SemiBold |
AppleSDGothicNeo-Thin |
AppleSDGothicNeo-UltraLight |
Arial |
Arial Hebrew |
Arial Rounded MT Bold |
Arial-BoldItalicMT |
Arial-BoldMT |
Arial-ItalicMT |
ArialHebrew |
ArialHebrew-Bold |
ArialHebrew-Light |
ArialMT |
ArialRoundedMTBold |
Avenir |
Avenir Next |
Avenir Next Condensed |
Avenir-Black |
Avenir-BlackOblique |
Avenir-Book |
Avenir-BookOblique |
Avenir-Heavy |
Avenir-HeavyOblique |
Avenir-Light |
Avenir-LightOblique |
Avenir-Medium |
Avenir-MediumOblique |
Avenir-Oblique |
Avenir-Roman |
AvenirNext-Bold |
AvenirNext-BoldItalic |
AvenirNext-DemiBold |
AvenirNext-DemiBoldItalic |
AvenirNext-Heavy |
AvenirNext-HeavyItalic |
AvenirNext-Italic |
AvenirNext-Medium |
AvenirNext-MediumItalic |
AvenirNext-Regular |
AvenirNext-UltraLight |
AvenirNext-UltraLightItalic |
AvenirNextCondensed-Bold |
AvenirNextCondensed-BoldItalic |
AvenirNextCondensed-DemiBold |
AvenirNextCondensed-DemiBoldItalic |
AvenirNextCondensed-Heavy |
AvenirNextCondensed-HeavyItalic |
AvenirNextCondensed-Italic |
AvenirNextCondensed-Medium |
AvenirNextCondensed-MediumItalic |
AvenirNextCondensed-Regular |
AvenirNextCondensed-UltraLight |
AvenirNextCondensed-UltraLightItalic |
Bangla Sangam MN |
Baskerville |
Baskerville-Bold |
Baskerville-BoldItalic |
Baskerville-Italic |
Baskerville-SemiBold |
Baskerville-SemiBoldItalic |
Bodoni 72 |
Bodoni 72 Oldstyle |
Bodoni 72 Smallcaps |
Bodoni Ornaments |
BodoniOrnamentsITCTT |
BodoniSvtyTwoITCTT-Bold |
BodoniSvtyTwoITCTT-Book |
BodoniSvtyTwoITCTT-BookIta |
BodoniSvtyTwoOSITCTT-Bold |
BodoniSvtyTwoOSITCTT-Book |
BodoniSvtyTwoSCITCTT-Book |
Bradley Hand |
BradleyHandITCTT-Bold |
Chalkboard SE |
ChalkboardSE-Bold |
ChalkboardSE-Light |
ChalkboardSE-Regular |
Chalkduster |
Chalkduster |
Cochin |
Cochin-Bold |
Cochin-BoldItalic |
Cochin-Italic |
Copperplate |
Copperplate-Bold |
Copperplate-Light |
Courier |
Courier New |
Courier-Bold |
Courier-BoldOblique |
Courier-Oblique |
CourierNewPS-BoldItalicMT |
CourierNewPS-BoldMT |
CourierNewPS-ItalicMT |
CourierNewPSMT |
Damascus |
DamascusBold |
DamascusLight |
DamascusMedium |
DamascusSemiBold |
Devanagari Sangam MN |
DevanagariSangamMN |
DevanagariSangamMN-Bold |
Didot |
Didot-Bold |
Didot-Italic |
DiwanMishafi |
Euphemia UCAS |
EuphemiaUCAS-Bold |
EuphemiaUCAS-Italic |
Farah |
Futura |
Futura-CondensedExtraBold |
Futura-CondensedMedium |
Futura-Medium |
Futura-MediumItalic |
Geeza Pro |
GeezaPro-Bold |
Georgia |
Georgia-Bold |
Georgia-BoldItalic |
Georgia-Italic |
Gill Sans |
GillSans-Bold |
GillSans-BoldItalic |
GillSans-Italic |
GillSans-Light |
GillSans-LightItalic |
GillSans-SemiBold |
GillSans-SemiBoldItalic |
GillSans-UltraBold |
Gujarati Sangam MN |
GujaratiSangamMN |
GujaratiSangamMN-Bold |
Gurmukhi MN |
GurmukhiMN-Bold |
Heiti SC |
Heiti TC |
Helvetica |
Helvetica Neue |
Helvetica-Bold |
Helvetica-BoldOblique |
Helvetica-Light |
Helvetica-LightOblique |
Helvetica-Oblique |
HelveticaNeue-Bold |
HelveticaNeue-BoldItalic |
HelveticaNeue-CondensedBlack |
HelveticaNeue-CondensedBold |
HelveticaNeue-Italic |
HelveticaNeue-Light |
HelveticaNeue-LightItalic |
HelveticaNeue-Medium |
HelveticaNeue-MediumItalic |
HelveticaNeue-Thin |
HelveticaNeue-ThinItalic |
HelveticaNeue-UltraLight |
HelveticaNeue-UltraLightItalic |
Hiragino Mincho ProN |
Hiragino Sans |
HiraginoSans-W3 |
HiraginoSans-W6 |
HiraMinProN-W3 |
HiraMinProN-W6 |
Hoefler Text |
HoeflerText-Black |
HoeflerText-BlackItalic |
HoeflerText-Italic |
HoeflerText-Regular |
Iowan Old Style |
IowanOldStyle-Bold |
IowanOldStyle-BoldItalic |
IowanOldStyle-Italic |
IowanOldStyle-Roman |
Kailasa |
Kailasa-Bold |
Kannada Sangam MN |
KannadaSangamMN |
KannadaSangamMN-Bold |
Khmer Sangam MN |
Kohinoor Bangla |
Kohinoor Devanagari |
Kohinoor Telugu |
KohinoorBangla-Light |
KohinoorBangla-Regular |
KohinoorBangla-Semibold |
KohinoorDevanagari-Light |
KohinoorDevanagari-Regular |
KohinoorDevanagari-Semibold |
KohinoorTelugu-Light |
KohinoorTelugu-Medium |
KohinoorTelugu-Regular |
Lao Sangam MN |
Malayalam Sangam MN |
MalayalamSangamMN |
MalayalamSangamMN-Bold |
Marker Felt |
MarkerFelt-Thin |
MarkerFelt-Wide |
Menlo |
Menlo-Bold |
Menlo-BoldItalic |
Menlo-Italic |
Menlo-Regular |
Mishafi |
Noteworthy |
Noteworthy-Bold |
Noteworthy-Light |
Optima |
Optima-Bold |
Optima-BoldItalic |
Optima-ExtraBlack |
Optima-Italic |
Optima-Regular |
Oriya Sangam MN |
OriyaSangamMN |
OriyaSangamMN-Bold |
Palatino |
Palatino-Bold |
Palatino-BoldItalic |
Palatino-Italic |
Palatino-Roman |
Papyrus |
Papyrus-Condensed |
Party LET |
PartyLetPlain |
PingFang HK |
PingFang SC |
PingFang TC |
PingFangHK-Light |
PingFangHK-Medium |
PingFangHK-Regular |
PingFangHK-Semibold |
PingFangHK-Thin |
PingFangHK-Ultralight |
PingFangSC-Light |
PingFangSC-Medium |
PingFangSC-Regular |
PingFangSC-Semibold |
PingFangSC-Thin |
PingFangSC-Ultralight |
PingFangTC-Light |
PingFangTC-Medium |
PingFangTC-Regular |
PingFangTC-Semibold |
PingFangTC-Thin |
PingFangTC-Ultralight |
San Francisco |
Savoye LET |
SavoyeLetPlain |
Sinhala Sangam MN |
SinhalaSangamMN |
SinhalaSangamMN-Bold |
Snell Roundhand |
SnellRoundhand-Black |
SnellRoundhand-Bold |
Symbol |
Tamil Sangam MN |
TamilSangamMN-Bold |
Telugu Sangam MN |
Thonburi |
Thonburi-Bold |
Thonburi-Light |
Times New Roman |
TimesNewRomanPS-BoldItalicMT |
TimesNewRomanPS-BoldMT |
TimesNewRomanPS-ItalicMT |
TimesNewRomanPSMT |
Trebuchet MS |
Trebuchet-BoldItalic |
TrebuchetMS-Bold |
TrebuchetMS-Italic |
Verdana |
Verdana-Bold |
Verdana-BoldItalic |
Verdana-Italic |
Zapf Dingbats |
ZapfDingbatsITC |
Zapfino |
Bugs are features or functionality on our platform that don't work as expected. Product Feedback is input shared about a use case or capability that you would like to have that isn't currently available in Thunkable.
We value your feedback! While we cannot implement every request, and sometimes bugs take longer than we’d all like to get resolved, the input we receive from our amazing community of Creators plays a key role in our product roadmap decisions and ongoing platform improvements.
In an effort to consolidate feedback and reported bugs as much as possible, we are sunsetting the “Issues” section of our Github account, and asking Creators to continue posting in the Community (note: please check to see if your request or issue has already been submitted before making a new post):
Share product feedback using the Feedback category
Please share as much detail as possible about your use case and what challenges you've experienced. This will help consider the best possible solutions for all Creators!
Report bugs using the Issues/Bugs category;
If you’re on a Pro plan or above, you can also report bugs through the Support option when you’re on a Project page in Thunkable
Please describe the issue you're experiencing in as much detail as possible, and the steps you took before hitting the issue. Share project copy links and/or screenshots if possible.
If you have previously submitted issues and/or commented on submitted issues on Thunkable's Github account, please know that our Product team has reviewed and considered these submissions and we greatly appreciate your feedback!
Tips to get the most from your Thunkable Account
The size of your Thunkable project is generous, but finite. Projects created with free accounts need to be slightly smaller, while PRO subscribers will have a more generous allowance of project storage but in either case you will want to make the most out of every megabyte.
You can find a table of project sizes here:
Sometimes there's simply no option left other than to go back through your app and make it more efficient. Some tips for refactoring your app include:
Depending on when you need an asset, it might make sense to store it in the cloud instead. Using cloud storage in your app will not have any impact on your local project size. Thunkable provides multiple third-party integrations, including , , and , as well as our own for smaller pieces of data.
Reduce block count by creating
Use to perform repetitive tasks
Use as much as possible
For the app developer today, deciding what mobile device to design for is challenging. On Android alone, there are thousands of different devices that are in popular use today. On iOS, there are still 8 different iPhone sizes and 4 different iPad sizes.
By sizing your components optimally, you can support as many screen sizes and resolutions appropriately across platforms in a single project.
The following properties are available to all visible components in the Height
and Width
properties. In these definitions, a parent component is a Screen, Row or Column that contains the component.
Relative size is your best friend for almost all elements since it will auto-scale elements to the screen. In some cases, where there are fixed dimensions
Image with fixed dimensions and resolutions can be especially difficult to size. We recommend a simple approach that should work in most cases.
Upload or reference images with a minimum resolution (this varies by image size and device)
Set the height and width in relative size
Set the resize mode property to either cover
or contain
(see below). This will autosize your image even if the dimensions of the image change
To ensure that the text is not cut off on the screen, in most cases we recommend using Fit contents
to set the height of Labels and Text Inputs
Despite the beauty of relative size, there are a few cases where setting elements in absolute size is recommended or required
Since a Scrollable Screen has a height that is greater than the size of the Screen, the height of the elements must be set to Absolute size
or fit contents.
You cannot use relative sizing or 'fill container' for components in a scrollable Screen or Column.
You can see an example of a Scrollable Screen in the Design Templates
Property
Description
Relative size
Sets the size as a percent of the parent component
Absolute size
Sets the size in pixels. The screen size of the Phone Previewer in the Designer is by default set to 500 px by 280 px but that may not reflect the size of your phone
Fit contents
Sets the height/width of the element to the height/width of its contents
Fill container
Sizes an element to fill its parent component
Component
Recommendation
Image or Button (with Image)
Use Relative size
for height and width; Set Resize Mode property to cover
or contain
; You may also need to reference / upload images with a minimum resolution to not appear blurry on higher resolution screens
Labels and Text Input
Use Relative size
for width; Fit contents
for height
Row and Column
Usually Fill container
for height and width; Relative size
otherwise
All Other Components
Use Relative size
for height and width