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.

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

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

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

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

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.

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

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.

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.

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 .

Your projects Page

You can find your projects page at x.thunkable.com/projects. This is the first page you see when you sign in.

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

Filtering your projects

Search Bar

You can use the search bar to filter your projects by name

Filter public/private projects

are able to create . You can use the Public and Private checkboxes to filter your projects, showing only public projects or only private projects.

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.

On the Project Detail page, you can test out your app, similar to when it has been published as a .

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.

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:

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.

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

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.

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

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 Thunkable Live mobile app, 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.

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

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.

Blocks

Select Photo

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

Outputs

Blocks

Take Photo

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.

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

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

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.

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.

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.

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.

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.

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.

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

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.

This component is powered by . You can get your own server URL and subscription key for Microsoft Azure . You can add these details to your app in the , which you can access by clicking on your app icon.

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.

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:

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

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.

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.

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

Outputs

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.

Google Cloud Translation API Key: If you have your own Google 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.

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

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

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 to create a stop button.

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

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 Label is a piece of text that can be placed onto your .

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

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

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.

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.

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

Remove the selected sprite from the canvas

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

Blocks

Start Timed Recording

Records for a set amount of time in seconds. Can type number of seconds into ghost block. Can also use Math blocks or variables to set this time.

Outputs

Create an untimed recording.

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.

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.

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

Sprites

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

Canvas Label

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

Gaming Blocks

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

Example Games

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.

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.

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

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

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

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 the angular velocity of the sprite

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

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:

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

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 component. You can also save you recorded videos to the cloud with our component. Once you have saved a video to the cloud, you can store the URL as a or in an to make it accessible through the app on other devices.

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.

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 enabledproperty can be used to read and write new values to the gyroscope, thus allowing you to turn it on or off.

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.

Switch Overview

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.

Getting Started

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.

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

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.

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.

Rating Overview

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:

Event Blocks

On Rate

This block fires when a user enters a rating in the Rating component.

Properties

Count

Maximum rating that can be given. Can be an integer between 5 and 10, selected from a drop-down menu.

Direction

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 .

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.

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.

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.

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 .

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:

You can manage your custom data layouts by going to your Thunkable homepage at 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.

Video Tutorial

Set the Size of a Column

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

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

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

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.

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.

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

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.

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

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.

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

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.

Properties

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.

1. Start by creating a variable and set its value to 0 (this will keep track of the time).

2. Add a timer to your project.

3. Add a button that will start and pause the stopwatch.

4. Inside the "when button click" block, add a condition: if the timer is running, pause the stopwatch; if it's not, start it.

• Start by creating a variable and set its value to 5000 to count five minutes.

• Add a timer to your project.

• Add a button that will start and pause the Timer.

• Inside the "when button click" block, add a condition: if the timer is running, pause the Timer; if it's not, start it.

Getting Started

Create your free account and create a new project

Enable Email / Password Sign in

In the Firebase console, navigate to Authentication and the tab "Sign-In Method". Enable Email/Password as shown below.

Connect your Firebase Account with Thunkable

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.

Current Stage

Select which Stage to display in the Canvas.

Stage Appearance

Set Background Color

Sets the background color of the specified Stage.

Get Background Color

Returns the hexadecimal value of the background color for the specified Stage.

Set Frame Color

Sets the color of the Frame for the specified Stage.

Get Frame Color

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

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

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.

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 .

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.

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