So, how can you build a slider without relying on third-party libraries?

In this tutorial, I'll show you how to create a fully functional slider in React Native using just FlatList with minimal code. It's an easy and effective approach that leverages React Native's native components to achieve smooth, efficient sliders.

We are going to create this style of slider

Creating the item component

import { View, Text, StyleSheet, Image } from "react-native";

interface OnboardingCardProps {
  imageUrl: string;
  title: string;
  description: string;
  width: number;
}

const OnboardingCard = ({
  imageUrl,
  title,
  description,
  width,
}: OnboardingCardProps) => {
  return (
    <View style={[styles.container, { width }]}>
      <Image source={{ uri: imageUrl }} style={styles.image} />

      <Text style={styles.title}>{title}</Text>

      <Text style={styles.subtitle}>{description}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
    backgroundColor: "#fff",
  },
  image: {
    width: 150,
    height: 150,
    resizeMode: "contain",
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#000",
    textAlign: "center",
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: "#666",
    textAlign: "center",
    paddingHorizontal: 20,
  },
});

export default OnboardingCard;

Creating the slider

import { Dimensions, FlatList, StyleSheet } from "react-native";
import { onboardingSteps } from "data/onboarding";
import OnboardingCard from "components/onboarding/OnboardingCard";

const screenWidth = Math.round(Dimensions.get("window").width);

const Onboarding = () => {
  return (
    <FlatList
      style={styles.slider}
      horizontal
      data={onboardingSteps}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.sliderItemsWrapper}
      pagingEnabled
      renderItem={({ item }) => (
        <OnboardingCard
          width={screenWidth}
          title={t(item.title)}
          description={t(item.description)}
          image={item.image}
        />
      )}
    />
  );
};

export default Onboarding;

const styles = StyleSheet.create({
  viewport: {
    flex: 1,
  },
  wrapper: {
    flex: 1,
  },
  slider: {
    flex: 1,
  },
  sliderItemsWrapper: {
    display: "flex",
    alignItems: "center",
  },
});

Explaining the props used on the FlatList

• horizontal prop allow us to have items aligned horizontally

• The pagingEnabled prop is what creates the “snapping” effect in a scrollable view. When this prop is set to true, the user can only scroll one full page (or item) at a time, causing the scroll to “snap” to the nearest page when they release their finger. This means that partial views of items won't be left visible; the scroll will always land in such a way that one full item is shown, creating a smooth, page-by-page scrolling experience.

• Without it, here is how the scroll goes

  

  But with it, we got this

  

• showsHorizontalScrollIndicator is to hide the scroll indication

Adding the indicators

Dot component ( the dot item component )

import { StyleSheet, View } from "react-native";

interface DotProps {
  active: boolean;
}

const Dot = ({ active }: DotProps) => {
  return <View style={[styles.dot, ...(active ? [styles.active] : [])]} />;
};

export default Dot;

const styles = StyleSheet.create({
  dot: {
    backgroundColor: "#D3BDF2",
    borderRadius: 50,
    marginHorizontal: 5,
    width: 10,
    height: 10,
  },
  active: {
    width: 16,
    height: 16,
    backgroundColor: "#6A3EFC",
  },
});

The dots list component

import { StyleSheet, View } from "react-native";
import Dot from "./Dot";

interface DotIndicatorsProps {
  itemCount: number;
  activeIndex: number;
}
const DotIndicators = ({ activeIndex, itemCount }: DotIndicatorsProps) => {
  return (
    <View style={styles.container}>
      {Array.from({ length: itemCount }).map((_, index) => (
        <Dot active={activeIndex === index} />
      ))}
    </View>
  );
};

export default DotIndicators;

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
});

Creating a state for the current item

Storing the current active index into a state and display the dots indicators.

import { Dimensions, FlatList, StyleSheet } from "react-native";
import { onboardingSteps } from "data/onboarding";
import OnboardingCard from "components/onboarding/OnboardingCard";

