fix: slider padding for android (#64)

gajjartejas · Oct 16, 2023 · 3f297d3 · 3f297d3
1 parent e1939d5
commit 3f297d3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/app/components/AppSliderDialog.tsx b/app/components/AppSliderDialog.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 //ThirdParty
 import { Dialog, Text, useTheme, Button } from 'react-native-paper';
@@ -58,8 +58,9 @@ function AppSliderDialog(props: IAppSliderDialogProps) {
  step={step}
  value={currentValue}
  onValueChange={setCurrentValue}
+ thumbTintColor={colors.primary}
  />
- <Text style={[styles.descriptionText, { color: `${colors.onBackground}88` }]}>{valueLabel}</Text>
+ <Text style={[styles.bottomDescriptionText, { color: `${colors.onBackground}88` }]}>{valueLabel}</Text>
  </Dialog.Content>
  <Dialog.Actions>
  <Button onPress={onPressCancel}>{cancelText}</Button>
@@ -87,12 +88,18 @@ const styles = StyleSheet.create({
  descriptionText: {
  fontSize: 16,
  },
+ bottomDescriptionText: {
+ fontSize: 16,
+ marginTop: 16,
+ },
  cardTablet: {
  width: '70%',
  alignSelf: 'center',
  },
  slider: {
- marginTop: 12,
+ marginTop: 16,
+ marginLeft: Platform.select({ ios: 0, android: -15 }),
+ marginRight: Platform.select({ ios: 0, android: -15 }),
  },
 });
 

diff --git a/app/screens/Settings/CardAnimation/index.tsx b/app/screens/Settings/CardAnimation/index.tsx
@@ -94,7 +94,7 @@ const CardAnimation = ({ navigation }: Props) => {
  <Components.AppBaseView edges={['bottom', 'left', 'right']} style={styles.safeArea}>
  <View style={styles.subView}>
  <View style={[styles.listContainer, largeScreenMode && styles.cardTablet]}>
- <View style={styles.rightSpacing32}>
+ <View style={largeScreenMode && [styles.rightSpacing32]}>
  <Animated.View
  entering={FadeIn.duration(1200).easing(Easing.bezierFn(1, 0, 0.17, 0.98))}
  layout={Layout.springify()}
@@ -140,6 +140,7 @@ const CardAnimation = ({ navigation }: Props) => {
  <View style={[styles.halfWidth, styles.rowMargin]}>
  <RowTitle title={t('cardAnimation.initDelay')} />
  <Slider
+ style={styles.slider}
  value={initialDelay}
  onSlidingComplete={v => setInitialDelay(v)}
  minimumValue={0}
@@ -153,6 +154,7 @@ const CardAnimation = ({ navigation }: Props) => {
  <View style={[styles.halfWidth, styles.rowMargin]}>
  <RowTitle title={t('cardAnimation.duration')} />
  <Slider
+ style={styles.slider}
  value={duration}
  onSlidingComplete={v => setDuration(v)}
  minimumValue={0}
@@ -167,6 +169,7 @@ const CardAnimation = ({ navigation }: Props) => {
  <View style={[styles.halfWidth, styles.rowMargin]}>
  <RowTitle title={t('cardAnimation.strokeWidth')} />
  <Slider
+ style={styles.slider}
  value={strokeWidth}
  onSlidingComplete={v => setStrokeWidth(v)}
  minimumValue={0}
@@ -180,6 +183,7 @@ const CardAnimation = ({ navigation }: Props) => {
  <View style={[styles.halfWidth, styles.rowMargin]}>
  <RowTitle title={t('cardAnimation.arrowFont')} />
  <Slider
+ style={styles.slider}
  onSlidingComplete={v => setArrowFontSize(v)}
  minimumValue={1}
  step={1}

diff --git a/app/screens/Settings/CardAnimation/styles.tsx b/app/screens/Settings/CardAnimation/styles.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
  container: {
@@ -47,6 +47,11 @@ const styles = StyleSheet.create({
  rightSpacing32: {
  marginRight: 32,
  },
+ slider: {
+ marginLeft: Platform.select({ ios: 0, android: -10 }),
+ marginRight: Platform.select({ ios: 0, android: -10 }),
+ marginTop: Platform.select({ ios: 4, android: 8 }),
+ },
 });
 
 export default styles;