diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx index 969407e0..4d9ecb08 100644 --- a/example/src/Examples.tsx +++ b/example/src/Examples.tsx @@ -433,6 +433,11 @@ const styles = StyleSheet.create({ borderRadius: 1, backgroundColor: '#334488', }, + noPaddingContainer: { + backgroundColor: '#645f5f', + borderRadius: 4, + paddingVertical: 8, + }, }); export const examples: Props[] = [ @@ -460,6 +465,23 @@ export const examples: Props[] = [ return ; }, }, + { + title: 'Custom padding on Android', + render(): React.ReactElement { + return ( + + + + ); + }, + }, { title: 'Limit on positive values [30, 80]', render() { diff --git a/package/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManagerImpl.java b/package/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManagerImpl.java index 3c7f057a..56022e0e 100644 --- a/package/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManagerImpl.java +++ b/package/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManagerImpl.java @@ -35,6 +35,10 @@ public static ReactSlider createViewInstance(ThemedReactContext context) { return slider; } + public static void setPadding(ReactSlider view, int left, int top, int right, int bottom) { + view.setPadding(left, top, right, bottom); + } + public static void setValue(ReactSlider view, double value) { if (view.isSliding() == false) { view.setValue(value); diff --git a/package/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java b/package/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java index c780b8a4..b4544c88 100644 --- a/package/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java +++ b/package/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java @@ -105,6 +105,7 @@ public void setDisabled(ReactSlider view, boolean disabled) { ReactSliderManagerImpl.setDisabled(view, disabled); } + @Override @ReactProp(name = "value", defaultFloat = 0f) public void setValue(ReactSlider view, float value) { @@ -165,6 +166,18 @@ public void setAccessibilityIncrements(ReactSlider view, ReadableArray accessibi ReactSliderManagerImpl.setAccessibilityIncrements(view, accessibilityIncrements); } + @ReactProp(name = "padding") + public void setPadding(ReactSlider view, ReadableMap paddingMap) { + if (paddingMap != null) { + int left = paddingMap.hasKey("left") ? paddingMap.getInt("left") : view.getPaddingLeft(); + int top = paddingMap.hasKey("top") ? paddingMap.getInt("top") : view.getPaddingTop(); + int right = paddingMap.hasKey("right") ? paddingMap.getInt("right") : view.getPaddingRight(); + int bottom = paddingMap.hasKey("bottom") ? paddingMap.getInt("bottom") : view.getPaddingBottom(); + + ReactSliderManagerImpl.setPadding(view, left, top, right, bottom); + } + } + @ReactProp(name = "lowerLimit") public void setLowerLimit(ReactSlider view, float value) { ReactSliderManagerImpl.setLowerLimit(view, value); diff --git a/package/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java b/package/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java index 05482018..49394148 100644 --- a/package/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java +++ b/package/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java @@ -140,6 +140,18 @@ public void setMaximumValue(ReactSlider view, float value) { ReactSliderManagerImpl.setMaximumValue(view, value); } + @ReactProp(name = "padding") + public void setPadding(ReactSlider view, ReadableMap paddingMap) { + if (paddingMap != null) { + int left = paddingMap.hasKey("left") ? paddingMap.getInt("left") : view.getPaddingLeft(); + int top = paddingMap.hasKey("top") ? paddingMap.getInt("top") : view.getPaddingTop(); + int right = paddingMap.hasKey("right") ? paddingMap.getInt("right") : view.getPaddingRight(); + int bottom = paddingMap.hasKey("bottom") ? paddingMap.getInt("bottom") : view.getPaddingBottom(); + + ReactSliderManagerImpl.setPadding(view, left, top, right, bottom); + } + } + @ReactProp(name = "lowerLimit") public void setLowerLimit(ReactSlider view, float value) { ReactSliderManagerImpl.setLowerLimit(view, value); diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index 015b1561..5282246a 100644 --- a/package/src/Slider.tsx +++ b/package/src/Slider.tsx @@ -197,6 +197,17 @@ type Props = ViewProps & * The number of elements must be the same as `maximumValue`. */ accessibilityIncrements?: Array; + + /** + * Android Only. + * Custom padding configuration + */ + padding?: { + left?: number; + top?: number; + right?: number; + bottom?: number; + }; }>; const SliderComponent = ( diff --git a/package/typings/index.d.ts b/package/typings/index.d.ts index abae2dcb..d6653dac 100644 --- a/package/typings/index.d.ts +++ b/package/typings/index.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { FC } from 'react'; +import {FC} from 'react'; import * as ReactNative from 'react-native'; -import { ImageURISource } from 'react-native'; +import {ImageURISource} from 'react-native'; type Constructor = new (...args: any[]) => T; @@ -113,6 +113,16 @@ export interface SliderProps */ minimumValue?: number; + /** + * Custom padding on android + */ + padding?: { + left?: number; + top?: number; + right?: number; + bottom?: number; + }; + /** * Callback that is called when the user picks up the slider. * The initial value is passed as an argument to the callback handler. @@ -168,7 +178,7 @@ export interface SliderProps StepMarker?: FC; /** - * + * */ renderStepNumber?: boolean;