docs: replace Slider usages to use @react-native-community/slider (#3716)

* docs: replcae Slider usages to use @react-native-community/slider

* fix lint

Author: tarunrajput

docs/shadow-props.md

@@ -8,10 +8,10 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
 import React, {useState} from 'react';
-import {Text, View, StyleSheet, Slider} from 'react-native';
-
+import {Text, View, StyleSheet} from 'react-native';
+import Slider from '@react-native-community/slider';
 const ShadowPropSlider = ({label, value, ...props}) => {
   return (
     <>
@@ -105,10 +105,11 @@ export default App;
 </TabItem>
 <TabItem value="typescript">
 
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
 import React, {useState} from 'react';
-import {Text, View, StyleSheet, Slider} from 'react-native';
-import type {SliderProps} from 'react-native';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider from '@react-native-community/slider';
+import type {SliderProps} from '@react-native-community/slider';
 
 type ShadowPropSliderProps = SliderProps & {
   label: string;

docs/text-style-props.md

@@ -10,20 +10,20 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
 import React, {useState} from 'react';
 import {
   FlatList,
   Platform,
   ScrollView,
-  Slider,
   StatusBar,
   StyleSheet,
   Switch,
   Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import Slider from '@react-native-community/slider';
 
 const fontStyles = ['normal', 'italic'];
 const fontVariants = [
@@ -368,20 +368,20 @@ export default App;
 </TabItem>
 <TabItem value="typescript">
 
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
 import React, {useState} from 'react';
 import {
   FlatList,
   Platform,
   ScrollView,
-  Slider,
   StatusBar,
   StyleSheet,
   Switch,
   Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import Slider from '@react-native-community/slider';
 
 const fontStyles = ['normal', 'italic'] as const;
 const fontVariants = [

scripts/lint-examples/package.json

@@ -12,6 +12,7 @@
     "@babel/preset-env": "^7.14.0",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^3.0.0",
+    "@react-native-community/slider": "^4.4.2",
     "@tsconfig/react-native": "^2.0.2",
     "@types/jest": "^29.2.3",
     "@types/react": "^18.0.24",

website/versioned_docs/version-0.62/shadow-props.md

@@ -3,9 +3,10 @@ id: shadow-props
 title: Shadow Props
 ---
 
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&dependencies=@react-native-community/slider
 import React, { useState } from "react";
-import { Text, View, StyleSheet, Slider } from "react-native";
+import { Text, View, StyleSheet } from "react-native";
+import Slider from '@react-native-community/slider';
 
 function ShadowPropSlider({ label, value, ...props }) {
   return (

website/versioned_docs/version-0.62/text-style-props.md

@@ -5,9 +5,10 @@ title: Text Style Props
 
 ### Example
 
-```SnackPlayer name=TextStyleProps&supportedPlatforms=android,ios
+```SnackPlayer name=TextStyleProps&supportedPlatforms=android,ios&dependencies=@react-native-community/slider
 import React, { useState } from "react";
-import { FlatList, Platform, ScrollView, Slider, StatusBar, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
+import { FlatList, Platform, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
+import Slider from '@react-native-community/slider';
 import Constants from "expo-constants";
 
 const fontStyles = ["normal", "italic"];

website/versioned_docs/version-0.63/shadow-props.md

@@ -3,9 +3,10 @@ id: shadow-props
 title: Shadow Props
 ---
 
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&dependencies=@react-native-community/slider
 import React, { useState } from "react";
-import { Text, View, StyleSheet, Slider } from "react-native";
+import { Text, View, StyleSheet } from "react-native";
+import Slider from '@react-native-community/slider';
 
 const ShadowPropSlider = ({ label, value, ...props }) => {
   return (

website/versioned_docs/version-0.63/text-style-props.md

@@ -5,9 +5,10 @@ title: Text Style Props
 
 ### Example
 
-```SnackPlayer name=TextStyleProps&supportedPlatforms=android,ios
+```SnackPlayer name=TextStyleProps&supportedPlatforms=android,ios&dependencies=@react-native-community/slider
 import React, { useState } from "react";
-import { FlatList, Platform, ScrollView, Slider, StatusBar, StyleSheet, Switch, Text, TouchableWithoutFeedback, View, StatusBar } from "react-native";
+import { FlatList, Platform, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
+import Slider from '@react-native-community/slider';
 
 const fontStyles = ["normal", "italic"];
 const fontVariants = [

website/versioned_docs/version-0.64/shadow-props.md

@@ -3,9 +3,10 @@ id: shadow-props
 title: Shadow Props
 ---
 
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&dependencies=@react-native-community/slider
 import React, { useState } from "react";
-import { Text, View, StyleSheet, Slider } from "react-native";
+import { Text, View, StyleSheet } from "react-native";
+import Slider from '@react-native-community/slider';
 
 const ShadowPropSlider = ({ label, value, ...props }) => {
   return (

website/versioned_docs/version-0.64/text-style-props.md

@@ -5,9 +5,10 @@ title: Text Style Props
 
 ### Example
 
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&dependencies=@react-native-community/slider
 import React, { useState } from "react";
-import { FlatList, Platform, ScrollView, Slider, StatusBar, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
+import { FlatList, Platform, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
+import Slider from '@react-native-community/slider';
 
 const fontStyles = ["normal", "italic"];
 const fontVariants = [

website/versioned_docs/version-0.65/shadow-props.md

@@ -3,9 +3,10 @@ id: shadow-props
 title: Shadow Props
 ---
 
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&dependencies=@react-native-community/slider
 import React, { useState } from "react";
-import { Text, View, StyleSheet, Slider } from "react-native";
+import { Text, View, StyleSheet } from "react-native";
+import Slider from '@react-native-community/slider';
 
 const ShadowPropSlider = ({ label, value, ...props }) => {
   return (