Step 1. Sign in to Thunkable

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.

Step 2. Check out your Thunkable Projects page

Choose how you want your projects to be laid out. Search and filter your projects.

Step 3. Try Our Tutorials

They exist! They are helpful! Thunkable tutorials cover both basic concepts and advanced features.

Step 4. Download the Thunkable Mobile App

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.

Step 5. Components

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.

Step 6. Blocks

The language of blocks is a visible programming language. By dragging and dropping blocks together, you can program your app.

One Product, Two Interfaces

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

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

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.

Additional Support Options

In addition to our Thunkable Docs, we are also proud to offer you the following resources:

1. Thunkable Academy Not sure where to get started with the Drag and Drop interface? Check out the Thunkable Academy!

2. Community Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!

3. Instructional Videos Enjoy instructional videos? Check out our library of tutorials available on YouTube.

4. 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.

Pricing and Membership

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.

Sign Up

If you've never used Thunkable before then you should visit our sign up 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.

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.

Sign in‌

Returning users can go directly to our sign in page to sign back into their Thunkable account. You can Sign in with Google, Sign in with Apple or Sign in with email.

Sign in with Google

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.

Sign in with Apple

This button will sign you in automatically with your Apple account.‌

Sign in with Email

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.

Next Steps

To learn more about using Thunkable, take a look at some of our tutorials.

Once you're ready to try out your app, we have a helpful guide for live testing.

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:

Blocks

Take Photo

Location Components

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 Creator Lounge.

Animals

Lion

Poodle

Objects

Computer

In-platform Tutorials

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 .

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 section.

Thunkable Public Gallery

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.

How to use the Thunkable Gallery

When browsing the Gallery, here are three things that you can do with public projects:

1. View a Project Click to open any project on the Public Gallery to view an app's design or programming blocks.

2. Preview a Project After downloading the , you can use the app to preview any public project directly on your mobile device.

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.

The User Interface (UI) category is a collection of all the components you need to design the look and feel of your app.

UI Components are visible components that users can move, click on, and type in. Each UI component is described in greater detail on its own page.

User Interface Components

Video Tutorial

Loading Icon Overview

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.

Style the Loading Icon

Showing and Hiding the Loading Icon

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.

Properties

Color

Height

Size

Visible

Width

See Also

You can use the 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.

The image category contains components to upload pictures to your users device and to the cloud. It also has components for displaying pictures and animations.

Image Components

Blocks

Select Photo

Opens the photo library and allows the user to select and upload a photo.

Outputs

Monetization Components

PDF Reader Overview

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

Upload PDF

Simply upload your PDFs into the File property and voila!

Once you upload the PDF, you will be able to view it in your app and pinch to zoom in.

Properties

Computed Height and Width

File

Visible

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.

Adding Navigators

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.

Name Your Drawers

To name your drawers, click on each screen and navigate to the Drawer label on the bottom right corner of the properties section.

Drawer Navigator Properties

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.

Barcode Scanner Overview

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.

Blocks

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.

Scan

Outputs

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.

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.

Blocks

Upload

Inputs

Outputs

Video Overview

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.

Set Video

There are a few ways you can set a video source in your app:

1. Upload a video to your app. Be careful of the Thunkable 50 MB app size limit

2. 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.

Edit Video size

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

Set to Auto-Play

To set a video to play automatically, just toggle the Play property to true

Blocks

Set Video

Get Video

See what video is currently set as the Video component's source

Media DB Overview

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.

Getting Started

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

Create a free Cloudinary account

Connect your Cloudinary cloud to Thunkable

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.

Upload Media

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 if do else block to make sure that the user has attached an image and that neither the photo library nor the mediaDB components encounter an error.

Get User's Current Location

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

Functions

Get Current Location

Properties

Enable High Accuracy

Maximum Age

Local Storage Overview

This storage option is useful for saving simple info on the device, especially helpful for remembering user's setting from a previous session.

Save Data

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

Get Data

Local Storage

You can use the Local DB and the Local Storage components to store data on your users device.

Cloud Storage

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.

API

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.

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.

Adding a Canvas

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

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.

Gravity

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.

Stage Scaling Mode

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.

Stage Alignment

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.

Touch Drawing

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.

Multiple Stages

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.

Distance Between Sprite and Sprite

Get the distance between two sprites

Distance Between Sprite and Coordinate

Get the distance between a sprite and a point

