When I open my app, I noticed that the dimensions have changed. My app relies heavily on aesthetics and this is a problem for me. Is there any way to prevent this (without removing the Thunkable logo, which I understand requires a subscription)?
Also, I’ve tested two different apps and both freeze midway when moving from the first screen to the other screen. The music stops and neither the ‘home’ or ‘view code’ buttons are responsive. What do I do to prevent this?
Hi @alexcoding7
For the UI issues you are seeing, I would suggest using the Layout component–this component allows for more precise positioning of UI components on an app screen, by allowing you to position UI components dependent on other UI components on the screen.
The issue with the Thunkable Live app becoming unresponsive between switching screens is because of the forever loop that is called when the home screen opens. My assumption is that you are wanting the song to play on repeat here? It seems logical just to put the play call in a forever loop but this isn’t what happens when we do this. Instead, it will try and play the song immediately when the screen opens an infinite amount of times. This is essentially stealing all the memory on your device and causing it to be unresponsive.
To repeat the song playing, you can use a function along with the advanced version of the play sound block.
The small 0.1 wait block is helpful here so that everything on the previous screen can finish and then you can start the sound playing on the next screen.
This should get you where you need to be and not crash the app. Let us know how it goes!
One other thing here, when naming screens, it’s important to just use text. I can understand and appreciate wanting to create a certain aesthetic throughout your app building process and for updating the navigation bar names, but adding in special characters like this can cause issues with the code that is running underneath the hood.
It is not guaranteed to cause on an issue, but you will want to be cautious about it.
Thanks! I solved the freezing issue!
One problem though - I read the docs, but don’t understand how the layout component would prevent the dimensions changing. For example, where do I place the background so that its dimensions don’t change?
@alexcoding7 Can you share any screenshots about this? We may be using different ways to say the same thing.
For the background, the best practice here would be to use the screen properties to change the background of the screen, as opposed to placing an image component and stretching it to the full height and width of the screen.
Without a Layout component, adding a UI component on your screen, it a fixed height and width and be set to a fixed X and Y coordinate. If the device you are using to preview the app has different dimensions than 375x667 (the size of the screen in the design editor), it can look off.
With the Layout component, you can use containers to position the UI components on the screen so that, regardless of screen size, they will render in the same place.
One final thing to consider, you’re making all of the images yourself and that is awesome! But, there are some issues with the sizing of the images. Taking a look at the image below for your copyright declaration, the text is placed at the top of the image and there is a ton of white space below, this can create problems when trying to add the image onto your screen. It will be best to crop some of this image so that you have less white space.
I’ve gone ahead updated your loading page using a Layout component and two vertical containers, I hope this helps in getting a better idea of what we’re talking about on how to use the Layout component to set up your screens.
https://x.thunkable.com/copy/0ffb531972b631cca3f2078a202a44a3
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
