DEV Community: Vaibhav Shukla

Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle

Vaibhav Shukla — Tue, 14 Jan 2025 02:36:33 +0000

Here is A Code

 <FlatList
                horizontal={isHorizontal}
                contentContainerStyle={{
                    // width: isHorizontal ? 274 : '100%',
                    paddingHorizontal:10
                }}
                overScrollMode="never"
                style={styles.frameGroup}
                data={[1, 2, 3, 4, 5]}
                renderItem={renderItem2}
                ItemSeparatorComponent={
                    <View
                        style={{
                            width: isHorizontal ? 24 : 0,
                            height: !isHorizontal ? 60 : 0,
                        }}
                    />
                }
            />

UI View :

Expected View :

Here is Code after removing width from contentContainer style

import React from 'react';
import { FlatList, View, Text, StyleSheet, Dimensions } from 'react-native';

const data = [...Array(10).keys()].map((_, i) => ({ id: i, name: `Item ${i + 1}` }));
const ITEM_WIDTH = 100;

const YourComponent = ({ item }) => (
  <View style={styles.item}>
    <Text>{item.name}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={data}
      horizontal
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <YourComponent item={item} />}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingHorizontal: 10 }}
      ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
      getItemLayout={(data, index) => ({
        length: ITEM_WIDTH,
        offset: ITEM_WIDTH * index,
        index,
      })}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    width: ITEM_WIDTH,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    marginHorizontal: 5,
  },
});

export default App;

Why It Works After Commenting width:

The FlatList dynamically calculates the width of the content based on its children.
No padding offsets are added, so there's no risk of incorrect scrollable area calculation.
As a result, horizontal scrolling works as expected.

Mobile Orientation (React-Native)

Vaibhav Shukla — Tue, 17 Sep 2024 10:10:59 +0000

Lets dive straight into code

To create custom hooks that listens to device orientation we will be using Dimensions API to Detect changes in screen.


import { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';

const useOrientation = () => {
  const [orientation, setOrientation] = useState(getOrientation());

  // Function to determine the current orientation
  function getOrientation() {
    const { width, height } = Dimensions.get('window');
    return width > height ? 'LANDSCAPE' : 'PORTRAIT';
  }

  useEffect(() => {
    const onChange = () => {
      setOrientation(getOrientation());
    };

    // Listen for changes in screen dimensions
    const subscription = Dimensions.addEventListener('change', onChange);

    // Cleanup the event listener when the component is unmounted
    return () => {
      subscription.remove();
    };
  }, []);

  return orientation;
};

export default useOrientation;

Custom Hooks

Vaibhav Shukla — Mon, 16 Sep 2024 05:34:50 +0000

Explain Me React Hooks

React Hooks are functions that let you use state and other React features without writing a class. Introduced in React 16.8, they enable functional components to handle logic like state management, lifecycle events, and side effects.

What is Need of Custom Hooks ?

Custom React Hooks allow you to extract and reuse logic across multiple components. They help to keep components clean and reduce duplication by encapsulating stateful logic into a function. Custom Hooks follow the same rules as built-in Hooks (e.g., they can use other Hooks like useState, useEffect, etc.).

Show Me the Code :

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value + 1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

Rules for Custom Hooks

Only call hooks at the top level: Don’t call hooks inside loops, conditions, or nested functions.

Only call hooks from React functions: Hooks should be used in functional components or other custom hooks.

Top 10 String Javascript Interview Coding Question

Vaibhav Shukla — Sun, 23 Jun 2024 12:01:51 +0000

1. Reverse a String

function reverseString(str) {
    return str.split('').reverse().join('');
}
console.log(reverseString("hello")); // Output: "olleh"

2. How to check the name of the number in English?

function numberToWords(number) {
    const singleDigits = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
    const teens = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
    const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];

    if (number === 0) {
        return 'zero';
    }

    if (number < 10) {
        return singleDigits[number];
    }

    if (number < 20) {
        return teens[number - 10];
    }

    if (number < 100) {
        return tens[Math.floor(number / 10)] + ' ' + singleDigits[number % 10];
    }

    if (number < 1000) {
        return singleDigits[Math.floor(number / 100)] + ' hundred ' + numberToWords(number % 100);
    }

    if (number < 1000000) {
        return numberToWords(Math.floor(number / 1000)) + ' thousand ' + numberToWords(number % 1000);
    }

    if (number < 1000000000) {
        return numberToWords(Math.floor(number / 1000000)) + ' million ' + numberToWords(number % 1000000);
    }

    return 'Number too large to convert';
}

// Example usage:
console.log(numberToWords(123)); // Outputs: ""one hundred twenty three""
console.log(numberToWords(12345)); // Outputs: ""twelve thousand three hundred forty five""
console.log(numberToWords(123456789)); // Outputs: ""one hundred twenty three million four hundred fifty six thousand seven hundred eighty nine"""

*3. How to calculate the number of vowels and consonants in a string?
*

function countVowelsAndConsonants(str: string): { vowels: number, consonants: number } {
    // Define a regular expression to match vowels (case-insensitive)
    const vowelRegex = /[aeiou]/i;

    let vowels = 0;
    let consonants = 0;

    // Convert the string to lowercase for case-insensitive comparison
    const lowerCaseStr = str.toLowerCase();

    // Iterate through each character of the string
    for (let char of lowerCaseStr) {
        // Check if the character is a letter
        if (/[a-z]/i.test(char)) {
            // Increment the count of vowels if the character is a vowel
            if (vowelRegex.test(char)) {
                vowels++;
            } else {
                // Increment the count of consonants if the character is a consonant
                consonants++;
            }
        }
    }

    // Return the count of vowels and consonants
    return { vowels, consonants };
}

// Example usage:
const inputString = ""Hello World"";
const { vowels, consonants } = countVowelsAndConsonants(inputString);
console.log(""Vowels:"", vowels); // Output: 3
console.log(""Consonants:"", consonants); // Output: 7

4. how to calculate 2 largest vowel count from string

function calculateTwoLargestVowelCounts(str: string): number[] {
    // Define an array to store counts of each vowel (a, e, i, o, u)
    const vowelCounts: number[] = [0, 0, 0, 0, 0];

    // Convert the string to lowercase for case-insensitive comparison
    const lowerCaseStr = str.toLowerCase();

    // Iterate through each character of the string
    for (let char of lowerCaseStr) {
        // Check if the character is a vowel
        switch (char) {
            case 'a':
                vowelCounts[0]++;
                break;
            case 'e':
                vowelCounts[1]++;
                break;
            case 'i':
                vowelCounts[2]++;
                break;
            case 'o':
                vowelCounts[3]++;
                break;
            case 'u':
                vowelCounts[4]++;
                break;
        }
    }

    // Sort the array in descending order to find the two largest counts
    const sortedCounts = vowelCounts.slice().sort((a, b) => b - a);

    // Return the two largest counts
    return sortedCounts.slice(0, 2);
}

// Example usage:
const inputString = ""Hello World"";
const twoLargestCounts = calculateTwoLargestVowelCounts(inputString);
console.log(""Two Largest Vowel Counts:"", twoLargestCounts); // Output: [2, 1]

What are ES6 Features ?

Vaibhav Shukla — Fri, 17 May 2024 20:25:52 +0000

1. The let keyword
The const keyword
Arrow Functions
The ... Operator
For/of
Map Objects
Set Objects
Classes