Troubleshooting SSL/TLS Issues(java.security.NoSuchAlgorithmException) in Java Applications

Caused by: java.io.UncheckedIOException: java.io.IOException: java.security.NoSuchAlgorithmException: Error constructing implementation (algorithm: Default, provider: SunJSSE, class: sun.security.ssl.SSLContextImpl$DefaultSSLContext) at java.net.http/jdk.internal.net.http.HttpClientImpl.<init>(HttpClientImpl.java:285) ~[java.net.http:na] at java.net.http/jdk.internal.net.http.HttpClientImpl.create(HttpClientImpl.java:270) ~[java.net.http:na] at ... 49 common frames omitted Caused by: java.s

Post, Code and Quiet Time. Troubleshooting SSL/TLS Issues(java.security.NoSuchAlgorithmException) in Java Applications By Errong Leng – 15 May 2024 – View online → Photo by Tomáš Malík / Unsplash Caused by: java.io.UncheckedIOException: java.io.IOException: java.security.NoSuchAlgorithmException: Error constructing implementation (algorithm: Default, provider: SunJSSE, class: sun.security.ssl.SSLContextImpl$DefaultSSLContext) at java.net.http/jdk.internal.net.http.HttpClientImpl.<init>(HttpClientImpl.java:285) ~[java.net.http:na] at java.net.http/jdk.internal.net.http.HttpClientImpl.create(HttpClientImpl.java:270) ~[java.net.http:na] at ... 49 common frames omitted Caused by: java.security.KeyManagementException: null at java.base/sun.security.ssl.SSLContextImpl$DefaultManagersHolder.<clinit>(SSLContextImpl.java:942) ~[na:na] at java.base/sun.security.ssl.SSLContextImpl$DefaultSSLContext.<init>(SSLContextImpl.java:1111) ~[na:na] at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method) ~[na:na] at java.base/jdk.internal.reflect Introduction:When working with Java applications that interact with secure servers over HTTPS, SSL/TLS-related errors can occur, causing disruptions to your application's functionality. One common error, java.security.NoSuchAlgorithmException, indicates a problem with SSL/TLS configuration. In this post, we'll explore one potential cause of this error and how to resolve it. Identifying the Issue:The java.security.NoSuchAlgorithmException error typically indicates that the SSL/TLS implementation is unable to find the specified algorithm. While there can be various underlying causes, one common issue is an incorrect or non-existent path to the truststore or keystore file. Possible Cause:If the truststore or keystore file path is incorrect, either due to a typo or non-existent file, the SSL/TLS implementation will fail to initialize properly, resulting in the NoSuchAlgorithmException error. Solution:To resolve this issue, ensure that you are providing the correct path to the truststore or keystore file. Here are the steps to follow: Verify File Paths: Double-check the paths to the truststore and keystore files in your Java application's configuration. Ensure that the paths are correct and the files exist at those locations. Correcting Typos: If there are any typos in the file paths, correct them to point to the right location of the truststore or keystore files. Update Configuration: Once you've verified and corrected the file paths, update your Java application's configuration to use the corrected paths. Example:Suppose you have the following configuration in your Java application: System.setProperty("javax.net.ssl.trustStore", "/path/to/truststore.jks"); or either via java vm args like -Djavax.net.ssl.keyStore=keystore.jks -Djavax.net.ssl.keyStorePassword=password If the file path /path/to/truststore.jks is incorrect or the file does not exist, you may encounter the NoSuchAlgorithmException error. Ensure that the correct path to the truststore file is provided. Conclusion:SSL/TLS-related errors can be challenging to troubleshoot, but by identifying and addressing common issues, such as incorrect file paths to truststore or keystore files, you can resolve them effectively. Always double-check your configuration and ensure that the paths provided are accurate and point to the correct files. Once you've corrected the paths, your Java application should be able to establish SSL/TLS connections without encountering the NoSuchAlgorithmException error. Post, Code and Quiet Time. © 2024 – Unsubscribe