Angle From Sprite to Sprite

Get angle between sprites

Closest Instance of Sprite Type to Sprite

Gets the closest instance of the provided sprite type to the given sprite

The Canvas Label is a piece of text that can be placed onto your Stage.

Adding a Canvas Label to your app

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.

Canvas Label Properties

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

Comparison Blocks

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.

And/Or blocks

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.

Not

Inverts the value of a true/false statement. Not true = false, not false = true.

Value Blocks

Value blocks can be used to set the value of a variable. They can be used in conjunction with any of the above blocks.

Point

Point Sprite Towards Pointer

Turn the sprite in the direction of where the user has tapped on the canvas

Point Sprite Towards Sprite

Turn a sprite in the direction of another sprite

Angle

Set or Change Sprite's Angle

Set or change the angle of the sprite

Get Sprite's Angle

Get the angle of the sprite

Angular Velocity

Set or Change Sprite's Angular Velocity

Set or change the angular velocity of the sprite

Get Sprites Angular Velocity

Get the angular velocity of the sprite

Create Sprite Type

Adds an instance of the sprite type at the x and y location

Remove Sprite

Remove the selected sprite from the canvas

Get all Sprites in Sprite Type

Get a list of all of the sprites of the selected sprite type

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 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.

A project is a place where your designs, files and blocks come together to create Android and iOS apps. There are three 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 for apps.

Other articles in this section

Public Projects

Public projects are included in the 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

Private projects are just that, private. They can only be seen by their app creator and do not get included in the Only Thunkable users with a paid plan can create and share private projects.

Making Projects Public or Private

To make your projects public or private, clicking the vertical ellipsis associated with a project reveals its project menu. You can then select Project Detail Page and switch to change who can view your project.

You can also click into your app settings in your project and toggle the switch to set your project to public or private.

Read-Only projects

Private projects become Read-Only projects when a Thunker's paid 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.

What's a Component?

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.

Visible Components

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

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.

Finding Components

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

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.

From Idea to 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.

Navigator Tutorial

Arrange Screens with Navigators

Most apps navigate through screens using navigators. Click to watch a tutorial on how to use each navigator.

Here are three examples of navigators that you can use on Thunkable.

1. 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.

Layout Components

Adding Navigators

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.

Tab Navigator Properties

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:

Simple Properties

• 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.

Adding Labels and Icons to Your Tab

When designing a tab, you can use words or images to guide users to different screens.

Step by Step Instructions

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.

Bottom Tab Navigator Visibility

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.

Name Your Screens

The Stack navigator creates a header bar across all screens. You can add a title to this bar by navigating to the Screen properties

Stack Navigator Properties

Set Your Screen Transitions

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:

Hide Your Header

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

Overview

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.

Blocks

Functions

Get File

With Thunkable's gaming components, you can build games and touch interface experiences.

Canvas

The Canvas contains the Stage where your Sprites are displayed. Read more in the .

Sprites

Sprites are the elements on your stage that represent characters, obstacles, and more. Read more in the

Canvas Label

Use the Canvas Label to display text on your Canvas. Read more in the docs.

Gaming Blocks

You can use blocks to change the appearance and behavior of your Stage and Sprites. Read more in the

Example Games

Tutorials: Snap to Place Games

Properties

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.

Blocks

Functions

Translate

Translates a given piece of text from Source Language to Target Language. Returns result.

Properties

Set/Get Source Language

Set source language using drop-down menu. Can also be set with blocks or . Any language code from can be used.

Get source language.

Set/Get Target Language

Set target language using drop-down menu. Can also be set with blocks or . Any language code from can be used.

Get target language.

Set/Get Yandex Key

Set Yandex API Key.

Get Yandex API Key.

Call Phone Number

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.

Send Text Message

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.

Send an email

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.

Share a Text or Image

Share a Text

Opens a menu of apps that the app user can choose from to share the given message.

Design Video

Blocks Video

Share an Image

Opens a menu of apps that the user can choose from to share the given image.

Video Tutorial

Animation Overview

The Animation component powered by makes adding animations as easy as adding images. For designers, animations can be created in or and imported as a .json file.

For the rest of us, there is a large and growing community of designers who have that you can easily add to your app.

Getting Started

Edit Animation size

For more information on sizing in your app, please see our

Events

You can trigger some action to happen when the animation is clicked using the 'when Animation Click' event.

There is a predefined set of colors in the blocks palette

