Slider type error #321
Description
Environment
System:
OS: macOS 11.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 65.41 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 15.12.0 - ~/.nvm/versions/node/v15.12.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.3, 30.0.3
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7351085
Xcode: 12.5/12E262 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_292 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.64.1 => 0.64.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Description
When I try to encapsulate the Slider, I get a type error
Reproducible Demo
type Props = { label: ReactNode; prefix?: ReactNode; unit?: string } & SliderProps;
export function InputSlider({
label,
prefix,
minimumValue = 0,
maximumValue,
value,
unit,
...rest
}: Props) {
return (
<View style={styles.container}>
<View style={styles.title}>
{prefix && <Text style={styles.labelPrefix}>{prefix}</Text>}
<View>
{label && <Text style={styles.label}>{label}</Text>}
<Text style={styles.value}>
{value} {unit}
</Text>
</View>
</View>
<Slider
{...rest}
value={value}
style={styles.slider}
minimumValue={minimumValue}
maximumValue={maximumValue}
minimumTrackTintColor={colors.blue}
thumbTintColor="white"
/>
</View>
);
}
// instantiate
<InputSlider
label="title"
prefix={<IconDollar />}
maximumValue={15000}
value={value}
onValueChange={val => setValue(val)}
unit="$"
step={1000}
/>
error info
No overload matches this call.
Overload 1 of 2, '(props: SliderProps | Readonly): Slider', gave the following error.
Type '{ value: number | undefined; style: { width: string; }; minimumValue: number; maximumValue: number | undefined; minimumTrackTintColor: string; thumbTintColor: string; disabled?: boolean | undefined; ... 65 more ...; vertical?: boolean | undefined; }' is not assignable to type 'IntrinsicClassAttributes'.
Types of property 'ref' are incompatible.
Type 'MutableRefObject | undefined' is not assignable to type 'LegacyRef | undefined'.
Type 'MutableRefObject' is not assignable to type 'LegacyRef | undefined'.
Type 'MutableRefObject' is not assignable to type 'RefObject'.
Types of property 'current' are incompatible.
Type 'SliderRef' is not assignable to type 'NativeMethods & SliderComponent'.
Type 'SliderRef' is missing the following properties from type 'NativeMethods': measure, measureInWindow, measureLayout, setNativeProps, and 3 more.
Overload 2 of 2, '(props: SliderProps, context: any): Slider', gave the following error.
Type '{ value: number | undefined; style: { width: string; }; minimumValue: number; maximumValue: number | undefined; minimumTrackTintColor: string; thumbTintColor: string; disabled?: boolean | undefined; ... 65 more ...; vertical?: boolean | undefined; }' is not assignable to type 'IntrinsicClassAttributes'.
Types of property 'ref' are incompatible.
Type 'MutableRefObject | undefined' is not assignable to type 'LegacyRef | undefined'.