fix(web): fix issues preventing web implementation from working (#462)

* fix(web): fix issues preventng web implementation from working

* feat(web): animate the position of the web slider

* chore(example-web): add an example web project

* feat(web): add the ability to render a thumbImage for web

#355

* fix(web): fix issue where disabled web sliders are still functional

* Update package/src/RNCSliderNativeComponent.web.tsx

Author: jspizziri

example-web/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

example-web/README.md

@@ -0,0 +1,26 @@
+# Web Example
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Setup
+
+This example project can be used to test/demo this project in the context of
+`react-native-web`. Here's how to use it:
+
+1. Build the library:
+    ```sh
+    # go to the `package` folder
+    cd ../package
+    # build the library
+    npm run prepare
+    # go back to the example
+    cd ../example-web
+    ```
+2. Run the dev server:
+    ```sh
+    npm start
+    ```
+
+
+:warning: **NOTE**: each time you make a change to the underlying lib you'll
+need to run `npm run prepare` and `npm start` again.

example-web/craco.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const babelInclude = require('@dealmore/craco-plugin-babel-include');
+const webpack = require('webpack');
+
+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),
+      // make sure we don't include multiple versions of react
+      'react': path.resolve(__dirname, './node_modules/react'),
+    },
+    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',
+      ],
+    },
+  },
+
+  plugins: [
+    {
+      plugin: babelInclude,
+      options: {
+        include: [
+          path.resolve(__dirname, LIB_PATH),
+        ],
+      },
+    },
+  ],
+};