Skip to content

Commit 10c0c5b

Browse files
troberts-28troberts-28
authored
Merge pull request #81 from troberts-28/release/v2.6.2
Release v2.6.2
2 parents fb766e5 + cc66ab5 commit 10c0c5b

3 files changed

Lines changed: 78 additions & 76 deletions

File tree

‎examples/example-bare/App.tsx‎

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
TouchableOpacity,
1111
UIManager,
1212
View,
13-
useWindowDimensions,
1413
} from "react-native";
1514
import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
1615
import { AudioContext, type AudioBuffer } from "react-native-audio-api";
@@ -27,12 +26,11 @@ if (Platform.OS === "android") {
2726
}
2827

2928
export default function App() {
30-
const { width: screenWidth } = useWindowDimensions();
31-
3229
const scrollViewRef = useRef<ScrollView>(null);
3330
const audioContextRef = useRef<AudioContext | null>(null);
3431
const audioBufferRef = useRef<AudioBuffer | null>(null);
3532

33+
const [pageWidth, setPageWidth] = useState(0);
3634
const [currentPageIndex, setCurrentPageIndex] = useState(0);
3735
const [showPickerExample1, setShowPickerExample1] = useState(false);
3836
const [showPickerExample2, setShowPickerExample2] = useState(false);
@@ -62,23 +60,26 @@ export default function App() {
6260
};
6361
}, []);
6462

65-
useEffect(() => {
66-
// when changing to landscape mode, scroll to the nearest page index
67-
scrollViewRef.current?.scrollTo({
68-
animated: false,
69-
x: screenWidth * currentPageIndex,
70-
});
71-
// eslint-disable-next-line react-hooks/exhaustive-deps
72-
}, [screenWidth]);
63+
const onRootLayout = useCallback(
64+
(event: { nativeEvent: { layout: { width: number } } }) => {
65+
const { width } = event.nativeEvent.layout;
66+
setPageWidth(width);
67+
scrollViewRef.current?.scrollTo({
68+
animated: false,
69+
x: width * currentPageIndex,
70+
});
71+
},
72+
[currentPageIndex]
73+
);
7374

7475
const onMomentumScrollEnd = useCallback(
7576
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
7677
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
7778
const { contentOffset } = event.nativeEvent;
78-
const newPageIndex = Math.round(contentOffset.x / screenWidth) as 0 | 1;
79+
const newPageIndex = Math.round(contentOffset.x / pageWidth) as 0 | 1;
7980
setCurrentPageIndex(newPageIndex);
8081
},
81-
[screenWidth]
82+
[pageWidth]
8283
);
8384

8485
const pickerFeedback = useCallback(() => {
@@ -104,7 +105,7 @@ export default function App() {
104105

105106
const renderExample1 = useMemo(() => {
106107
return (
107-
<View style={[styles.container, styles.page1Container, { width: screenWidth }]}>
108+
<View style={[styles.container, styles.page1Container, { width: pageWidth }]}>
108109
<Text style={styles.textDark}>
109110
{alarmStringExample1 !== null ? "Alarm set for" : "No alarm set"}
110111
</Text>
@@ -141,11 +142,11 @@ export default function App() {
141142
/>
142143
</View>
143144
);
144-
}, [alarmStringExample1, pickerFeedback, screenWidth, showPickerExample1]);
145+
}, [alarmStringExample1, pickerFeedback, pageWidth, showPickerExample1]);
145146

146147
const renderExample2 = useMemo(() => {
147148
return (
148-
<View style={[styles.container, styles.page2Container, { width: screenWidth }]}>
149+
<View style={[styles.container, styles.page2Container, { width: pageWidth }]}>
149150
<Text style={styles.textLight}>
150151
{alarmStringExample2 !== null ? "Alarm set for" : "No alarm set"}
151152
</Text>
@@ -183,11 +184,11 @@ export default function App() {
183184
/>
184185
</View>
185186
);
186-
}, [alarmStringExample2, pickerFeedback, screenWidth, showPickerExample2]);
187+
}, [alarmStringExample2, pickerFeedback, pageWidth, showPickerExample2]);
187188

188189
const renderExample3 = useMemo(() => {
189190
return (
190-
<View style={[styles.container, styles.page3Container, { width: screenWidth }]}>
191+
<View style={[styles.container, styles.page3Container, { width: pageWidth }]}>
191192
<Text style={styles.textLight}>
192193
{alarmStringExample3 !== null ? "Alarm set for" : "No alarm set"}
193194
</Text>
@@ -228,15 +229,15 @@ export default function App() {
228229
/>
229230
</View>
230231
);
231-
}, [alarmStringExample3, pickerFeedback, screenWidth, showPickerExample3]);
232+
}, [alarmStringExample3, pickerFeedback, pageWidth, showPickerExample3]);
232233