const screenWidth = Math.round(Dimensions.get("window").width);

const Onboarding = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <>
        <FlatList
          // ...
          viewabilityConfig={{ viewAreaCoveragePercentThreshold: 100 }}
          onViewableItemsChanged={({ viewableItems, changed }) => {
                const currentIndex = viewableItems.at(0)?.index;
                if (currentIndex !== null && currentIndex !== undefined) {
                  setCurrentIndex(currentIndex);
                }
          }}
        />

        <DotIndicators
           itemCount={onboardingSteps.length}
           activeIndex={currentIndex}
        />
    </>
  );
};

The viewabilityConfig.viewAreaCoveragePercentThreshold prop determines the percentage of an item that must be visible for it to be considered "viewable" within the viewport. By setting this value to 100, the item will only be considered "viewable" when it is fully visible (i.e., 100% of the item's area is visible on the screen).

This ensures that the current index calculation is more accurate, particularly when the user is scrolling slowly. Without this setting, items that are only partially visible could be incorrectly marked as "viewable," causing the currentIndex to update prematurely or inaccurately. By enforcing the requirement that an item must be fully visible, you prevent incorrect index changes that can occur when the user is scrolling slowly and only small parts of items are entering or exiting the viewport.

In short, setting the viewAreaCoveragePercentThreshold to 100% ensures that the current item index only changes when the item is fully in view, leading to more precise behavior during slow scrolling.

The result

Conclusion

You only need three props to create a slider in React Native without external libraries:

• pagingEnabled: Enables the snap effect for smooth scrolling.

• onViewableItemsChanged: Tracks the active item as the user scrolls.

• viewabilityConfig.viewAreaCoveragePercentThreshold: Ensures accurate active index calculation by requiring 100% of the item to be visible.

With just these props, you can easily create a slider using React Native's built-in components.

Resources

• https://kps250.medium.com/creating-image-slider-with-flatlist-in-react-native-1815d3793d99

• https://reactnative.dev/docs/flatlist#viewabilityconfig

Let's delve into how it's accomplished with HTML and React.js builds

1. Using React CDN

<html>
  <body>
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <div id="container"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello World!</h1>,
        document.getElementById('container')
      );
    </script>
  </body>
</html>

2. Self bundles creation from React source code

   According to React contribution docs you can build the source code with yarn build and open the fixtures/packaging/babel-standalone/dev.html to preview the result of the build. The contents of this file are the same as above, except that it loads the bundles generated by the yarn build command.

Is there any drawback to using bundles in your exploration journey ?

While bundles serve a purpose, I believe there's another approach that offers a superior exploration experience. Bundles do have their limitations:

• You can't easily get to grips with module organization while debugging. There's no .map files.

• When you make some changes in the code you need to re-build each time. There's no existing auto-reload features.

I tried to change the build configs to create .map files, but I get an error.

How Vite helped me ?

During my exploration of the React source code, I promptly encountered the constraints I previously mentioned. I pondered on a method to bring the source code directly to the browser without resorting to bundles. Knowing that Vite operates in this manner, I decided to leverage it.

I learned that the React codebase utilizes the yarn workspaces feature, which implies that I can conveniently create a new package (workspace) within these workspaces to share React's source code. This is precisely what I proceeded to do. However, I encountered additional challenges along the way. In the subsequent lines, I will elucidate on my implementation.

1. I create new workspace with me example application code using Vite.

• In the packages folder in React source code, I create new project using vite-create

yarn create vite preview-react --template vanilla
# You might ask why use the vanilla template and not this React one? 
# Because the vanilla template is easier to clean.

# The command will create `preview-react` folder

• Delete all the generated files without package.json and the index.html files

• Update the index.html file as follows

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React preview</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="./App.jsx"></script>
</body>

</html>

• Create App.jsx file with the content below

import * as React from 'react';

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}

const root = createRoot(document.getElementById('app'));
root.render(<Counter />);