How to Build a Release Version of Your React Native App for Android

Building a release version of your React Native app for Android is essential for distributing your app to users through app stores like Google Play. Here's a step-by-step guide on how to do it: 1. Generate a Signing Key Before you can build a release version of your app, you need to generate a signing key. You can do this using the keytool command that comes with the Java Development Kit (JDK). Open a terminal and run the following command: keytool -genkeypair -v -keystore your-key.keystore -

Post, Code and Quiet Time. How to Build a Release Version of Your React Native App for Android By Errong Leng – 11 May 2024 – View online → Photo by martin bennie / Unsplash Building a release version of your React Native app for Android is essential for distributing your app to users through app stores like Google Play. Here's a step-by-step guide on how to do it: 1. Generate a Signing Key Before you can build a release version of your app, you need to generate a signing key. You can do this using the keytool command that comes with the Java Development Kit (JDK). Open a terminal and run the following command: keytool -genkeypair -v -keystore your-key.keystore -alias your-alias -keyalg RSA -keysize 2048 -validity 10000 Replace your-key.keystore and your-alias with your desired file name and alias. Follow the prompts to enter the required information, including passwords and alias details. 2. Configure Gradle Properties Next, you need to configure your project's gradle.properties file. Open the android/gradle.properties file in your project and add the following lines: MYAPP_RELEASE_STORE_FILE=your-key.keystore MYAPP_RELEASE_KEY_ALIAS=your-alias MYAPP_RELEASE_STORE_PASSWORD=your-store-password MYAPP_RELEASE_KEY_PASSWORD=your-key-password Replace your-key.keystore, your-alias, your-store-password, and your-key-password with the appropriate values from the signing key you generated. 3. Configure Gradle Build Types Open the android/app/build.gradle file in your project and add the following code block inside the android block: signingConfigs { release { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } buildTypes { release { signingConfig signingConfigs.release } } 4. Build the Release APK Now, you can generate the release APK by running the following command in the root of your project: cd android && ./gradlew assembleRelease This command will generate the release APK file in the android/app/build/outputs/apk/release directory of your project. 5. Testing the Release APK Before distributing your app, it's essential to test the release APK to ensure that it functions correctly. You can do this by installing the APK on a device or emulator and thoroughly testing all features. 6. Release Preparation Once you're satisfied with your app's release version, you can prepare it for distribution by following the guidelines of the app store where you plan to publish it. This usually involves creating a store listing, uploading screenshots, providing app descriptions, and setting pricing and availability options. 7. Distribution Finally, you can distribute your app by uploading the release APK to the app store's developer console. Follow the platform-specific guidelines for uploading and publishing your app. For Google Play, you'll need to sign in to the Google Play Console, create a new release, and upload your APK file. Conclusion Building a release version of your React Native app for Android involves several steps, including generating a signing key, configuring Gradle properties, and building the release APK. By following these steps and guidelines, you can prepare and distribute your app to users through app stores with confidence. Post, Code and Quiet Time. © 2024 – Unsubscribe

Setting Up a Static Server in React Native for Shared Assets

When working on a React Native app, you may have a bunch of assets that need to be served as static resources. These assets are often shared between Android and iOS apps, and are commonly placed in the root folder of your project. However, in Android, assets are typically expected to be located under src/main/assets. So, to serve these assets in both platforms, you'll need to tell the Android app to include them during the build step. 1. Organizing Your Project Structure First, make sure your

Post, Code and Quiet Time. Setting Up a Static Server in React Native for Shared Assets By Errong Leng – 11 May 2024 – View online → When working on a React Native app, you may have a bunch of assets that need to be served as static resources. These assets are often shared between Android and iOS apps, and are commonly placed in the root folder of your project. However, in Android, assets are typically expected to be located under src/main/assets. So, to serve these assets in both platforms, you'll need to tell the Android app to include them during the build step. 1. Organizing Your Project Structure First, make sure your assets are placed in a shared directory. For example, you can place them in the root folder of your project. project-root/ ├── android/ ├── ios/ ├── assets/ │ ├── images/ │ ├── fonts/ │ └── ... └── ... 2. Updating Android Build Configuration In your Android app's build.gradle file, add the shared assets directory to the list of asset source directories. android { sourceSets { main { assets.srcDirs += ['../../assets'] } } } This tells the Android app to include assets from the assets directory in the root folder of your project during the build process. 3. Creating a Static Server Now, let's set up a simple static server in your Android app to serve these assets. You can use NanoHTTPD for this purpose. import android.content.Context; import java.io.IOException; import java.io.InputStream; import fi.iki.elonen.NanoHTTPD; public class StaticServer extends NanoHTTPD { private Context context; public StaticServer(Context context) { super(8080); // You can change the port number if needed this.context = context; } @Override public Response serve(IHTTPSession session) { String uri = session.getUri(); try { InputStream inputStream = context.getAssets().open(uri.substring(1)); // remove leading '/' return newChunkedResponse(Response.Status.OK, getMimeType(uri), inputStream); } catch (IOException e) { return newFixedLengthResponse(Response.Status.NOT_FOUND, NanoHTTPD.MIME_PLAINTEXT, "File not found"); } } private String getMimeType(String uri) { if (uri.endsWith(".html")) { return "text/html"; } else if (uri.endsWith(".css")) { return "text/css"; } else if (uri.endsWith(".js")) { return "application/javascript"; } else if (uri.endsWith(".png")) { return "image/png"; } else if (uri.endsWith(".jpg") || uri.endsWith(".jpeg")) { return "image/jpeg"; } else { return "text/plain"; } } } In the StaticServer class, when we retrieve assets using context.getAssets().open(), you may notice the use of uri.substring(1). This is necessary because the URI always starts with a '/', and if we don't remove it, the assets manager will try to load the static file from the root directory, resulting in a file not found error. By using substring(1), we ensure that the URI correctly points to the asset within the assets directory. 4. Integrating the Server in Your App Now, integrate the static server into your app, start it in your activity, and remember to stop it when the activity is destroyed. import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { private StaticServer server; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); server = new StaticServer(getApplicationContext()); try { server.start(); } catch (IOException e) { e.printStackTrace(); } } @Override protected void onDestroy() { super.onDestroy(); if (server != null) { server.stop(); } } } Conclusion You've successfully set up a static server in your Android app to serve shared assets from the root folder of your project. This approach allows you to keep your assets organized and shared between both Android and iOS platforms. Stay tuned for our upcoming blog post on setting up a similar static server in an iOS app! Post, Code and Quiet Time. © 2024 – Unsubscribe

