Forgive me in advance for a question that may be construed as "asking for advice" instead of a purely technical problem. Knowing StackOverflow, the response may be swift and brutal.
I've just finished building out a cross platform (iOS and Android) app with React Native, and am in the last stages of preparing it for production. One of the tasks that needs to get done is splash screens.
Unfortunately, I have some pretty complicated design requests. I have an example app to work off called Awair.
Here is the basic idea: the splash screen has a logo on it. The initial React Native screen has the exact same logo on it, with the exact same dimensions, in the exact same placement.
The net effect is that the splash screen seamlessly fades into the actual running RN app. After that fade, we'll animate the logo upwards, etc (unrelated to this question).
Here's an example:
Splash screen:
Initial React Screen:
Combined Effect:
Obviously splash screens are almost entirely platform specific, and relatively annoying to set up. It seems to me that the hardest part of this functionality is ensuring the logo in the splash screen and the logo in the initial React screen are the same size, because one is controlled by RN abstractions and the other is a pure platform UI Image View.
Has anyone built anything like this in React Native? Any advice?
Related
I've implemented buttons and other UI elements for React Native using 9-slice scaling technique. However, I've stumbled on a problem on Android, which affects some devices - seemingly depending on their pixel ratio or pixel density. What happens is that the views containing the pieces overlap each other. I can't rely on negative margins and such to cover up the gaps as a workaround because I need to support opacity - so that won't work if they overlap each other.
How can I solve this? I've tried all kinds of methods of using React Native's PixelRatio, but I'm out of ideas.
I've posted this issue in React Native's Github repo as well (see https://github.com/facebook/react-native/issues/34654), but I'm looking for solutions since I don't know when/if that will be resolved.
Below is a simplified reproducible example in Snack, along with a screenshot depicting the problem: https://snack.expo.dev/#insats/346e2f
Here's a more complex snack which uses a 9-slice technique: https://snack.expo.dev/#insats/android-gaps-between-views-flex
On Android, when translating off-screen components onto the screen, it takes a very long time. When the function to bring them on-screen is triggered, it seems to completely block the main thread for (almost a) second. I am only rendering 100 simple elements and iOS can handle it even with a much greater pixel density. On Android, this issue is reproducible for me even on a high end phone.
I have created a minimal repo here: https://github.com/darajava/render-bug-android-react-native
See these 2 videos for a comparison of how Android vs iOS handles it:
Android: https://youtu.be/KBP2HHMzAiU
iOS: https://youtu.be/fw-Prh_9HhY
I created a react native issue here: https://github.com/facebook/react-native/issues/30987
Am I doing something wrong? Is this a bug in RN? If so, is there a workaround I can use?
Is it possible a mobile app working like a background process to blur or fade the screen of the smartphone, no matter what active app is being displayed? Does the android and ios APIs expose such features?
Definitely not on Android. There are accessibility services which do modify the screen regardless of which app is visible but those are mostly first party applications. It would be a pretty big security risk issue if apps could block/blur the screen of other apps.
That being said you can create an overlay which lets touches through. I'm not sure if you can get the actual pixels of the UI behind the overlay and run a blur yourself but you can draw over top of elements on the screen (using accessibility APIs you can get the positions of UI elements) which may suit your needs depending on what exactly you're trying to achieve.
I was wondering if there was a way I can have part of my screen in android constantly display something, even something as simple as a piece of text or an image. I am fairly familiar with Android Development, so if there is a way to make an app that does that, it'd be great.
To be precise, I want the top third of my screen to stay constant, and the bottom two-thirds to work normally such that I can do anything I can normally do
Edit: I want the top third to display the constant text/image even if I exit the app. A widget is a good idea. I'll look more into that.
So i was building this UI for an app in Unity to be deployed on Android Platform.
Here is the preview from the Game Window :
But when i build and run the app on my device, it shows this :
The header log is anchored on Top, the title is anchored on Center and the buttons are anchored on Bottom.
Here is the hierarchy of the components :
Im new to Unity and NGUI so i really dont know what's wrong with this. Thank you guys.
Different behavior is probably caused by different resolution/ration on your device in compare to your editor window. To emulate such behavior in the unity editor, you can force resolution/ration in your game window, or you can add your specific device resolution (what I actually recommend for you to do as a good start):
When you experiment with few of them, you will see that your interface is behaving in different ways.
To change that behavior on different screens, you can check your UIRoot options, especially Scaling, see UIRoot documentation.
Another good places to start is NGUI forum's topic concerned in handling different resolutions or official video about NGUI anchors.
Hope that this will guide you to perfect cross-device interface design.
I think your problem is configuring how is going to work NGUI with your sprites. There are 2 things you could do:
Use a pixel perfect resolution: This will maintain the perfect size of the sprite, and will look the same on every platform (this causes some things to look smaller if the resolution is higher)
Use a fixed Size of the UI and recalculate the sized based on the device.
The problem you are having here.. is because of that. The background for example, should be larger if the screen is larger.
To achieve that.. NGUI provides you with a UIRoot where you can configure the Scaling style to PixelPerfect, FixedSize and FixedSizeOnMobiles.
Try setting that up and the images will adapt to the different sizes.
Hope this works for you, I'll attach an image so you can check out what I'm talking about