DEV Community: krishnaprasad

What is flatmap and Advantage of using flatmap ?

krishnaprasad — Sat, 04 Nov 2023 08:37:31 +0000

What is Flatmap?

FlatMap is a higher-order function commonly found in functional programming and many programming languages, including JavaScript, and Java. Its primary purpose is to transform and manipulate collections (such as arrays or lists) in a concise and efficient way.

The flatMap function is used to perform the following operations

Flattening nested collections: When you have a collection of collections (e.g., an array of arrays), you can use flatMap to flatten the nested structure into a single, flat collection. This is particularly useful when working with multidimensional arrays or when you want to remove the nesting of elements.

const nestedArray = [[1, 2], [3, 4], [5, 6]]; const flatArray = nestedArray.flatMap(arr => arr); // flatArray is [1, 2, 3, 4, 5, 6]
Transforming and filtering elements: FlatMap allows you to transform each element of a collection while potentially reducing the number of elements. You can also use it to filter elements based on certain criteria.

In summary, flatMap is a versatile function that can simplify and improve the readability of code when working with collections, especially in cases involving nested structures, mapping, and filtering. It's a powerful tool for functional programming and can lead to more concise and expressive code.

What is "VirtualizedLists should never be nested inside plain ScrollViews" in React Native?

krishnaprasad — Sun, 01 Oct 2023 05:48:20 +0000

What is VirtualizedLists Error?

In React Native, when you encounter a "VirtualizedLists should never be nested" error while trying to wrap a FlatList inside a ScrollView, it means you are trying to nest multiple virtualized lists within each other, which is not supported by the framework.

Virtualized lists like FlatList and SectionList are optimized for rendering long lists efficiently by rendering only the visible items on the screen. Nesting them within a ScrollView can lead to conflicts in managing the scroll behavior, as both the ScrollView and the inner FlatList are trying to control the scrolling.

How to overcome this issue?

Use a Single Virtualized List: If your goal is to display a list of items, you can often achieve the desired layout and functionality using a single FlatList or SectionList without the need for a ScrollView. You can style and customize the list to have headers, footers, or other elements as needed.

Use a Header Component: If you need to include elements above the FlatList, you can add them as part of the ListHeaderComponent or ListFooterComponent props of the FlatList. This way, you can still achieve the desired layout without nesting virtualized Lists.

<FlatList data={data} renderItem={({ item }) => <ItemComponent item={item} />} ListHeaderComponent={<ComponentAboveFlatlist />} ListFooterComponent={<ComponentBelowFlatlist />} />

Use SectionList: If your data is organized into sections and you need a more complex layout, consider using SectionList, which allows you to create a list with section headers and items within each section.

<SectionList sections={ListData} renderItem={({ item }) => <ItemComponent item={item} />} renderSectionHeader={({ section }) => <SectionHeaderComponent section={section} />} />

Avoid nesting virtualized lists like FlatList or SectionList inside a ScrollView unless you have a specific and valid use case for it, as it can lead to performance issues and unpredictable behavior. Instead, try to structure your components and layout in a way that utilizes the capabilities of a single virtualized list or combines them with other components to achieve your desired UI.

What are the consequence on using Flatlist inside scrollview?

Performance Issues: Virtualized lists like FlatList are optimized for rendering only the items that are currently visible on the screen. When you nest a virtualized list within a ScrollView, both the ScrollView and the inner FlatList will attempt to manage scrolling independently. This can result in performance degradation as both components compete for control over the scroll behavior.

Unpredictable Scrolling Behavior: When you have nested scrolling components, it can lead to unpredictable scrolling behavior. Users may experience difficulties in smoothly scrolling through the content, and it can be challenging to coordinate the scroll positions of the two components effectively.

Difficulty in Handling Events: Handling touch events, such as taps and gestures, can become complicated when you have nested scroll views. It can be challenging to determine which component should respond to a particular event, leading to a less intuitive user experience.

Layout Issues: It can be challenging to create a consistent and responsive layout when using nested scroll views. The inner FlatList may not behave as expected, and it can be difficult to control the layout of elements within the ScrollView.

Performance Degradation: Rendering multiple virtualized lists within a ScrollView can consume more memory and CPU resources than necessary. This can result in slower app performance and increased battery consumption, especially on mobile devices.

Please do Comment if any queries, Thank you...!

Code Obfuscation of Javascript code using JScrambler

