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;