Set RGBA Color

As pictured below, the easiest way to set a specific color is using a text block with the syntax rgba(r,g,b,a)

Set RGB Color

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

Set HSV Color

A popular alternative to setting RGB color is to set Hue, Saturation and Value colors with the block below

Set Hex Color

You can use a block to include a hex value for your preferred color:

Properties

Default Language: Set component to recognize text and speak in this language. Can be changed in blocks.

Blocks

Functions

Listen

Outputs

Listen with Partial Result

Outputs

Properties

Set/Get Default Language

Set default language to item from drop-down menu. Can also use block or to set language.

Get current language of Speech Recognizer component.

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 our Builder plan to get 1 GB of space for your projects or to Advanced to get unlimited space.

Limits

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.

Operating Systems (OS)

Thunkable recommends and actively supports mobile operating systems that receive security updates.

This includes iOS 16+ and Android 12+.

Thunkable apps are often compatible with older OS, but this is not guaranteed.

Account storage limits

You can view your total account storage size in your account settings.

Free Thunkable accounts have 100MB of storage.

Builder Thunkable accounts have 1GB of storage. Advanced Thunkable accounts have unlimited storage.

Read more about Thunkable plans 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.

Maximum recommended asset size

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.

Naming Your Assets

Thunkable recommends using file names that do not contain whitespace characters.

Here are two naming methods we recommend:

1. 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

2. 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

The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking.

Adding Navigators

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.

Tab Navigator Properties

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:

Simple Properties

• 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.

Advanced Properties

• 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.

Adding Labels and Icons to Your Tabs

When designing a tab, you can use words or images to guide users to different screens.

Step by Step Instructions

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.

Enable Swiping

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.

Video Tutorial

Set the Size of a Row

For more information on sizing in your app, please see our introduction here​

Space the Elements Horizontally

The Horizontal Alignment property allows you to space elements in a Row horizontally

Space the Elements Vertically

The Vertical Alignment property allows you to space elements in a Row vertically

Add a Background Color or Picture

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

Local DB Overview

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.

Add a Table of Data to Your App

The first thing you want to do after you add the component is to edit the data table.

Get data from your table

Update data in your table

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 Airtable 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 stored variables to store data locally, either as strings of text or as objects with multiple properties. Date stored with the Data Sources component is also persistent across app sessions.

Speed

Set Speed To

Set the X or Y value for the sprite's speed to a particular value.

Change Speed By

Change the X or Y value for the sprite's speed by a specific amount.

Get Speed

Get the X or Y value for the sprite's speed.

Set Velocity

Set or change the sprite's velocity, by a given amount, in the pointing or moving direction.

Position

Move Sprite To

Move the sprite to the x and y location specified in the block

Set Sprite Position

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 Sprite Position

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

Pointer

Get Pointer Value

Get the X, Y, or Angle of the where the user tapped on the canvas

Behavior

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 Draggable or Passable

Set the draggability or passability of the sprit

Get Draggable or Passable

Get draggability of the sprite

Stop All Sprites

Stop all sprites that are moving.

Examples

Move Sprite to Pointer

When the user clicks on the canvas these blocks will move the Sprite1 to the location that was touched.

Record a Video

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.

Functions

Timed Video Recording

Untimed Video Recording

Properties

Set Camera

Select a camera to film with. You can record with the front or back camera of your device.

Show Current Camera

Returns the camera currently being used to record. Will return front or back.

Text

Set Text

Set the text being displayed in the Canvas Label.

Get Text

Get the text of the Canvas Label.

Position

X Co-ordinate

Set X

Set the X Co-ordinate of the top-left pixel of the Canvas Label.

Get X

Get the X Co-ordinate of the top-left pixel of the Canvas Label.

Y Co-ordinate

Set Y

Set the Y Co-ordinate of the top-left pixel of the Canvas Label.

Get Y

Get the Y Co-ordinate of the top-left pixel of the Canvas Label.

Appearance

Font Size

Set Font size

Set the font size of the text of the Canvas Label.

Get Font Size

Get the font size of the text of the Canvas Label.

Text Color

Set color

Set the color of the text of the Canvas Label.

Get Color

Get the color of the text of the Canvas Label.

Background Color

Set Background Color

Set the color of the background of the Canvas Label.

Get Background Color

Get the color of the background of the Canvas Label.

Location

Move to Stage

Move the Canvas Label to the named Stage.