krishnaprasad — Sun, 09 Jul 2023 06:16:50 +0000

What is code obfuscation?
Code obfuscation is the process of modifying the source code of a program to make it difficult to understand and analyze, while preserving its functionality. In the case of JavaScript, obfuscation is often used to protect sensitive information or intellectual property, as well as to make it harder for attackers to reverse engineer or exploit the code.

There are different techniques used for code obfuscation and few were stated below,

Variable and Function Renaming
One of the simplest techniques is to rename variables and functions to meaningless or randomly generated names. This makes the code harder to understand and follow.

String Encryption
Encrypting strings within the code and dynamically decrypting them at runtime can make it difficult for an attacker to extract sensitive information from the code.

Code Splitting
Breaking up the code into multiple parts and dynamically loading them at runtime can make it harder for someone to understand the overall flow of the program.

*Code Transformation *
Transforming the code structure, such as changing the order of statements, adding redundant code, or using complex control flow constructs, can make the code more convoluted and challenging to comprehend.

Removing Whitespace and Comments
Stripping out unnecessary whitespace and comments can make the code more compact and harder to read, although this is more of a basic obfuscation technique.

It's important to note that code obfuscation is not a foolproof security measure. A determined attacker can still reverse engineer or analyze the obfuscated code given enough time and effort. However, obfuscation can act as a deterrent and make it more time-consuming for an attacker to understand the code.

There are several JavaScript obfuscation tools available that automate these techniques. Some popular ones JS Defender, JScrambler and Appdome. These tools can help streamline the obfuscation process and generate obfuscated versions of your JavaScript code.

Here I have used Jscrambler for the understanding of engineering and limitation of obfuscating the code.

Sign in and create the dashboard on the jscrambler by connecting your Demo app. I have used this link to create the sample project and connect the code with Jscrambler dashboard.

Make sure you have configure the token generated from the dashboard should be linked with the app config file to have proper connection with the dashboard.

To confirm the connection, execute the following command and see the console.

Jscrambler

Once all the connection is completed, we were able to see the app name in the dashboard with the code from js file.

Now we have to choose the options from the dashboard for obfuscation, As am using the trial version of jscrambler, we can obfuscate only the variable name.

In the below screenshot you can see the obfuscation of variable name.

Note: We have tried using the code obfuscation tool for react native and react js. But there is some limitation in obfuscating the JSX code.

Thanks for Reading,

Happy coding.....!

Native Base with React native

krishnaprasad — Sat, 01 Jul 2023 15:14:20 +0000

What is Native Base?
NativeBase is a popular open-source UI component library for building cross-platform mobile applications using React Native. It provides a set of pre-designed and customizable UI components that follow the principles of Material Design, making it easier and faster to develop mobile apps with a consistent look and feel.

NativeBase offers a wide range of reusable components such as buttons, forms, headers, footers, cards, tabs, and much more. These components are built using React Native, a JavaScript framework for building native mobile applications, and they are compatible with both iOS and Android platforms.

The library also includes a theme-based styling system, allowing developers to easily customize the appearance of their app by modifying the theme variables. This makes it simple to create visually appealing and consistent designs across different screens and devices.

NativeBase has gained popularity in the React Native community due to its ease of use, extensive component library, and active development community. It simplifies the development process by providing ready-to-use components and helps developers create high-quality mobile applications more efficiently.

How to use Native Base?
To start with native base install the required dependencies.
npm install native-base

After installing the dependency, import the native-base in required component.

import { Button } from 'native-base';

Here we'll go through the implementation simple button using native base.
render() { return ( <Button> <Text>Click me</Text> </Button> ); }
Theming Using native Base
Using NativeBase with theming offers several advantages for developing React Native applications:

Consistent Design: NativeBase provides a set of pre-designed UI components that follow the principles of Material Design. By using NativeBase, you can ensure a consistent look and feel across your app, leading to a professional and polished user interface.

Rapid Development: NativeBase simplifies the development process by providing ready-to-use components. With a wide range of customizable UI elements, you can quickly build screens and user interactions without spending much time on design and styling.

Customizability: NativeBase offers a theme-based styling system that allows you to customize the appearance of components to match your app's branding or design requirements. By defining a custom theme and applying it, you can easily modify colors, typography, spacing, and other visual aspects of your app.