2. Add React dependencies

I require two dependencies: react and react-dom. To obtain their version numbers, I navigate to the package.json file within each respective package (located in the packages folder of the React code base). Upon noting down the version numbers, I update the package.json file of the preview-react workspace with the identified versions.

{
...
"dependencies": {
    "react": "put-identified-react-version-here",
    "react-dom": "put-identified-react-dom-version-here"
  }
}

3. Create custom vite config

We need to add some custom configs to make vite work properly with react code base.

• Transpile flow files
  React code base uses flow.js for typing, necessitating transpilation before it can be sent to the browser. Fortunately, there's good news: there exists a Vite plugin tailored for this purpose.

yarn add -D @bunchtogether/vite-plugin-flow

If the installation fails with an error like An unexpected error occurred: "expected workspace package to exist for "..."". , try to manually add @bunchtogether/vite-plugin-flow in devDependencies and run yarn

• Load the flow plugin
  Create vite.config.js file with the content below

import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow';
import { defineConfig } from 'vite';

const flowPluginOptions = {
  include: /\.(flow|js?)$/,
  exclude: /node_modules/,
  flow: {
    // The `all` flag is set to `true` to force transpiling of all files.
    // The plugin expects files typed with flow to include the `@flow` annotation.
    /// But not all react modules include this annotation, even if they are
    // flow-typed.
    all: true,
    pretty: false,
    ignoreUninitializedFields: false,
  },
};

export default defineConfig({
  plugins: [flowPlugin(flowPluginOptions)],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        esbuildFlowPlugin(
          flowPluginOptions.include,
          undefined,
          flowPluginOptions.flow,
        ),
      ],
    },
  },
});

• Create some React global values

  The React source code depends on certain global variables that are typically defined or replaced at build time by tools like webpack or rollup. Since I'm not utilizing webpack or rollup, I need to manually provide these values. I leverage Vite's global variable feature for this purpose. Subsequently, I include the necessary line in the Vite configuration.

...

export default defineConfig({
  plugins: ...,
  optimizeDeps: ...,
  define: {
    __DEV__: false,
    __EXPERIMENTAL__: true,
    __EXTENSION__: true,
    __PROFILE__: false,
    __TEST__: false,
  },
});

4. Resolve some importation in React code base

This section of the article might pose a challenge for understanding. Allow me to clarify the necessity of this resolution.
Take a look at the line 22 of this file packages/react/src/ReactServerContext.js of React code base, you will see this importation.

// packages/react/src/ReactServerContext.js

import ReactSharedInternals from 'shared/ReactSharedInternals';

This module is imported in packages/react/src/React.js this one imported in packages/react/index.js.
Notice that we are in the react package and trying to import something from the shared package.

Now let's take a look at the shared/ReactSharedInternals file at its line 10, the content is below

import * as React from 'react';

const ReactSharedInternals =
  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

This module depends on react package.

There is a circle dependency. Take a look at the graph below.

Let me show you another stuff. Go to the packages/react-reconciler/src/ReactFiberHydrationContext.old.js file. At its line 42 you will see some import from packages/react-reconciler/src//ReactFiberHostConfig .

// We expect that our Rollup, Jest, and Flow configurations
// always shim this module with the corresponding host config
// (either provided by a renderer, or a generic shim for npm).
//
// We should never resolve to this file, but it exists to make
// sure that if we *do* accidentally break the configuration,
// the failure isn't silent.

throw new Error('This module must be shimmed by a specific renderer.');

The module triggers an error unconditionally. and notably lacks any export statement. However, it includes a clear comment.

What you need to understand is that during build certain imports are resolved in a specific way. For example, the circular dependency that I'm talking about a little earlier will be fixed, by importing the react/src/ReactSharedInternals module instead of react in the shared/ReactSharedInternals.js file. And the import of react-reconciler/src//ReactFiberHostConfig in module react-reconciler/src/ReactFiberHydrationContext.old.js will be replaced by react-reconciler/src/forks/ReactFiberHostConfig.dom.js in as part of a build for the web.