Building a Simple Static Server in an Android App for React Native

If you're developing a React Native app and need to serve static assets such as images and HTML files, you may encounter challenges, as React Native apps typically don't serve any backend. In such cases, a simple static server running within your Android app can be very useful. 1. Setup First, add the NanoHTTPD dependency to your project's build.gradle file: dependencies { implementation 'org.nanohttpd:nanohttpd:2.3.1' } This will automatically download and include NanoHTTPD in your pro

Post, Code and Quiet Time. Building a Simple Static Server in an Android App for React Native By Errong Leng – 10 May 2024 – View online → Photo by Karsten Winegeart / Unsplash If you're developing a React Native app and need to serve static assets such as images and HTML files, you may encounter challenges, as React Native apps typically don't serve any backend. In such cases, a simple static server running within your Android app can be very useful. 1. Setup First, add the NanoHTTPD dependency to your project's build.gradle file: dependencies { implementation 'org.nanohttpd:nanohttpd:2.3.1' } This will automatically download and include NanoHTTPD in your project. 2. Creating the Static Server Now, let's create a class that extends NanoHTTPD and overrides the serve() method to serve static files from your app's assets directory. import android.content.Context; import java.io.IOException; import java.io.InputStream; import fi.iki.elonen.NanoHTTPD; public class StaticServer extends NanoHTTPD { private Context context; public StaticServer(Context context) { super(8080); // You can change the port number if needed this.context = context; } @Override public Response serve(IHTTPSession session) { String uri = session.getUri(); try { InputStream inputStream = context.getAssets().open(uri.substring(1)); return newChunkedResponse(Response.Status.OK, getMimeType(uri), inputStream); } catch (IOException e) { return newFixedLengthResponse(Response.Status.NOT_FOUND, NanoHTTPD.MIME_PLAINTEXT, "File not found"); } } private String getMimeType(String uri) { if (uri.endsWith(".html")) { return "text/html"; } else if (uri.endsWith(".css")) { return "text/css"; } else if (uri.endsWith(".js")) { return "application/javascript"; } else if (uri.endsWith(".png")) { return "image/png"; } else if (uri.endsWith(".jpg") || uri.endsWith(".jpeg")) { return "image/jpeg"; } else { return "text/plain"; } } } 3. Starting the Server Finally, start the server in your activity's onCreate() method and stop it in the onDestroy() method. import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { private StaticServer server; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); server = new StaticServer(getApplicationContext()); try { server.start(); } catch (IOException e) { e.printStackTrace(); } } @Override protected void onDestroy() { super.onDestroy(); if (server != null) { server.stop(); } } } Conclusion You've successfully created a simple static server in your Android app! This server can serve static files such as HTML, CSS, JavaScript, images, etc., directly from your app's assets directory. This approach is particularly convenient for React Native apps that have a lot of static assets to serve, as bundling them during build time may not be ideal due to various reasons, and dynamic importing might not be feasible. Stay tuned for our upcoming blog post on setting up a similar static server in an iOS app! Post, Code and Quiet Time. © 2024 – Unsubscribe

