pasindu1

{
  "21": [
    {
      "name": "shawn",
      "age": 21
    },
    {
      "name": "nayomi",
      "age": 21
    }

pasindu1

const people = [
  {name: 'shawn', age: 21},
  {name: 'john', age: 23},
  {name: 'alex', age: 22},
  {name: 'nayomi', age: 21},
];

const finalPeopleObject = people.reduce((peopleGroupedByAge, curValue) => {
  const age = curValue.age;
  if(!peopleGroupedByAge[age]) peopleGroupedByAge[age] = [];

pasindu1

const itemsArray = [[1,4], [5,2], [9,3]];

const flattenArray = itemsArray.reduce((flattenArray, curValue) => {
  return flattenArray.concat(curValue)
}, [])

console.log('flattenArray', flattenArray);

pasindu1

  const otpContent = useMemo(() =>
    <View style={styles.containerStyle}>
      {Array.from({ length: 6 }).map((_, i) => (
        <Text
          onPress={onPress}
          style={[styles.textStyle, text[i] ? styles.filledStyle : {}]}>
          {text[i]}
        </Text>
      ))}
    </View>

pasindu1

import React, { useMemo, useRef, useState } from 'react';
import { StyleSheet, TextInput, SafeAreaView, Text, View } from 'react-native';

export enum KeyBoardTypes {
  default = 'default',
  email = 'email-address',
  numeric = 'numeric',
  phone = 'phone-pad',
  url = 'url',
  number = 'number-pad',

pasindu1

//....
const AnimatedTabs = (props: MaterialTopTabBarProps) => {
  const routes = props.state.routes;
  const [tabBarWidth, setTabBarWidth] = useState<number>(0);

  if (routes.length <= 0) return null;

  const tabWidth = tabBarWidth / (routes.length ?? 1);
  const translateX = props.position.interpolate({
    inputRange: routes.map((_, index) => index),

pasindu1

import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';

import TabNavigator from './src/components/index'


function App(): JSX.Element {
  return (
    <SafeAreaView style={styles.safeArea}>

pasindu1

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

import CustomTabBar from './customTabBar';

const TabNav = createMaterialTopTabNavigator();

const SignUp = () => (
  <View style={styles.container}>

pasindu1

import {MaterialTopTabBarProps} from '@react-navigation/material-top-tabs';
import React, {useState} from 'react';
import {
  Animated,
  LayoutChangeEvent,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

pasindu1

  import  { interpolate, useAnimatedStyle } from 'react-native-reanimated';
  
  const redColor = 'rgba(255, 0, 0, 1)'
  const greenColor = 'rgba(0, 209, 121, 1)'
  
  const animatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolate(
        progress.value,
        [0, 1],