Building an app is one thing, but creating a unique user experience and meaningful design choices is what makes some apps great. Deliberate font choice can take your app to the next level, but it sometimes requires importing custom fonts. While building Voluntime’s mobile application for iOS and Android using React Native, I came across a problem while adding my custom font to the project.
The font simply wasn’t changing. The default Roboto font wasn’t going away. Here’s the story and how I fixed it.
Since it was my first time using custom fonts, I wanted to do it right…
The splash screen is the first view of your React Native app that a potential user sees. Whether they just downloaded the app or are opening it the thousandth time, users are immediately greeted with your splash screen. Therefore, it is of the utmost importance to promote a great user experience around the splash screen.
The concept of the splash screen was created as a placeholder to display while the app is loading. This makes phones feel responsive and creates the illusion that the app loads instantly. While this usually works out of the box for native iOS and Android…
Perhaps the most common component in every mobile app is the header. It tells your user where they are in your app, and it’s at the very top of the screen. So, it’s crucial to have a polished and native-feeling header in your React Native apps. I use the React Navigation library for Voluntime’s mobile app, and I wanted to achieve the iOS “frosted glass” blur effect that Apple is known for.
Most of Apple’s iOS apps utilize the blurred header, including Settings, the App Store, Notes, and Reminders. …
I recently created a new React Native app, SkinSafe, for a hackathon (we won)! While trying to run the app on an Android emulator, following the React Native docs, I came across the following error:
Error: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
I was confused because I didn’t mess with the Android project at all and I followed all of React Native’s instructions for my new app. Solutions on the Internet involved different convoluted steps for different operating systems and modifying the computer’s environment variables. …
Before creating a new project with Serverless Framework, I wanted to make sure my software was up-to-date. So, I found instructions to upgrade the Serverless CLI in the documentation, which listed the simple
command for macOS.
However, after running the command in a new Terminal window, the following error occurred:
Cannot run `upgrade` command: It’s applicable only in context of a standalone executable instance in non Windows environment.
Pasting the error into Google did not bring up any relevant results, so I dug deeper into the documentation. The only other option for macOS was upgrading via npm. So…
While building the React Native app for Voluntime, I was displaying a list of events and wanted to add a search bar to the header. So, I experimented with FlatList and the ListHeaderComponent prop.
According to the React Native docs, the ListHeaderComponent is “rendered at the top of all the items”. So, it felt like the perfect solution for my search bar.
The problem I encountered is that after typing one character the search bar loses focus and the keyboard disappears — it’s almost like the component re-renders. What’s happening?
Here’s what my code looked like:
The key here…
While experimenting with useEffect hooks in React and React Native, I came across the following error:
Uncaught TypeError: destroy is not a function
and my app was unable to run. After debugging and searching around, I found the cause and how to solve it.
A simplified version of my code looked like this:
The key here is that `myFunction` is `async` and the shorthand arrow function syntax I used.
The reason the simple code above was crashing my app is due to how the useEffect hook, async functions, and the shorthand arrow function syntax work.
One feature of the…
As your React Native app grows in size and starts to incorporate features like push notifications and camera access, you will need to handle the different levels of permissions that your users will give your app.
Sometimes you’ll want to prompt the user to change their permissions to enable your app’s functionality. This can be problematic because iOS and Android phones don’t show the same permission pop-up again after the user has made their initial choice. The only way to change permissions afterwards is through the Settings app.
Fortunately, React Native includes an easy built-in method to directly open your…
App developers targeting iOS 9.0 and newer can support Apple’s Universal Links feature, which allows iOS users to tap a link to your website and get seamlessly redirected to your installed app without going through Safari. If your app isn’t installed, tapping a link to your website opens your website in Safari.
This is a better alternative to Deep Linking, in which your app registers a custom url prefix like “myapp://”. Deep linking won’t work if your app is not installed, and can’t be opened on other platforms like Android and desktop. …
React Native 0.64 was released in March 2021 to the delight of thousands of developers. After the release of React 17 in October 2020, there were high hopes about the next version of React Native. The new release has certainly fulfilled my expectations and brings some exciting new features for the React Native community.
Previously, Hermes was only available for apps running on…
High school student with a passion for coding and helping others with my knowledge.