react-native: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. Invariant Violation

Have you ever see such below error while developing your react-native application. I did encounter once. wrote down how I figure it out and hope will help you as well. ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument T

Post, Code and Quiet Time. react-native: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. Invariant Violation By Errong Leng – 10 May 2024 – View online → Photo by Christoph Nolte / Unsplash Have you ever see such below error while developing your react-native application. I did encounter once. wrote down how I figure it out and hope will help you as well. ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument This error is located at: in RCTText (created by Text) in Text (created by WordCloud) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by TouchableOpacity) in TouchableOpacity (created by TouchableOpacity) in TouchableOpacity (created by WordCloud) in RCTView (created by View) in View (created by WordCloud) in WordCloud (created by Alaphbet) in RCTView (created by View) in View (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in Alaphbet (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument This error is located at: in RCTText (created by Text) in Text (created by WordCloud) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by TouchableOpacity) in TouchableOpacity (created by TouchableOpacity) in TouchableOpacity (created by WordCloud) in RCTView (created by View) in View (created by WordCloud) in WordCloud (created by Alaphbet) in RCTView (created by View) in View (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in Alaphbet (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes ERROR Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. [[4,18],[2,5],[[80,259]],744] This error is located at: in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes ERROR Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. [[4,18],[2,5],[[80,259]],744] This error is located at: in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes The stack trace was not that clear, since it is quite deep. The last Exception in HostFunction: Malformed calls from JS: field sizes are different. But be patinent, scroll to top, you will find the root cause. ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument the fontSize is Infinity, NAN, not a number. That cause the Text component not able to render by react native. Unlucky, the stack trace didn't showed this Text were from which JSX section. I have to review my code and find out the code was calculate the font size at runtime, somehow the value will be NAN in a specific case. const maxCount = Math.max(...data.map(item => item.count)); const minCount = Math.min(...data.map(item => item.count)); const calculateFontSize = (count: number): number => { const range = maxCount - minCount; // fix to avoid NAN if (range <= 0) { return minFontSize; } const fontSizeRange = maxFontSize - minFontSize; const adjustedCount = count - minCount; return minFontSize + (fontSizeRange * adjustedCount) / range; }; After the fix, issue was gone. Post, Code and Quiet Time. © 2024 – Unsubscribe