Alerts are useful components for displaying important messages while users are in the app itself

One Button Alert

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 alert

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:

Button List: Alert with three or more buttons

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 of .

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.

Date Input Overview

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

Getting Started

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.

Set the Date Format

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

Save the Date

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.

Events

Date Picked

Functions

Get Date

Get Day

Get Month

Get Year

Launch Picker

Properties

Background Color

Color

Computed Height and Width

Font Size

Font Style

Font Weight

Style

Text Align

Visible

Time Input Overview

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

Getting Started

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.

Set the time format

You can set the format of the time by simply choosing your desired format from the Style property

Save the time

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.

Events

Time Picked

Functions

Get Hour

Get Minute

Get Time

Launch Picker

Properties

Background Color

Color

Computed Height and Width

Font Size

Font Style

Font Weight

Style

Text Align

Visible

Video Tutorial

Set the Size of a Column

For more information on sizing in your app, please see our

Space the elements vertically

The Vertical Alignment property allows you to space elements in a Column vertically

Space the elements horizontally

The Horizontal Alignment property allows you to space elements in a Column horizontally

Add a background color or picture

Background Picture Resize Mode

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

Enable scrolling

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.

Sprites vs Sprite Types

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.

Adding Sprites Types to your app

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.

Adding Sprites 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.

Sprite Type Properties

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 .

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.

Sprite Properties

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.

Example: Different Types of Sprites

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.

Text Value

String

The most basic but most often used text block is below. You can type into this text block, or leave it empty.

Join

Often, you'll want to join text values together with the join block:

Newline

You can use the newline block to add a line break in a piece of text.

Reformat Text

Use these blocks to change the content or formatting of your text. These blocks will return the reformatted text.

Set case

Set a piece of text to the selected case:

Trim Spaces

Trim blank spaces from the left side, the right side, or both sides of a string of text:

Replace all

Find and replace all occurrences of a substring within a string.

Analyze Text

Is Empty

The block below tests whether the text value is empty. Returns true or false

Get letter

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.

Get substring

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.

Find first/last occurrence

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.

Does string contain

Checks if a string contains a substring. Returns true or false.

Get length of string

Returns length of a given string

Blocks

Start Timed Recording

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.

Outputs

Start Recording/Stop Recording

Create an untimed recording.

Start Recording Output

Stop Recording Outputs

Image Overview

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

Set Image

There are a few ways you can display an image in your app:

1. Upload a picture to your project Files:

2. Provide a link in the Image properties

3. 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.

Edit Image size

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

Resizing the Image

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

Style the Image

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

Add spacing

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.

Events

Click

This event handler is fired when the user clicks on the image.

Properties

Computed Dimensions

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.

Height

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"

Picture

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

Resize Mode

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

Visible

The set and get visible blocks are used to show or hide the entire image component. Acceptable values are:

• True

• False

Width

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"

Realtime DB Overview

This storage option is useful for anything from saving game high scores to tracking work credit, powered by Firebase.

Set up Your Own Firebase account

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.

Create your free Firebase project and account

Edit Database Rules

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

Connect Your Firebase Project with Thunkable

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

Test Save to your Database

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.

Save Data

Get Data

Update Data in Real-time

Separating Your Data into Project Buckets

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.

Description

The magnetometer is used to measure magnetic flux density. This is the total magnetic field passing through a given area, per metre squared, $\frac{T \cdot m^2}{m^2}$ . The sensor will returns values with units of microtesla $\mu T$ for each of the three coordinate axes; x, y and, z. The magnetic flux density is quite similar to magnetic field strength.

‌

Blocks

Events

When Magnetometer Changes

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.

Functions

Call X

Returns flux density, in the x direction, expressed in $\mu T$

Call Y

Returns flux density, in the y direction, expressed in $\mu T$

Call Z

Returns flux density, in the x direction, expressed in $\mu T$

Call Heading

Returns a value between 0 and 360 which denotes the user's direction relative to the Earth's geographic North Pole

Properties

Enabled

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.

Getting Started

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, $m/s^2$.

Blocks

Events

Shaking

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

Changes

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.

Functions

Get Acceleration on X, Y, Z axes

You can get the values for xAcceleration, yAcceleration and zAcceleration at any time with the following blocks.

Properties

Enabled

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.

Sensitivity

You can use the Sensitivity blocks to set the sensitivity of the Accelerometer and get its current level of sensitivity.