Reusability: With NativeBase, you can create reusable components that encapsulate certain UI patterns or functionality. These components can be easily reused across different screens and even shared between projects, leading to more efficient and maintainable code.

Cross-Platform Compatibility: NativeBase is compatible with both iOS and Android platforms. By using NativeBase components, you can develop mobile applications that work seamlessly on multiple platforms, saving you from the effort of writing platform-specific code.

Active Community and Support: NativeBase has a large and active community of developers. This means you can benefit from the collective knowledge and expertise of the community members. You can find tutorials, examples, and solutions to common problems, making it easier to troubleshoot issues and learn from others.

Overall, using NativeBase with theming simplifies the development process, improves the user experience, and provides a consistent and visually appealing interface for your React Native applications.

Thanks for Reading....!
Happy coding.....!

How to resolve "deriveddata/consumerapp_v1/build/products/debug-iphonesimulator not found" issue

krishnaprasad — Mon, 12 Jun 2023 12:00:25 +0000

While running the app in simulator in m1 system, these type of issues will be identified. To Resolve this kind of issue, we have ensure few steps in the xcode setup.

Navigate to target/Buildsettings from the xcode and search for Excluded Architecture. And add the configuration as below.

Based on the need, we can add this for debug/release builds and save the required values.

Now delete the derived data and clean the project by build => clean. Now try running the project in the simulator.

Thanks for Reading.
Happy Coding

How to fix "Cannot find module 'node-darwin-arm64/package.json"

krishnaprasad — Sun, 11 Jun 2023 13:58:27 +0000

These issues were commonly occurring in M1 chip users. This can be noticed after taking the clone of the project and while doing npm install.



Cannot find module 'node-darwin-arm64/package.json'

This is due to an architecture mismatch happening while installing dependencies in the system. Darwin is one of the main dependencies which will create the node folder, which is key for other dependencies to install.

To resolve the issue, install NVM (Node Version Manager) to continue installing the Node dependencies with the arch flag.
Please nvm installation guide for easy implementation.

Run nvm ls command to verify the dependencies installed properly. And it looks as below,

Now check the arch flag in the terminal using command arch in terminal. By default it will be arm64.

For M1 user, npm needs to install with i386 arch flags to avoid the darwin dependency issue error. Do uninstall the existing node version using the below command.

nvm uninstall 14.21.3 //uninstall the respective node versions

To install the node with arch flag, enter the below command to execute



arch -x86_64 zsh

Now the arch reference is pointed to i386, and make sure not to kill the terminal because this flag will remain until we terminate the terminal. To install Node with NVM, use the following command.



nvm install 14.21.3
nvm alias default 14.21.3

After all these executions, try running npm install, and now you could see in the terminal that the darwin dependency is created successfully.

Thanks for Reading, Do comment if any queries.
Happy Coding...

How to Communicate with the native component from React native using bridge

krishnaprasad — Wed, 24 May 2023 04:14:01 +0000

To communicate with native components using a bridge, you'll typically need to follow a few steps. Here's a general overview of the process

Set up the bridge: Depending on the platform you're working with (e.g., Android, iOS, React Native), you'll need to set up a bridge that enables communication between the native code and your JavaScript code.

Define the communication protocol: Determine how you want to exchange data and messages between the native components and your JavaScript code. This could involve defining methods, events, or callbacks that can be accessed through the bridge.

implement the native component: Write the native code component using the appropriate programming language (e.g., Java or Kotlin for Android, Objective-C or Swift for iOS). This component should expose the methods or events you want to communicate with from JavaScript.

Expose the native component to JavaScript: Use the bridge to expose the native component to your JavaScript code. This typically involves registering the component with the bridge and providing a unique identifier.

Access the native component from JavaScript: Once the native component is exposed, you can access its methods or listen to its events from your JavaScript code. This is typically done using the bridge's API, which allows you to call native methods or subscribe to events.

Handle communication: Use the bridge to send messages or data between the native component and your JavaScript code. This could involve invoking native methods, passing parameters, receiving and processing callbacks, or emitting events.

It's important to note that the exact implementation details may vary depending on the platform and bridge you're using. For example, React Native provides its own bridge called "React Native Bridge," while frameworks like Flutter or Xamarin have their own mechanisms for native code integration.

Attaching the few doc's which visualize how the bridge is created.

The above image shows both the meta and header files created successfully, Now you can connect the those bridge using native modules from the React.

Thanks for Reading....