A quick Component naming Guide

Tutorials and DIY Guides
1

Hey Thunkers! :wave:

Here’s a very quick guide on intelligently naming your Designer Components. Let’s begin.

1. Know some Abbreviations

Sometimes, a component has a veryyy long name. Ex. BottomTabNavigator, SpeechRecognizer, etc. Abbreviating it, will give us a short-name. Some of the possible abbreviations are listed below -

Screen - scr
Button - btn
Label - lbl
Text Input - txt
List Viewer - lstvw
Web Viewer - webv
Switch - swt
Slider - sld
Alert - alt
Loading Icon - load
Date Input - dti
Time Input - tmi
PDF Reader - pdfvw (PDF viewer)
Row - row
Column - col
Sound - snd
Speech Recognizer - spcr
Assistant - ast
Translator - trns
Image - img
Photo Library - gal (Gallery)
Camera - cam
Barcode Scanner - brscn
Animation - ani
Video - vid
Local Storage - locst
Local DB - locdb
Realtime DB - realdb
Spreadsheet - sheet
Web API - api
Media DB - med
Location Sensor - locsn
Accelerometer - acc
Gyroscope - gyro
Magnetometer - magm
Push Notification - psh
Sign In - auth

2. Name components wisely

After you know appropriate abbreviation for your component, it’s time to name it.
Since Thunkable X does not allows us to set a duplicate name (it’s nice btw), we can set one name for only one component.

A wise name for a component will consist of -

<component_function_name> + <abbreviation> + <underscore ('_')> + <screen_short_name>

Ex. -

image
image
image

Fin.

Thanks for having a look on my quick guide! Hope this helped you :smiley_cat:

Thanks! :blush:
Happy Thunking! :tada:

4 Likes
2

That’s helpful @kartik14! Thanks for sharing this :sparkles:

2 Likes
3

@kartik14 Nice work! I like this. I have been sticking to component naming like this

componenttype.Function

i leave off the screen name since we dont have to view all of our component for all screens in 1 component tree. this helps save stuff to read through for me while allowing me to quickly scan all the items to quickly discriminate and edit!

button.Save
label.ShowScore
app.VariableName
stored.VariableName
_localvariablename

etc.

1 Like
4

Thanks a lot @joannietw! :blush:

Thanks @jared, that idea seems nice too! :grinning:

Also, feel free to edit my guide with the image button! :star2:

Thanks a lot! :blush: