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

🚀 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