233234
const renderExample4 = useMemo(() => {
234235
return (
235236
<LinearGradient
236237
colors={["#202020", "#220578"]}
237238
end={{ x: 1, y: 1 }}
238239
start={{ x: 0, y: 0 }}
239-
style={[styles.container, { width: screenWidth }]}
240+
style={[styles.container, { width: pageWidth }]}
240241
>
241242
<TimerPicker
242243
hourLabel=":"
@@ -266,11 +267,11 @@ export default function App() {
266267
/>
267268
</LinearGradient>
268269
);
269-
}, [pickerFeedback, screenWidth]);
270+
}, [pickerFeedback, pageWidth]);
270271

271272
const renderExample5 = useMemo(() => {
272273
return (
273-
<View style={[styles.container, styles.page5Container, { width: screenWidth }]}>
274+
<View style={[styles.container, styles.page5Container, { width: pageWidth }]}>
274275
<TimerPicker
275276
hideHours
276277
LinearGradient={LinearGradient}
@@ -294,21 +295,23 @@ export default function App() {
294295
/>
295296
</View>
296297
);
297-
}, [pickerFeedback, screenWidth]);
298+
}, [pickerFeedback, pageWidth]);
298299

299300
return (
300-
<ScrollView
301-
ref={scrollViewRef}
302-
horizontal
303-
onMomentumScrollEnd={onMomentumScrollEnd}
304-
pagingEnabled
305-
>
306-
{renderExample1}
307-
{renderExample2}
308-
{renderExample3}
309-
{renderExample4}
310-
{renderExample5}
311-
</ScrollView>
301+
<View onLayout={onRootLayout} style={styles.root}>
302+
<ScrollView
303+
ref={scrollViewRef}
304+
horizontal
305+
onMomentumScrollEnd={onMomentumScrollEnd}
306+
pagingEnabled
307+
>
308+
{renderExample1}
309+
{renderExample2}
310+
{renderExample3}
311+
{renderExample4}
312+
{renderExample5}
313+
</ScrollView>
314+
</View>
312315
);
313316
}
314317

@@ -364,6 +367,9 @@ const styles = StyleSheet.create({
364367
page5Container: {
365368
backgroundColor: "#F1F1F1",
366369
},
370+
root: {
371+
flex: 1,
372+
},
367373
textDark: {
368374
color: "#F1F1F1",
369375
fontSize: 18,

‎examples/example-expo/App.tsx‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
1+
import React, { useCallback, useMemo, useRef, useState } from "react";
22

33
import Ionicons from "@expo/vector-icons/Ionicons";
44
import MaskedView from "@react-native-masked-view/masked-view";
@@ -12,7 +12,6 @@ import {
1212
Text,
1313
TouchableOpacity,
1414
View,
15-
useWindowDimensions,
1615
} from "react-native";
1716
import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
1817
// import { AudioContext, type AudioBuffer } from "react-native-audio-api";
@@ -23,12 +22,11 @@ import { formatTime } from "./utils/formatTime";
2322
// import { getClickSound } from "./utils/getClickSound";
2423

2524
export default function App() {
26-
const { width: screenWidth } = useWindowDimensions();
27-
2825
const scrollViewRef = useRef<ScrollView>(null);
2926
// const audioContextRef = useRef<AudioContext | null>(null);
3027
// const audioBufferRef = useRef<AudioBuffer | null>(null);
3128

29+
const [pageWidth, setPageWidth] = useState(0);
3230
const [currentPageIndex, setCurrentPageIndex] = useState(0);
3331
const [showPickerExample1, setShowPickerExample1] = useState(false);
3432
const [showPickerExample2, setShowPickerExample2] = useState(false);
@@ -59,23 +57,26 @@ export default function App() {
5957
// };
6058
// }, []);
6159

62-
useEffect(() => {
63-
// when changing to landscape mode, scroll to the nearest page index
64-
scrollViewRef.current?.scrollTo({
65-
animated: false,
66-
x: screenWidth * currentPageIndex,
67-
});
68-
// eslint-disable-next-line react-hooks/exhaustive-deps
69-
}, [screenWidth]);
60+
const onRootLayout = useCallback(
61+
(event: { nativeEvent: { layout: { width: number } } }) => {
62+
const { width } = event.nativeEvent.layout;
63+
setPageWidth(width);
64+
scrollViewRef.current?.scrollTo({
65+
animated: false,
66+
x: width * currentPageIndex,
67+
});
68+
},
69+
[currentPageIndex]
70+
);
7071

7172
const onMomentumScrollEnd = useCallback(
7273
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
7374
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
7475
const { contentOffset } = event.nativeEvent;
75-
const newPageIndex = Math.round(contentOffset.x / screenWidth) as 0 | 1;
76+
const newPageIndex = Math.round(contentOffset.x / pageWidth) as 0 | 1;
7677
setCurrentPageIndex(newPageIndex);
7778
},
78-
[screenWidth]
79+
[pageWidth]
7980
);
8081

8182
const pickerFeedback = useCallback(() => {
@@ -101,7 +102,7 @@ export default function App() {
101102

102103
const renderExample1 = useMemo(() => {
103104
return (
104-
<View style={[styles.container, styles.page1Container, { width: screenWidth }]}>
105+
<View style={[styles.container, styles.page1Container, { width: pageWidth }]}>
105106
<Text style={styles.textDark}>
106107
{alarmStringExample1 !== null ? "Alarm set for" : "No alarm set"}
107108
</Text>
@@ -134,11 +135,11 @@ export default function App() {
134135
/>
135136
</View>
136137
);
137-
}, [alarmStringExample1, pickerFeedback, screenWidth, showPickerExample1]);
138+
}, [alarmStringExample1, pickerFeedback, pageWidth, showPickerExample1]);
138139

139140
const renderExample2 = useMemo(() => {
140141
return (
141-
<View style={[styles.container, styles.page2Container, { width: screenWidth }]}>
142+
<View style={[styles.container, styles.page2Container, { width: pageWidth }]}>
142143
<Text style={styles.textLight}>
143144
{alarmStringExample2 !== null ? "Alarm set for" : "No alarm set"}
144145
</Text>
@@ -166,21 +167,21 @@ export default function App() {
166167
pickerFeedback={pickerFeedback}
167168
setIsVisible={setShowPickerExample2}
168169
styles={{
169-
theme: "light",
170170
pickerColumnWidth: {
171171
hours: 90,
172172
},
173+
theme: "light",
173174
}}
174175
use12HourPicker
175176
visible={showPickerExample2}
176177
/>
177178
</View>
178179
);
179-
}, [alarmStringExample2, pickerFeedback, screenWidth, showPickerExample2]);
180+
}, [alarmStringExample2, pickerFeedback, pageWidth, showPickerExample2]);
180181

181182
const renderExample3 = useMemo(() => {
182183
return (
183-
<View style={[styles.container, styles.page3Container, { width: screenWidth }]}>
184+
<View style={[styles.container, styles.page3Container, { width: pageWidth }]}>
184185
<Text style={styles.textLight}>
185186
{alarmStringExample3 !== null ? "Alarm set for" : "No alarm set"}
186187
</Text>
@@ -219,15 +220,15 @@ export default function App() {
219220
/>
220221
</View>
221222
);
222-
}, [alarmStringExample3, pickerFeedback, screenWidth, showPickerExample3]);
223+
}, [alarmStringExample3, pickerFeedback, pageWidth, showPickerExample3]);
223224

224225
const renderExample4 = useMemo(() => {
225226
return (
226227
<LinearGradient
227228
colors={["#202020", "#220578"]}
228229
end={{ x: 1, y: 1 }}
229230
start={{ x: 0, y: 0 }}
230-
style={[styles.container, { width: screenWidth }]}
231+
style={[styles.container, { width: pageWidth }]}
231232
>
232233
<TimerPicker
233234
hourLabel=":"
@@ -257,11 +258,11 @@ export default function App() {
257258
/>
258259
</LinearGradient>
259260
);
260-
}, [pickerFeedback, screenWidth]);
261+
}, [pickerFeedback, pageWidth]);
261262

262263
const renderExample5 = useMemo(() => {
263264
return (
264-
<View style={[styles.container, styles.page5Container, { width: screenWidth }]}>
265+
<View style={[styles.container, styles.page5Container, { width: pageWidth }]}>
265266
<TimerPicker
266267
hideHours
267268
LinearGradient={LinearGradient}
@@ -285,7 +286,7 @@ export default function App() {
285286
/>
286287
</View>
287288
);
288-
}, [pickerFeedback, screenWidth]);
289+
}, [pickerFeedback, pageWidth]);
289290

290291
const renderNavigationArrows = useMemo(() => {
291292
const pageIndicesWithDarkBackground = [0, 3];
@@ -303,7 +304,7 @@ export default function App() {
303304
setCurrentPageIndex((currentPageIndex) => {
304305
scrollViewRef.current?.scrollTo({
305306
animated: true,
306-
x: screenWidth * (currentPageIndex + 1),
307+
x: pageWidth * (currentPageIndex + 1),
307308
});
308309
return currentPageIndex + 1;
309310
});
@@ -328,7 +329,7 @@ export default function App() {
328329
setCurrentPageIndex((currentPageIndex) => {
329330
scrollViewRef.current?.scrollTo({
330331
animated: true,
331-
x: screenWidth * (currentPageIndex - 1),
332+
x: pageWidth * (currentPageIndex - 1),
332333
});
333334
return currentPageIndex - 1;
334335
});
@@ -348,10 +349,10 @@ export default function App() {
348349
) : null}
349350
</>
350351
);
351-
}, [currentPageIndex, screenWidth]);
352+
}, [currentPageIndex, pageWidth]);
352353

353354
return (
354-
<>
355+
<View onLayout={onRootLayout} style={styles.root}>
355356
<ScrollView
356357
ref={scrollViewRef}
357358
horizontal
@@ -366,7 +367,7 @@ export default function App() {
366367
{renderExample5}
367368
</ScrollView>
368369
{renderNavigationArrows}
369-
</>
370+
</View>
370371
);
371372
}
372373

@@ -422,6 +423,9 @@ const styles = StyleSheet.create({
422423
page5Container: {
423424
backgroundColor: "#F1F1F1",
424425
},
426+
root: {
427+
flex: 1,
428+
},
425429
textDark: {
426430
color: "#F1F1F1",
427431
fontSize: 18,

0 commit comments

Comments
 (0)