Description

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.

Blocks

Events

when Gyroscope Changes

Whenever the phone is turned, or rotated, the Changes event will fire.

Properties

By default the gyroscope sensor is turned on, but the enabledproperty can be used to read and write new values to the gyroscope, thus allowing you to turn it on or off.

Overview

While the Data Viewer List and Data Viewer Grid have different layout options, you may want to design a custom layout for your data. This can be achieved with Row and Column components.

Video Tutorial

How To Use a Custom Layout in Your App

Design your Custom Layout

Use a Row or Column 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 Labels: TitleLabel, DescriptionLabel, and PriceLabel. The second Column contains an Image, ProductImage, and a Rating, called ProductRating. These components will be referenced in subsequent screenshots in this document.

Save your Custom Layout

Select your Parent Row/Column and click the 'Save as Data Viewer Layout' button.

Basic

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

Advanced

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.

Use Your Custom Layout

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 Data Viewer List. If it was saved with the Layout Type Grid, it can be used with the Data Viewer Grid.

Bind Your Data to Your Custom Layout

You can bind the properties of your data to a Data Source.

Basic

With Basic Data Binding, Thunkable will automatically select basic properties of your components to bind to values in your data source.

Advanced

With Advanced Data Binding, Thunkable will allow you to bind the properties that you specified to your data source:

Managing your Custom Data Viewer Layouts

You can manage your custom data layouts by going to your Thunkable homepage at x.thunkable.com/projects and clicking on the Data Viewer Layouts tab at the left of the page. From here, you can edit and delete your custom data layouts.

Numeric Value

Specify Number

Use this block to specify a number you want to use in your app.

Round

You can also round up or down a decimal figure into an integer using the round block

Round to X Decimal Places

You can also round a number to a selected amount of decimal places

Irrational Numbers

There is also a block for irrational numbers like π

Analyze Numbers

Returns true or false based on whether the chosen condition applies to the number

Perform Operations

Constrain 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.

Arithmetic

Perhaps the most often used calculation in an app is addition but this block also supports subtraction, multiplication, division and exponential figures

Get remainder

Returns the remainder when a number is divided by another number.

Trigonometry

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.

Logarithmic values

Introduce Randomness

For games and other apps, it may be important to introduce randomness into your app.

Random Integer

Returns integer between two given integers. Is inclusive of the given integers.

Random Fraction

Returns a random fraction $x$ where $0 ≤ x < 1$

Other Ways to add Randomness to Your Project

The Lists blocks also have blocks for selecting random items from a list of values.

See Also

The Lists blocks have a block for getting certain mathematical values from a List, including sum min, max, averages, and standard deviation.

Compatibility

• 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)

Initial Setup

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 (.)

Google Play Store (Monetize → Products)

Select your product type:

• In-App Product - a one-time purchase

• Subscription - recurring purchases

Read: Earn | Google Play | Android Developers

Apple App Store (In-App Purchase → Manage)

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

Read: In-App Purchase - App Store

Properties

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.

Blocks

For Sale

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.

Purchasing

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.

Purchase History

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.

Testing

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.

App Store (iOS):

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.

Read more about Testflight here.

Play Store (Android):

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").

Navigate to a Screen

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

If 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:

Test

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

Wait the specified amount of time before performing the next action.

Loops

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

Open an Installed App or Website by Link

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.

Sprite Visibility

Set Visibility

Show the selected sprite or hide the selected sprite on the canvas.

Get Visibility

Returns true if the sprite is visible, and false if it is hidden

Sprite Image

Next or Previous Image

Set the sprite's image to the next or previous image in the sprite type's picture list.

Set Image Number

Set the sprite's image to an image in the sprite type's picture list.

Sprite Dimensions

Set Height or Width to

Set the Sprite's height or width.

Change Height or Width by

Change the sprite's height or width.

Get Height or Width

Get the sprite's height or width.

Flip Sprite

Flip Sprite along a specified axis.

Freeze Frame

Stamp

Add freeze frame of sprite in current position.

Drawing

Draw Line

Draw line between two points with specified width and color.

Draw Circle

Draw circle outline at specified point with a given radius.

Draw Filled Circle

Draw filled circle at specified point with a given radius.

Draw Polygon

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 Filled Polygon

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 Drawings

Clear all the drawings on the specified canvas.

Make Image

Get an image of the specified canvas. Returns a base 64 encoded image.

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