Well, small npm modules have to be deprecated or will become useless.

Under the Hood

This story is again another prediction in the last story, I talked about Cross programming language that can be the potential language to run on the browser to IOS and Android devices, well was also a prediction.

I am making predictions or laying some new ideas or maybe giving new ideas.

Who cares what’s important the story should and must go on.

Chat GPT as the npm module or will replace

So let’s start, I am using Chat GPT in most of my development work.

I am developing a react-native application and want to add a loading skeleton while fetching data.

Now I have 2 options

Use

• the npm package or third-party component
• Develop on our own Earlier before chat GPT, developing anything small module it a time-consuming process.

Now we have chat GPT so I can directly ask him to give me the codebase for creating a skeleton in react-native.

The basic code is ready as shown below

import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';

const SkeletonLoadingComponent = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <View style={styles.container}>
      {isLoading && <View style={styles.loadingIndicator} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 20,
    backgroundColor: '#f2f2f2',
    borderRadius: 4,
  },
  loadingIndicator: {
    flex: 1,
    backgroundColor: '#e6e6e6',
    borderRadius: 4,
  },
});

export default SkeletonLoadingComponent;

This is easy, next, we need to customise it according to our needs, for example, timeout, colours and shades.

Now I don’t need

• Third-party module,
• have my custom component
• highly customisable according to my design
• less time consuming process So using Chat GPT I can easily replace those small npm modules.

Why small? I leave it up to you to think about the answer, feel free to mention it in the comment section.

Once this is done, my loading skeleton is ready-to-use.

Customising

I didn’t stop there

I Ask to Chat GPT to add pulse animation above it.

Here is the code

const SkeletonLoadingComponent = () => {
  const pulseScale = useSharedValue(1);

  const startPulseAnimation = () => {
    pulseScale.value = withTiming(
      1.2,
      {
        duration: 1000,
        easing: Easing.inOut(Easing.ease),
      },
      () => {
        pulseScale.value = withTiming(
          1,
          {
            duration: 1000,
            easing: Easing.inOut(Easing.ease),
          },
          startPulseAnimation
        );
      }
    );
  };

  React.useEffect(() => {
    startPulseAnimation();
  }, []);

  const pulseStyle = {
    transform: [{ scale: pulseScale.value }],
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.loadingIndicator, pulseStyle]} />
    </View>
  );
};

I ask Chat GPT for ripple animation and as expected below is the code.

import React, { useEffect, useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import Pulse from 'react-native-pulse';
import Ripple from 'react-native-ripple';

const SkeletonLoadingComponent = () => {
  const pulseRef = useRef(null);

  useEffect(() => {
    startPulseAnimation();
  }, []);

  const startPulseAnimation = () => {
    pulseRef.current && pulseRef.current.start();
  };

  return (
    <Ripple style={styles.container} rippleDuration={500} rippleCentered={true}>
      <View style={styles.loadingIndicator}>
        <Pulse
          ref={pulseRef}
          color="#e6e6e6"
          numPulses={3}
          diameter={200}
          initialDiameter={100}
          duration={2000}
          interval={1000}
        />
      </View>
    </Ripple>
  );
};

Custom modules?

• I’ve reduced the repository size
• Have custom-made components
• Less package size more performant the app will be
• Custom-made components are customisable
• Use the storybook to preview the components
• You can release your own custom-made components as the npm module This is crazy using AI we can solve tonnes of problems, we don’t need to remember small properties, and classes and focus more on the complete system.

It’s like being a developer, I am also a founder of the code repository I am developing or creating or working on.

I can pay attention to architechture and completing UI screens and logic behind the application.

This looks promising and if we can have a VS-Code extension around it it would be a helpful tool.

Conclusion

Use Chat GPT to create custom-made components and replace small npm modules as much as possible.

We can even try removing large-size npm packages to reduce the repository or app size.

Chat GPT will play a crucial role in saving time and giving accurate solutions in one go.

That’s it for today.

Keep developing
Shrey
iHateReading