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

🚀 Migrating from Spring Boot 2.x to 3.x: Handling @ManyToOne Relationships

Are you planning to upgrade your Spring Boot application from version 2.x to 3.x? One area that requires careful attention during this transition is the handling of @ManyToOne relationships in your entity classes. Here are some key points to consider and best practices to follow: 1. Changes in Validation for Queries: Spring Boot 3.x introduces more validation for queries, especially those involving @ManyToOne relationships. Best Practice: * When writing custom queries using @Query or creat

Post, Code and Quiet Time. 🚀 Migrating from Spring Boot 2.x to 3.x: Handling @ManyToOne Relationships By Errong Leng – 07 May 2024 – View online → Photo by Sebastian Knoll / Unsplash Are you planning to upgrade your Spring Boot application from version 2.x to 3.x? One area that requires careful attention during this transition is the handling of @ManyToOne relationships in your entity classes. Here are some key points to consider and best practices to follow: 1. Changes in Validation for Queries: Spring Boot 3.x introduces more validation for queries, especially those involving @ManyToOne relationships. Best Practice: When writing custom queries using @Query or createQuery methods, ensure that they comply with the updated validation rules. Pay close attention to queries that involve @ManyToOne relationships, as these may require additional scrutiny to avoid validation errors. 2. Type Matching in Queries: With @ManyToOne relationships, it's crucial to ensure that the types on both sides of the '=' SQL queries match. Best Practice: Review your source code carefully, especially any queries that involve @ManyToOne relationships. Check for consistency in types when comparing fields in these relationships to avoid potential issues during migration. 3. Entity Mapping and Join Columns: Verify that your entity mappings and join columns are correctly defined, especially for @ManyToOne relationships. Best Practice: Double-check the mappings for @ManyToOne relationships to ensure they are accurately defined in your entity classes. Confirm that join columns are appropriately specified to maintain the integrity of the relationships. 4. Update Hibernate Dialect Configuration: In Spring Boot 2.x, Hibernate dialect configuration for JPA might be defined under spring.jpa.hibernate.dialect. In Spring Boot 3.x, it's recommended to use spring.jpa.properties.hibernate.dialect instead. Migration Best Practice: spring: jpa: hibernate: dialect: org.hibernate.dialect.SQLServer2012Dialect Updated Configuration in Spring Boot 3.x: spring: jpa: database-platform: org.hibernate.dialect.SQLServer2012Dialect 5. Testing and Validation: Before deploying your application after the migration, thoroughly test the functionality related to @ManyToOne relationships. Best Practice: Create comprehensive test cases that cover scenarios involving @ManyToOne relationships. Validate the behavior of your application to ensure that data integrity is maintained after the migration. Conclusion: Migrating from Spring Boot 2.x to 3.x involves careful consideration of changes in validation for queries, Hibernate dialect configuration, and handling of @ManyToOne relationships. By following best practices, reviewing your codebase, and ensuring proper testing, you can successfully handle these aspects during the migration process and maintain the stability of your application. Post, Code and Quiet Time. © 2024 – Unsubscribe

🚨 Addressing "Insufficient Data Written" Error in RestTemplate or WebClient

Are you encountering the "Insufficient Data Written" error while using RestTemplate or WebClient in your Spring application? This error might occur due to various reasons, but one common root cause is passing incorrect or overridden headers, especially the Content-Length header. In the latest versions of Spring, specifically Spring 3.x and onwards, there's a change in behavior regarding how the Content-Length header is handled when making HTTP requests. Previously, in Spring 2.x, the library wo

