@react-native-community/slider

You can customize the visual representation of steps using renderStepNumber and StepMarker.

renderStepNumber

Set this to true to display step numbers automatically under the track. The font size is automatically adjusted based on the number of steps.

StepMarker

Pass a custom component to StepMarker to render a specific component for every step (including the thumb and all other steps). The component receives the following props:

• stepMarked: boolean - true if the thumb is currently on this step.
• currentValue: number - The current value of the Slider.
• index: number - The index of this specific step instantiation.
• min: number - The minimum value of the Slider.
• max: number - The maximum value of the Slider.

The example-web directory provides a way to test or demo the slider library in a web environment using react-native-web. Because the web example depends on the built version of the library, you must build the library package before starting the web development server.

Follow these steps to set up and run the example:

1. Build the library: Navigate to the package folder and run the prepare script.
2. Start the web server: Navigate back to example-web and start the development server.

:warning: NOTE: Every time you modify the underlying library code, you must re-run npm run prepare in the package folder and restart the dev server in example-web to see the changes.

# 1. Build the library
cd ../package
npm run prepare

# 2. Run the dev server
cd ../example-web
npm start

Install the slider module using yarn or npm. If you are developing for iOS, you must also install the cocoapods dependencies.

yarn add @react-native-community/slider

or

npm install @react-native-community/slider --save

For iOS:

npx pod-install

Import Slider from @react-native-community/slider and use it within your component. You can control the range via minimumValue and maximumValue, and style the track colors using minimumTrackTintColor and maximumTrackTintColor.

import Slider from '@react-native-community/slider';

<Slider
  style={{width: 200, height: 40}}
  minimumValue={0}
  maximumValue={1}
  minimumTrackTintColor="#FFFFFF"
  maximumTrackTintColor="#000000"
  thumbSize={32}
/>

The react-native.config.js file defines how the library integrates with native platforms. For Android, the library specifies its native module name, component descriptors, and the path to the CMake configuration file used for JNI builds.

This configuration is typically handled automatically by the package, but it is relevant if you are performing custom native builds or debugging the JNI layer.

module.exports = {
  dependency: {
    platforms: {
      android: {
        libraryName: 'RNCSlider',
        componentDescriptors: ['RNCSliderComponentDescriptor'],
        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
      },
    },
  },
};

To ensure the library code is correctly transpiled by Babel in the web environment, the @dealmore/craco-plugin-babel-include plugin is used. This forces Babel to include the specific path of the slider library build (../package/dist/Slider.js) in its compilation process.

const babelInclude = require('@dealmore/craco-plugin-babel-include');
const path = require('path');
const LIB_PATH = `../package/dist/Slider.js`;

module.exports = {
  plugins: [
    {
      plugin: babelInclude,
      options: {
        include: [
          path.resolve(__dirname, LIB_PATH),
        ],
      },
    },
  ],
};

The web example requires specific Babel presets and plugins to handle React and TypeScript syntax, as well as modern JavaScript proposals used in the library code.

Presets:

• @babel/preset-react
• @babel/preset-typescript

Plugins:

• @babel/plugin-proposal-private-methods
• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-private-property-in-object

module.exports = {
  webpack: {
    babel: {
      presets: [
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
      plugins: [
        '@babel/plugin-proposal-private-methods',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-private-property-in-object',
      ],
    },
  },
};

The web example uses Webpack aliases to redirect React Native imports to web-compatible versions and to ensure the @react-native-community/slider package points to the local build. It also forces a single instance of react to prevent version conflicts.

Key aliases used:

• react-native$: Redirected to react-native-web.
• @react-native-community/slider: Redirected to the local library build at ../package/dist/Slider.js.
• react: Redirected to the local ./node_modules/react to avoid multiple React instances.

const path = require('path');
const LIB_PATH = `../package/dist/Slider.js`;

module.exports = {
  webpack: {
    alias: {
      'react-native$': 'react-native-web',
      '@react-native-community/slider': path.resolve(__dirname, LIB_PATH),
      'react': path.resolve(__dirname, './node_modules/react'),
    },
  },
};

The example project uses @react-native/metro-config to manage its Metro bundler configuration. It follows the standard pattern of retrieving the default configuration via getDefaultConfig(__dirname) and merging it with a custom config object using mergeConfig.

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Ensure your React Native version is compatible with the version of @react-native-community/slider you are using: