Skip to content

Commit 55edcf3

Browse files
alantoaalantoa
committed
web & example improvements
1 parent 27cc20c commit 55edcf3

18 files changed

+2280
-2090
lines changed

‎docs/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"next": "^15.1.1",
1212
"nextra": "^3.2.5",
1313
"nextra-theme-docs": "^3.2.5",
14-
"react": "^18.2.0",
15-
"react-dom": "^18.2.0"
14+
"react": "18.2.0",
15+
"react-dom": "18.2.0"
1616
},
1717
"devDependencies": {
1818
"tailwindcss": "^3.4.17"

‎example/package.json

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,22 @@
99
},
1010
"dependencies": {
1111
"@expo/webpack-config": "~19.0.1",
12-
"expo": "^51.0.38",
13-
"expo-haptics": "~13.0.1",
14-
"expo-splash-screen": "~0.27.6",
15-
"expo-status-bar": "~1.12.1",
16-
"lottie-react-native": "6.7.0",
12+
"expo": "^52.0.20",
13+
"expo-haptics": "~14.0.0",
14+
"expo-splash-screen": "~0.29.18",
15+
"expo-status-bar": "~2.0.0",
16+
"lottie-react-native": "7.1.0",
1717
"react": "18.2.0",
1818
"react-dom": "18.2.0",
19-
"react-native": "0.74.5",
20-
"react-native-gesture-handler": "~2.20.0",
19+
"react-native": "0.76.5",
20+
"react-native-gesture-handler": "~2.20.2",
2121
"react-native-reanimated": "3.16.1",
22-
"react-native-web": "~0.19.6"
22+
"react-native-web": "~0.19.13",
23+
"react-native-web-lottie": "^1.4.4"
2324
},
2425
"devDependencies": {
25-
"@babel/core": "^7.24.0",
26-
"@types/react": "~18.2.79",
26+
"@babel/core": "^7.25.2",
27+
"@types/react": "~18.3.12",
2728
"babel-loader": "^8.1.0",
2829
"babel-plugin-module-resolver": "^5.0.0",
2930
"typescript": "^5.3.3"

‎example/src/App.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,17 @@ export default function App() {
1818
<View style={styles.full}>
1919
<ScrollView
2020
style={styles.view}
21+
centerContent
2122
contentContainerStyle={styles.contentContainerStyle}
2223
>
2324
<Examples.Basic />
2425
<Examples.BinanceSlider />
2526
<Examples.WithStep />
2627
<Examples.WithCache />
2728
<Examples.WithHaptic />
28-
<Examples.WithLottie />
2929
<Examples.WithCustomBubble />
3030
<Examples.WithDisableTrack />
31+
<Examples.WithLottie />
3132
</ScrollView>
3233
</View>
3334
</SafeAreaView>
@@ -43,6 +44,9 @@ const styles = StyleSheet.create({
4344
view: {
4445
paddingHorizontal: 20,
4546
paddingBottom: 40,
47+
maxWidth: 800,
48+
marginHorizontal: 'auto',
49+
width: '100%',
4650
},
4751
contentContainerStyle: {
4852
paddingBottom: 100,

‎example/src/components/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './text';
2+
export * from './switch';

‎example/src/components/switch.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Switch as NativeSwitch, SwitchProps } from 'react-native';
2+
import { COLORS } from '../sample/src/constants';
3+
4+
export function Switch(props: SwitchProps) {
5+
return (
6+
<NativeSwitch
7+
trackColor={{
8+
false: COLORS.borderColor,
9+
true: COLORS.bubbleBackgroundColor,
10+
}}
11+
thumbColor={COLORS.markColor}
12+
// @ts-ignore
13+
activeThumbColor={COLORS.markColor}
14+
{...props}
15+
/>
16+
);
17+
}

‎example/src/components/text.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Text as NativeText,
66
TextProps,
77
} from 'react-native';
8+
import { COLORS } from '../sample/src/constants';
89
const normalize = (size: number) => size;
910
export interface _TextProps extends TextProps {
1011
h1?: boolean;
@@ -14,7 +15,7 @@ export interface _TextProps extends TextProps {
1415
h5?: boolean;
1516
t1?: boolean;
1617
t2?: boolean;
17-
tBold?: boolean;
18+
bold?: boolean;
1819
t3?: boolean;
1920
t4?: boolean;
2021
t5?: boolean;
@@ -34,14 +35,14 @@ export const Text = React.forwardRef<NativeText, _TextProps>(function Text(
3435
h5 = false,
3536
t1 = false,
3637
t2 = false,
37-
tBold = false,
38+
bold = false,
3839
t3 = false,
3940
t4 = false,
4041
t5 = false,
4142
children = '',
4243
tx = '',
4344
verticalCenter = false,
44-
color = '#111',
45+
color = COLORS.textColor,
4546
isCenter,
4647
paragraph,
4748
...rest
@@ -56,7 +57,7 @@ export const Text = React.forwardRef<NativeText, _TextProps>(function Text(
5657
{ color },
5758
isCenter && styles.textCenter,
5859

59-
(t1 || t2 || t3 || t4 || t5) && tBold && styles.enTBold,
60+
(t1 || t2 || t3 || t4 || t5) && bold && styles.enTBold,
6061
h1 &&
6162
StyleSheet.flatten([
6263
{ fontSize: normalize(28) },

‎example/src/sample/src/binance-slider.tsx

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
11
import { Slider } from 'react-native-awesome-slider';
2-
import {
3-
StyleSheet,
4-
Switch,
5-
TextInput,
6-
TouchableOpacity,
7-
View,
8-
} from 'react-native';
2+
import { Platform, StyleSheet, TextInput, Pressable, View } from 'react-native';
93
import {
104
SharedValue,
115
useAnimatedReaction,
126
useAnimatedStyle,
137
useSharedValue,
148
} from 'react-native-reanimated';
15-
import { Text } from '../../components';
169
import Animated from 'react-native-reanimated';
1710
import { useCallback, useState } from 'react';
1811
import { COLORS } from './constants';
1912
import { SliderCard } from './components/slider-card';
13+
import { Text, Switch } from '../../components';
2014

21-
const markWidth = 8;
15+
const markWidth = 10;
2216
const thumbWidth = markWidth + 4;
2317
const backgroundColor = COLORS.backgroundColor;
2418
const markColor = COLORS.markColor;
@@ -46,8 +40,8 @@ const Thumb = () => {
4640
return (
4741
<View
4842
style={{
49-
width: thumbWidth + 2,
50-
height: thumbWidth + 2,
43+
width: thumbWidth,
44+
height: thumbWidth,
5145
transform: [{ rotate: '45deg' }],
5246
backgroundColor: backgroundColor,
5347
borderWidth: 1,
@@ -60,6 +54,8 @@ const Thumb = () => {
6054
export function BinanceSlider() {
6155
const [value, setValue] = useState(25);
6256
const [forceSnapToStep, setForceSnapToStep] = useState(false);
57+
const [snapThreshold, setSnapThreshold] = useState(6);
58+
6359
const progress = useSharedValue(100);
6460
const min = useSharedValue(0);
6561
const max = useSharedValue(100);
@@ -92,10 +88,11 @@ export function BinanceSlider() {
9288
fontSize: 14,
9389
width: 120,
9490
}}
95-
focusable={false}
9691
autoFocus={false}
97-
keyboardType="numeric"
98-
defaultValue={value.toString() ?? `0`}
92+
inputMode="numeric"
93+
{...(Platform.OS === 'web'
94+
? { value: value.toString() }
95+
: { defaultValue: value.toString() })}
9996
placeholder="Enter value"
10097
onChangeText={(text) => {
10198
if (!isNaN(Number(text))) {
@@ -110,7 +107,7 @@ export function BinanceSlider() {
110107
}}
111108
/>
112109

113-
<TouchableOpacity
110+
<Pressable
114111
style={{
115112
flexDirection: 'row',
116113
alignItems: 'center',
@@ -124,8 +121,8 @@ export function BinanceSlider() {
124121
<Text style={{ fontSize: 14, fontWeight: '500', color: markColor }}>
125122
-
126123
</Text>
127-
</TouchableOpacity>
128-
<TouchableOpacity
124+
</Pressable>
125+
<Pressable
129126
style={{
130127
flexDirection: 'row',
131128
alignItems: 'center',
@@ -139,13 +136,13 @@ export function BinanceSlider() {
139136
<Text style={{ fontSize: 14, fontWeight: '500', color: markColor }}>
140137
+
141138
</Text>
142-
</TouchableOpacity>
139+
</Pressable>
143140
</View>
144141
</View>
145142
<Slider
146143
steps={step}
147144
thumbWidth={thumbWidth}
148-
sliderHeight={2}
145+
sliderHeight={3}
149146
isScrubbing={isScrubbing}
150147
disableTrackPress
151148
// thumbTouchSize={thumbWidth * 2}
@@ -160,7 +157,7 @@ export function BinanceSlider() {
160157
bubble={useCallback((s: number) => {
161158
return `${Math.round(s)}%`;
162159
}, [])}
163-
snapThreshold={6}
160+
snapThreshold={snapThreshold}
164161
snapThresholdMode="absolute"
165162
markWidth={markWidth}
166163
renderMark={useCallback(
@@ -189,10 +186,33 @@ export function BinanceSlider() {
189186
maximumValue={max}
190187
thumbScaleValue={thumbScaleValue}
191188
/>
192-
<View style={styles.switchContainer}>
189+
<View style={COLORS.optionStyle}>
193190
<Text style={styles.desc} tx="forceSnapToStep" />
194191
<Switch value={forceSnapToStep} onValueChange={setForceSnapToStep} />
195192
</View>
193+
<View style={COLORS.optionStyle}>
194+
<Text style={styles.desc} tx="snapThreshold" />
195+
<TextInput
196+
style={{
197+
color: markColor,
198+
height: 32,
199+
borderRadius: 8,
200+
fontWeight: '500',
201+
fontSize: 14,
202+
width: 60,
203+
borderWidth: 1,
204+
borderColor: COLORS.borderColor,
205+
justifyContent: 'center',
206+
alignItems: 'center',
207+
textAlign: 'center',
208+
}}
209+
inputMode="numeric"
210+
value={snapThreshold.toString()}
211+
onChangeText={(text) => {
212+
setSnapThreshold(Number(text));
213+
}}
214+
/>
215+
</View>
196216
</SliderCard>
197217
);
198218
}
@@ -233,12 +253,7 @@ const styles = StyleSheet.create({
233253
container: {
234254
flex: 1,
235255
},
236-
switchContainer: {
237-
flexDirection: 'row',
238-
alignItems: 'center',
239-
justifyContent: 'space-between',
240-
height: 38,
241-
},
256+
242257
desc: {
243258
color: COLORS.descriptionColor,
244259
},

‎example/src/sample/src/constants.ts

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,44 @@
1+
import { TextStyle, ViewStyle } from 'react-native';
2+
import { SliderThemeType } from 'react-native-awesome-slider';
3+
14
export const COLORS = {
2-
backgroundColor: '#202630',
3-
inputBackgroundColor: '#29313D',
5+
backgroundColor: '#0A0A0A',
6+
inputBackgroundColor: '#1f1f1f',
47

5-
borderColor: '#343B47',
8+
borderColor: '#474747',
69
markColor: '#EAECEF',
710

811
bubbleBackgroundColor: '#E0E2E5',
912
bubbleTextColor: '#262C36',
1013

1114
textColor: '#EAECEF',
1215
descriptionColor: '#E0E2E5',
13-
1416
cardStyle: {
1517
borderRadius: 8,
1618
padding: 12,
1719
marginTop: 20,
1820
borderWidth: 1,
19-
borderColor: '#333B47',
20-
},
21+
borderColor: '#292929',
22+
gap: 8,
23+
backgroundColor: '#0a0a0a',
24+
} satisfies ViewStyle,
2125

26+
optionStyle: {
27+
flexDirection: 'row',
28+
alignItems: 'center',
29+
justifyContent: 'space-between',
30+
height: 38,
31+
} satisfies ViewStyle,
32+
optionTextStyle: {
33+
fontSize: 14,
34+
fontWeight: '500',
35+
color: '#EAECEF',
36+
} satisfies TextStyle,
2237
sliderTheme: {
23-
maximumTrackTintColor: '#343B47',
38+
maximumTrackTintColor: '#292929',
2439
minimumTrackTintColor: '#EAECEF',
2540
bubbleBackgroundColor: '#E0E2E5',
2641
bubbleTextColor: '#262C36',
27-
},
42+
cacheTrackTintColor: 'rgba(189, 186, 186, 0.6)',
43+
} satisfies SliderThemeType,
2844
};

0 commit comments

Comments
 (0)