Modernize slider

.nvmrc

@@ -0,0 +1 @@
+22.13.0

README.md

@@ -69,7 +69,7 @@ To use this library you need to ensure you are using the correct version of Reac
 | `4.x.x`                                  | `>=0.60`; `>=0.62` (on Windows); |
 | `3.1.x`                                  | `>=0.60`                     |
 | `2.x.x`                                  | `>= 0.60`                    |
-| [`1.x.x`](https://github.com/react-native-community/react-native-slider/tree/937f0942f1fffc6ed88b5cf7c88d73b7878f00f0) | `<= 0.59` |
+| [`1.x.x`](https://github.com/callstack/react-native-slider/tree/937f0942f1fffc6ed88b5cf7c88d73b7878f00f0) | `<= 0.59` |
 
 
 ## Properties
@@ -93,14 +93,14 @@ To use this library you need to ensure you are using the correct version of Reac
 | `tapToSeek` | Permits tapping on the slider track to set the thumb position.<br/>Defaults to false on iOS. No effect on Android or Windows. | bool | iOS |
 | `inverted` | Reverses the direction of the slider.<br/>Default value is false. | bool | |
 | `vertical` | Changes the orientation of the slider to vertical, if set to `true`.<br/>Default value is false. | bool | Windows |
-| `thumbTintColor` | Color of the foreground switch grip.<br/>**NOTE:** This prop will override the `thumbImage` prop set, meaning that if both `thumbImage` and `thumbTintColor` will be set, image used for the thumb may not be displayed correctly! | [color](https://reactnative.dev/docs/colors) | Android |
+| `thumbTintColor` | Color of the foreground switch grip.<br/>**NOTE:** This prop will override the `thumbImage` prop set, meaning that if both `thumbImage` and `thumbTintColor` will be set, image used for the thumb may not be displayed correctly! | [color](https://reactnative.dev/docs/colors) | Android, iOS, Web |
 | `thumbSize` | Sets the size (width and height) of the thumb.<br/>If `thumbImage` is provided, it will be scaled to this size.<br/>Units: points on iOS, dp on Android. | number | Android, iOS, Web |
-| `maximumTrackImage` | Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
-| `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
-| `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image<br/>.propTypes<br/>.source | |
-| `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
-| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,<br/>with the possibility to change the styling, when thumb is at that given step | `FC<MarkerProps>` | iOS, Android, Windows |
-| [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track | bool | iOS, Android, Windows |
+| `maximumTrackImage` | Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS, Web |
+| `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS, Web |
+| `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image<br/>.propTypes<br/>.source | iOS, Web |
+| `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS, Web |
+| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,<br/>with the possibility to change the styling, when thumb is at that given step | `FC<MarkerProps>` | Android, iOS, Web |
+| [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track | bool | Android, iOS, Web |
 | `ref` | Reference object. | MutableRefObject | web |
 | `View` | [Inherited `View` props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props) | | |
 
@@ -236,7 +236,7 @@ You can also do this manually by:
 
 ## Contributors
 
-This module was extracted from `react-native` core. Please, refer to [contributors graph](https://github.com/react-native-community/react-native-slider/graphs/contributors) for the complete list of contributors.
+This module was extracted from `react-native` core. Please, refer to [contributors graph](https://github.com/callstack/react-native-slider/graphs/contributors) for the complete list of contributors.
 
 ---
 

example-web/craco.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const babelInclude = require('@dealmore/craco-plugin-babel-include');
 const webpack = require('webpack');
 
-const LIB_PATH = `../package/dist/Slider.js`;
+const LIB_PATH = `../package/src`;
 
 module.exports = {
   webpack: {
@@ -12,6 +12,19 @@ module.exports = {
       // make sure we don't include multiple versions of react
       'react': path.resolve(__dirname, './node_modules/react'),
     },
+    configure: webpackConfig => {
+      webpackConfig.resolve.extensions = [
+        '.web.tsx',
+        '.web.ts',
+        '.web.js',
+        ...webpackConfig.resolve.extensions.filter(
+          extension =>
+            !['.web.tsx', '.web.ts', '.web.js'].includes(extension),
+        ),
+      ];
+
+      return webpackConfig;
+    },
     babel: {
       presets: [
         '@babel/preset-react',

example-web/src/App.tsx

@@ -1,34 +1,40 @@
-import React from 'react';
+import React, {useState} from "react";
 import {
-  Text,
-  View,
-  ScrollView,
+  Image,
   Platform,
+  Pressable,
+  ScrollView,
   StyleSheet,
-// @ts-ignore
-} from 'react-native';
+  Text,
+  View,
+} from "react-native";
+import Slider from "@react-native-community/slider";
 
-import {examples, Props as ExamplesTabProperties} from './Examples';
-import {propsExamples, Props as PropsTabProperties} from './Props';
+import {examples, type Props as ExamplesTabProperties} from "./Examples";
+import {propsExamples, type Props as PropsTabProperties} from "./Props";
+
+const App = () => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const titles = ["Examples", "Props"];
 
-function App() {
   const renderExampleTab = (
     sliders: PropsTabProperties[] | ExamplesTabProperties[],
     filtered?: boolean,
   ) => {
+    const tabSliders = filtered
+      ? (sliders as ExamplesTabProperties[]).filter(
+          e => !e.platform || e.platform === Platform.OS,
+        )
+      : sliders;
+
     return (
-      <View>
+      <View style={styles.page}>
         <ScrollView
           style={styles.scrollView}
           contentContainerStyle={styles.container}>
-          {(filtered
-            ? (sliders as ExamplesTabProperties[]).filter(
-                e => !e.platform || e.platform === Platform.OS,
-              )
-            : sliders
-          ).map((e, i) => (
-            <View key={`slider${i}`} style={styles.sliderWidget}>
-              <Text style={styles.instructions}>{e.title}</Text>
+          {tabSliders.map((e, i) => (
+            <View key={`slider${i}`} style={styles.sliderCard}>
+              <Text style={styles.cardTitle}>{e.title}</Text>
               {e.render()}
             </View>
           ))}
@@ -38,56 +44,182 @@ function App() {
   };
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <View style={{ width: '100%', margin: 'auto' }}>
-          {renderExampleTab(examples, true)}
-          {renderExampleTab(propsExamples)}
+    <View style={styles.homeScreenContainer}>
+      <View style={styles.header}>
+        <View style={styles.brandRow}>
+          <Image
+            accessibilityIgnoresInvertColors
+            resizeMode="cover"
+            source={require("../assets/slider-example-icon.png")}
+            style={styles.brandMark}
+          />
+          <View style={styles.brandCopy}>
+            <Text style={styles.eyebrow}>Callstack</Text>
+            <Text style={styles.appTitle}>React Native Slider</Text>
+          </View>
         </View>
-      </header>
-    </div>
+        <View style={styles.tabBar}>
+          {titles.map((title, index) => {
+            const isActive = index === currentPage;
+            return (
+              <Pressable
+                accessibilityState={{selected: isActive}}
+                key={title}
+                onPress={() => setCurrentPage(index)}
+                role="button"
+                style={[styles.tab, isActive && styles.activeTab]}>
+                <Text style={[styles.tabText, isActive && styles.activeTabText]}>
+                  {title}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+        <Slider
+          step={1}
+          maximumValue={1}
+          minimumValue={0}
+          style={styles.pageIndicator}
+          value={currentPage}
+          thumbTintColor={colors.accent}
+          disabled
+          maximumTrackTintColor={colors.track}
+          minimumTrackTintColor={colors.accent}
+        />
+        <Text testID="testTextId" style={styles.sectionTitle}>
+          {titles[currentPage]}
+        </Text>
+      </View>
+      {currentPage === 0
+        ? renderExampleTab(examples, true)
+        : renderExampleTab(propsExamples, true)}
+    </View>
   );
-}
+};
 
 export default App;
 
-const pageViewPositionSlider = {
-  trackColor: '#ABABAB',
-  thumbColor: '#1411AB',
-  style: {
-    width: '100%',
-  },
+const colors = {
+  accent: "#7C5CFF",
+  border: "#D9DEEA",
+  card: "#FFFFFF",
+  ink: "#201A3D",
+  page: "#F3F5FA",
+  track: "#51486F",
 };
 
 const styles = StyleSheet.create({
-  pagerViewContainer: {
+  homeScreenContainer: {
     flex: 1,
+    minHeight: "100vh" as never,
+    backgroundColor: colors.ink,
   },
-  homeScreenContainer: {
+  header: {
+    backgroundColor: colors.ink,
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 18,
+  },
+  brandRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 14,
+    marginBottom: 22,
+  },
+  brandMark: {
+    width: 52,
+    height: 52,
+    borderRadius: 16,
+  },
+  brandCopy: {
+    flex: 1,
+  },
+  eyebrow: {
+    color: "#B9B2DF",
+    fontSize: 12,
+    fontWeight: "700",
+    letterSpacing: 0,
+    marginBottom: 2,
+    textTransform: "uppercase",
+  },
+  appTitle: {
+    color: colors.card,
+    fontSize: 28,
+    fontWeight: "800",
+    letterSpacing: 0,
+  },
+  tabBar: {
+    flexDirection: "row",
+    backgroundColor: "#332A61",
+    borderRadius: 8,
+    padding: 4,
+  },
+  tab: {
+    alignItems: "center",
+    borderRadius: 6,
     flex: 1,
+    minHeight: 40,
+    justifyContent: "center",
+  },
+  activeTab: {
+    backgroundColor: colors.card,
+  },
+  tabText: {
+    color: "#D9D4F4",
+    fontSize: 14,
+    fontWeight: "700",
+  },
+  activeTabText: {
+    color: colors.ink,
+  },
+  pageIndicator: {
+    height: 32,
+    marginHorizontal: -4,
+    marginTop: 12,
+  },
+  sectionTitle: {
+    color: colors.card,
+    fontSize: 18,
+    fontWeight: "700",
+    marginTop: 2,
+  },
+  page: {
+    flex: 1,
+    backgroundColor: colors.page,
   },
   scrollView: {
-    backgroundColor: '#F5FCFF',
+    backgroundColor: colors.page,
   },
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 20,
-  },
-  title: {
-    fontSize: 30,
-    color: pageViewPositionSlider.thumbColor,
-    textAlign: 'center',
-    width: '100%',
-    marginVertical: 20,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-    fontSize: 20,
-  },
-  sliderWidget: {
-    marginVertical: 30,
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 28,
+  },
+  sliderCard: {
+    alignSelf: "center",
+    backgroundColor: colors.card,
+    borderColor: colors.border,
+    borderRadius: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+    marginBottom: 14,
+    maxWidth: 460,
+    paddingHorizontal: 18,
+    paddingVertical: 18,
+    width: "100%",
+    boxShadow: "0 8px 18px rgba(16, 24, 40, 0.08)" as never,
+  },
+  cardTitle: {
+    alignSelf: "stretch",
+    color: colors.ink,
+    flexShrink: 1,
+    flexWrap: "wrap",
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 22,
+    marginBottom: 12,
+    maxWidth: "100%",
+    textAlign: "center",
+    whiteSpace: "normal" as never,
   },
 });