There are many similar cases in the code base. The resolution of the two that I talked about allows React to work in the browser, we are not going to worry about the rest. If you're interested in seeing how the resolution is done, then take a look at this file. The easiest way to make the vite project work quickly with these new elements is to modify the corresponding files with the correct imports. This involves modifying the React source code. Alternatively, the resolution can be handled in the Vite config by creating a plugin (which I've done, although I won't include those details in this article; you can check them here.

Let's do it quickly by modifying the codebase.

• Change import in packages/shared/ReactSharedInternals.js file. Replace its content by the follow.

import ReactSharedInternals from 'react/src/ReactSharedInternals';

export default ReactSharedInternals;

• Replace the content of packages/react-reconciler/src/ReactFiberHostConfig.js
  by the content below.

export * from 'react-reconciler/src/forks/ReactFiberHostConfig.dom.js';

Now there are all necessary to the preview app to works.

This makes exploration much smoother.

Conclusion

Exploring React's source code in order to gain an in-depth understanding of its operation and architecture is an exhilarating undertaking. We need a small React application as a guide. Generally speaking, this is an HTML page into which we import React's scripts (bundles). This technique, while satisfactory, has some limitations: slow build times and lack of source maps.

In this article, I presented an alternative method using Vite, bypassing the need for bundling and bringing React source code directly to the browser. This involved creating a new workspace within React's yarn workspaces feature and configuring Vite to handle Flow.js files and resolve specific imports.

I create a public repo that includes the example application with Vite, find it here.

The extension has some interesting features. First it let you use the right theme according to your theme preference, you have the light and dark mode. You can also drag your table in the diagram, to reorganize as you want. Zooming is also supported. Another interesting feature is, you can hide columns, showing all columns, only relational columns, or only the table's name ( Let's thank the contributors for adding this feature ).

So, stop talking and let's see how to use it.

Get started

Let's dive in and show how to use it.

First install the extension

From your VsCode in the extension tab, search for this Prisma Entity-Relationship Diagrams visualizer. Install the first item int the result. How can follow the screenshot below to identify the good item.

Getting some Prisma code to preview

In your workspace, create a Prisma file ( if you already have one good, let's use it ).

You can name your file as you want, but its extension must be .prisma so that the extension can be activated by VsCode.

Here is an example of Prima code

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider      = "prisma-client-js"
  binaryTargets = "native"
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
}

model User {
  id                  Int       @id @default(autoincrement())
  firstName           String
  lastName            String
  verified            Boolean   @default(false)
  email               String    @unique
  hashedPassword      String
  salt                String
  resetToken          String?
  resetTokenExpiresAt DateTime?
}

Opening the preview

He got the extension, we got the file, let preview the ERD guys.

When you are in a file with the .prisma extension, you'll see a preview icon in the top right-hand corner of the editor's title bar. Click on it.

And you got this

That is all, thank you for reading.

Support the project

• Leave a review of the extension here

• Visit the repo here to leave a star or contribute here

How does it work?

Install the extension

Go to the extensions tab in your editor, search for DBML Entity-Relationship Diagrams visualizer and install it.

Write your DBML code

In your workspace, create a file with the .dbml extension and write your DBML code in it ( code example below )

Table users {
  id integer
  username varchar
}

Table posts {
  id integer [primary key]
  title varchar
  body text [note: 'Content of the post']
  user_id integer
}

Ref: posts.user_id > users.id // many-to-one

Preview ERD

When you're in a .dbml file, you'll see a preview icon in the top right-hand corner of the editor's title bar.

When you click on this button, a new tab opens on the side displaying the preview.

You can move tables, zoom in on the scene and even move around within it.

Support the project

• Leave a review of the extension here

• Visit the repo here to leave a star or contribute here

Enjoy