Post, Code and Quiet Time. 🚨 Addressing "Insufficient Data Written" Error in RestTemplate or WebClient By Errong Leng – 07 May 2024 – View online → Are you encountering the "Insufficient Data Written" error while using RestTemplate or WebClient in your Spring application? This error might occur due to various reasons, but one common root cause is passing incorrect or overridden headers, especially the Content-Length header. In the latest versions of Spring, specifically Spring 3.x and onwards, there's a change in behavior regarding how the Content-Length header is handled when making HTTP requests. Previously, in Spring 2.x, the library would automatically recalculate the Content-Length based on the size of the request body, even if you bypassed or modified the original headers. However, this behavior is no longer supported in Spring 3.x. If you're experiencing this issue, it's essential to understand that bypassing original headers or modifying them while making subsequent requests is not a recommended practice. Specifically, passing a manually set Content-Length header that doesn't match the actual size of the request body can lead to the "Insufficient Data Written" error. Moreover, be cautious when manipulating headers such as the "Host" header. Incorrectly setting this header might result in sending your request to the wrong server, leading to unexpected behavior or errors. To mitigate this issue: Avoid Bypassing Original Headers: Instead of manually setting headers, rely on the RestTemplate or WebClient to handle headers automatically whenever possible. Ensure Correct Content-Length: If you need to modify headers, ensure that the Content-Length header accurately reflects the size of your request body. Update to Spring 3.x Best Practices: If you're migrating from Spring 2.x to 3.x or later, review and update your code to adhere to the new best practices regarding header handling and request construction. By following these practices, you can prevent the "Insufficient Data Written" error and ensure smooth communication between your Spring application and external services. e.g. sample code: HttpHeaders newHeaders = new HttpHeaders(); newHeaders.setContentType(MediaType.APPLICATION_JSON); // by passing the headers required from original request headers // avoid the Host and Content-Length headers HttpEntity<> requestEntity = new HttpEntity<>(body, newHeaders); ResponseEntity<...> responseEntity = restTemplate .exchange(url, HttpMethod.POST, requestEntity, ...); Post, Code and Quiet Time. © 2024 – Unsubscribe

Ensuring Smooth Spring Boot Testing with Oracle-Style Queries in H2 Database

Are you facing issues running Spring Boot tests due to Oracle-specific functions not being recognized in your H2 in-memory database? If so, you're not alone. Many developers encounter difficulties when testing Spring Boot applications that rely on Oracle-specific features like DUAL, SYSDATE, TO_DATE, or rownum. Fortunately, there's a straightforward solution that allows you to configure your H2 database to behave more like an Oracle database during testing. By setting the H2 mode to Oracle and

Post, Code and Quiet Time. Ensuring Smooth Spring Boot Testing with Oracle-Style Queries in H2 Database By Errong Leng – 03 May 2024 – View online → Photo by David Becker / Unsplash Are you facing issues running Spring Boot tests due to Oracle-specific functions not being recognized in your H2 in-memory database? If so, you're not alone. Many developers encounter difficulties when testing Spring Boot applications that rely on Oracle-specific features like DUAL, SYSDATE, TO_DATE, or rownum. Fortunately, there's a straightforward solution that allows you to configure your H2 database to behave more like an Oracle database during testing. By setting the H2 mode to Oracle and using the Oracle dialect with Hibernate, you can ensure that your tests run smoothly without any errors related to Oracle-specific syntax or functions. Here's how to do it: 1. Configure H2 to Oracle Mode: In your application.properties or application.yml, set the H2 database URL to Oracle mode: spring.datasource.url=jdbc:h2:mem:testdb;NON_KEYWORDS=VALUE;MODE=Oracle; This configuration tells H2 to behave like an Oracle database and recognize Oracle-specific syntax and functions. 2. Use Oracle Dialect with Hibernate: Specify the Oracle dialect for Hibernate in your application.properties or application.yml: spring.jpa.database-platform=org.hibernate.dialect.OracleDialect This ensures that Hibernate generates SQL statements compatible with Oracle databases. Example Usage: Now, you can write and run your tests with Oracle-style queries without encountering any issues. For example: @Query("SELECT sysdate FROM DUAL") List<Date> getSysdateFromDual(); @Query("SELECT * FROM your_table WHERE date_column >= TO_DATE('2024-01-01', 'yyyy-MM-dd')") List<YourEntity> findByDateAfter(@Param("date") String date); Benefits: Seamless Testing: With H2 configured to Oracle mode and using the Oracle dialect with Hibernate, your tests can seamlessly run Oracle-style queries without errors. Closer to Production Environment: By mimicking Oracle database behavior, your tests closely resemble the behavior of your production environment, leading to more reliable testing results. Efficient Development: You can develop and test your Spring Boot applications with confidence, knowing that your tests accurately reflect real-world scenarios. By following these steps, you can ensure smooth testing of your Spring Boot applications, even when using Oracle-specific features in your queries. Post, Code and Quiet Time. © 2024 – Unsubscribe

