Hello there, Thunkers!
As you voted on, here’s the kickoff for our Thunkable Deep Dive series, focusing on Clone Blocks!
Overview
The clone block creates a duplicate of an existing component in your app. For example, if you have a button on your screen and want to create another one just like it, you can use the clone block to make this.
Why should you embrace Clone Blocks?
-Reduce the loading time
-Spice up your app with more features like buttons, text inputs, checkboxes
-Seamlessly link lists with data from API calls.
So, one way to do it is using a Data Viewer List as we demonstrate here: Thunkable
But wait, there’s a better way! Clone Blocks: Thunkable
Let me know if you have questions!
@marion.dorsett @shrey @longcodes22kpn5 @arulvakharwaladqvht @superqueing5v53 @tatiang
1 Like
I’m curious why the wait is necessary after cloning the components?
I remixed the app, and removed the wait, and those cloned elements are returned as null. Is this an async process? I guess I’m curious as to what creates the latency in rendering the cloned elements.
The X and Y are handled because it’s in a container, but I see how you could use the count iterator to calculate those as desired.
And in my testing calculating the X and Y worked just like I expected… once I got the math right 
Is there any way to directly target a cloned block? Yes
[SOLVED] I created a master list to store the cloned components, which I found out was the components ID. I created sublists for each of my “rows” and stored them in the master list by their numerical index.
Using the Any Component on Click, I was able to setup a loop to identify if the clicked component was in a sublist of my master list and I was able to extract the Text of the label.
[Unexpected Behavior] When testing in the iOS and Android live apps, the UI state reverts to the original state and the cloned blocks are removed when the screen is closed. When I click a different item from my list the screen opens and only the original blocks that are being cloned are visible, because I’ve stored the previously cloned components in a list.
To resolve this, I reset the list variable I created each time the screen is opened, and it resolves the issue with the mobile apps, but the web preview still redraws the cloned components each time, and never resets the UI.
To resolve the issue between the web and device apps, I added a condition to only reset the master list variable if the device matches iOS or Android. Setting this condition also stopped the live app from crashing.
Here are the remaining images that show my block logic.
The wait block allows just a bit of time after each loop so that all of the data can be read and applied via the blocks before attempting the next loop.
1 Like
Ok, thank you for clarifying that.