Using H2 Memory Database to Test Applications with Oracle's 'SELECT sysdate FROM DUAL'

Introduction: When developing applications that rely on Oracle databases, it's common to use the sysdate function along with the DUAL table to retrieve the current date and time. However, when writing tests for these applications, you may encounter challenges due to the Oracle-specific syntax. In this post, we'll discuss how to use H2 memory database to test applications that use SELECT sysdate FROM DUAL. Using H2 Memory Database for Testing: H2 is an in-memory database that provides compatib

Post, Code and Quiet Time. Using H2 Memory Database to Test Applications with Oracle's 'SELECT sysdate FROM DUAL' By Errong Leng – 02 May 2024 – View online → Photo by Susan Wilkinson / Unsplash Introduction: When developing applications that rely on Oracle databases, it's common to use the sysdate function along with the DUAL table to retrieve the current date and time. However, when writing tests for these applications, you may encounter challenges due to the Oracle-specific syntax. In this post, we'll discuss how to use H2 memory database to test applications that use SELECT sysdate FROM DUAL. Using H2 Memory Database for Testing: H2 is an in-memory database that provides compatibility with various SQL databases, including Oracle. By configuring H2 to emulate Oracle's behavior, you can seamlessly test applications without modifying the code. 1. Set Up H2 Memory Database: First, ensure H2 is added as a dependency in your project. Then, configure H2 in your application's application.properties or application.yml file: spring.datasource.url=jdbc:h2:mem:testdb;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE;INIT=RUNSCRIPT FROM 'classpath:init.sql' spring.datasource.driverClassName=org.h2.Driver spring.datasource.username=sa spring.datasource.password= In the above configuration: spring.datasource.url: Specifies the H2 memory database URL with initialization script. DB_CLOSE_DELAY=-1 and DB_CLOSE_ON_EXIT=FALSE: These properties ensure that the database remains open after the connection is closed, allowing access to the data during the entire test execution. INIT=RUNSCRIPT FROM 'classpath:init.sql': This initializes the database by running the init.sql script located in the classpath. 2. Create DUAL-like Table and Initialize Data: Create a init.sql file in the src/test/resources directory with the following content: CREATE TABLE IF NOT EXISTS DUAL ( sysdate TIMESTAMP); INSERT INTO DUAL (sysdate) VALUES (CURRENT_TIMESTAMP()); This script creates a DUAL-like table and inserts the current timestamp into it. 3. Modify the Test SQL Statement: For testing, modify the SQL statement to insert or select the current date or timestamp from the DUAL-like table: Inserting the current timestamp: INSERT INTO DUAL (sysdate) VALUES (CURRENT_TIMESTAMP()); Selecting the current timestamp: SELECT sysdate FROM DUAL; Conclusion: Using H2 memory database with a DUAL-like table allows you to test applications that rely on Oracle-specific syntax such as SELECT sysdate FROM DUAL. By configuring H2 to mimic Oracle's behavior, you can seamlessly test your applications without the need to modify the code. Closing: By following the steps outlined in this post, you can effectively use H2 memory database to test applications that use SELECT sysdate FROM DUAL, ensuring compatibility and reliability in your testing environment. Post, Code and Quiet Time. © 2024 – Unsubscribe