Skip to content

Release v2.6.2 #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
troberts-28 merged 4 commits into from
Mar 23, 2026
Merged

Release v2.6.2 #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6ba8919
Merge branch 'main' into develop
troberts-28 Feb 26, 2026
497e2fe
🐛 Fix modal overlay issue on android
troberts-28 Mar 23, 2026
3bee5ff
🩹 Fix landscape page sizing in example on Android
troberts-28 Mar 23, 2026
cc66ab5
Merge branch 'fix/overlay-android-issue' into develop
troberts-28 Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 41 additions & 35 deletions examples/example-bare/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
TouchableOpacity,
UIManager,
View,
useWindowDimensions,
} from "react-native";
import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
import { AudioContext, type AudioBuffer } from "react-native-audio-api";
Expand All @@ -27,12 +26,11 @@ if (Platform.OS === "android") {
}

export default function App() {
const { width: screenWidth } = useWindowDimensions();

const scrollViewRef = useRef<ScrollView>(null);
const audioContextRef = useRef<AudioContext | null>(null);
const audioBufferRef = useRef<AudioBuffer | null>(null);

const [pageWidth, setPageWidth] = useState(0);
const [currentPageIndex, setCurrentPageIndex] = useState(0);
const [showPickerExample1, setShowPickerExample1] = useState(false);
const [showPickerExample2, setShowPickerExample2] = useState(false);
Expand Down Expand Up @@ -62,23 +60,26 @@ export default function App() {
};
}, []);

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

const onMomentumScrollEnd = useCallback(
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
const { contentOffset } = event.nativeEvent;
const newPageIndex = Math.round(contentOffset.x / screenWidth) as 0 | 1;
const newPageIndex = Math.round(contentOffset.x / pageWidth) as 0 | 1;
setCurrentPageIndex(newPageIndex);
},
[screenWidth]
[pageWidth]
);

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

const renderExample1 = useMemo(() => {
return (
<View style={[styles.container, styles.page1Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page1Container, { width: pageWidth }]}>
<Text style={styles.textDark}>
{alarmStringExample1 !== null ? "Alarm set for" : "No alarm set"}
</Text>
Expand Down Expand Up @@ -141,11 +142,11 @@ export default function App() {
/>
</View>
);
}, [alarmStringExample1, pickerFeedback, screenWidth, showPickerExample1]);
}, [alarmStringExample1, pickerFeedback, pageWidth, showPickerExample1]);

const renderExample2 = useMemo(() => {
return (
<View style={[styles.container, styles.page2Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page2Container, { width: pageWidth }]}>
<Text style={styles.textLight}>
{alarmStringExample2 !== null ? "Alarm set for" : "No alarm set"}
</Text>
Expand Down Expand Up @@ -183,11 +184,11 @@ export default function App() {
/>
</View>
);
}, [alarmStringExample2, pickerFeedback, screenWidth, showPickerExample2]);
}, [alarmStringExample2, pickerFeedback, pageWidth, showPickerExample2]);

const renderExample3 = useMemo(() => {
return (
<View style={[styles.container, styles.page3Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page3Container, { width: pageWidth }]}>
<Text style={styles.textLight}>
{alarmStringExample3 !== null ? "Alarm set for" : "No alarm set"}
</Text>
Expand Down Expand Up @@ -228,15 +229,15 @@ export default function App() {
/>
</View>
);
}, [alarmStringExample3, pickerFeedback, screenWidth, showPickerExample3]);
}, [alarmStringExample3, pickerFeedback, pageWidth, showPickerExample3]);

const renderExample4 = useMemo(() => {
return (
<LinearGradient
colors={["#202020", "#220578"]}
end={{ x: 1, y: 1 }}
start={{ x: 0, y: 0 }}
style={[styles.container, { width: screenWidth }]}
style={[styles.container, { width: pageWidth }]}
>
<TimerPicker
hourLabel=":"
Expand Down Expand Up @@ -266,11 +267,11 @@ export default function App() {
/>
</LinearGradient>
);
}, [pickerFeedback, screenWidth]);
}, [pickerFeedback, pageWidth]);

const renderExample5 = useMemo(() => {
return (
<View style={[styles.container, styles.page5Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page5Container, { width: pageWidth }]}>
<TimerPicker
hideHours
LinearGradient={LinearGradient}
Expand All @@ -294,21 +295,23 @@ export default function App() {
/>
</View>
);
}, [pickerFeedback, screenWidth]);
}, [pickerFeedback, pageWidth]);

return (
<ScrollView
ref={scrollViewRef}
horizontal
onMomentumScrollEnd={onMomentumScrollEnd}
pagingEnabled
>
{renderExample1}
{renderExample2}
{renderExample3}
{renderExample4}
{renderExample5}
</ScrollView>
<View onLayout={onRootLayout} style={styles.root}>
<ScrollView
ref={scrollViewRef}
horizontal
onMomentumScrollEnd={onMomentumScrollEnd}
pagingEnabled
>
{renderExample1}
{renderExample2}
{renderExample3}
{renderExample4}
{renderExample5}
</ScrollView>
</View>
);
}

Expand Down Expand Up @@ -364,6 +367,9 @@ const styles = StyleSheet.create({
page5Container: {
backgroundColor: "#F1F1F1",
},
root: {
flex: 1,
},
textDark: {
color: "#F1F1F1",
fontSize: 18,
Expand Down
64 changes: 34 additions & 30 deletions examples/example-expo/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import React, { useCallback, useMemo, useRef, useState } from "react";

import Ionicons from "@expo/vector-icons/Ionicons";
import MaskedView from "@react-native-masked-view/masked-view";
Expand All @@ -12,7 +12,6 @@ import {
Text,
TouchableOpacity,
View,
useWindowDimensions,
} from "react-native";
import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
// import { AudioContext, type AudioBuffer } from "react-native-audio-api";
Expand All @@ -23,12 +22,11 @@ import { formatTime } from "./utils/formatTime";
// import { getClickSound } from "./utils/getClickSound";

export default function App() {
const { width: screenWidth } = useWindowDimensions();

const scrollViewRef = useRef<ScrollView>(null);
// const audioContextRef = useRef<AudioContext | null>(null);
// const audioBufferRef = useRef<AudioBuffer | null>(null);

const [pageWidth, setPageWidth] = useState(0);
const [currentPageIndex, setCurrentPageIndex] = useState(0);
const [showPickerExample1, setShowPickerExample1] = useState(false);
const [showPickerExample2, setShowPickerExample2] = useState(false);
Expand Down Expand Up @@ -59,23 +57,26 @@ export default function App() {
// };
// }, []);

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

const onMomentumScrollEnd = useCallback(
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
const { contentOffset } = event.nativeEvent;
const newPageIndex = Math.round(contentOffset.x / screenWidth) as 0 | 1;
const newPageIndex = Math.round(contentOffset.x / pageWidth) as 0 | 1;
setCurrentPageIndex(newPageIndex);
},
[screenWidth]
[pageWidth]
);

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

const renderExample1 = useMemo(() => {
return (
<View style={[styles.container, styles.page1Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page1Container, { width: pageWidth }]}>
<Text style={styles.textDark}>
{alarmStringExample1 !== null ? "Alarm set for" : "No alarm set"}
</Text>
Expand Down Expand Up @@ -134,11 +135,11 @@ export default function App() {
/>
</View>
);
}, [alarmStringExample1, pickerFeedback, screenWidth, showPickerExample1]);
}, [alarmStringExample1, pickerFeedback, pageWidth, showPickerExample1]);

const renderExample2 = useMemo(() => {
return (
<View style={[styles.container, styles.page2Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page2Container, { width: pageWidth }]}>
<Text style={styles.textLight}>
{alarmStringExample2 !== null ? "Alarm set for" : "No alarm set"}
</Text>
Expand Down Expand Up @@ -166,21 +167,21 @@ export default function App() {
pickerFeedback={pickerFeedback}
setIsVisible={setShowPickerExample2}
styles={{
theme: "light",
pickerColumnWidth: {
hours: 90,
},
theme: "light",
}}
use12HourPicker
visible={showPickerExample2}
/>
</View>
);
}, [alarmStringExample2, pickerFeedback, screenWidth, showPickerExample2]);
}, [alarmStringExample2, pickerFeedback, pageWidth, showPickerExample2]);

const renderExample3 = useMemo(() => {
return (
<View style={[styles.container, styles.page3Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page3Container, { width: pageWidth }]}>
<Text style={styles.textLight}>
{alarmStringExample3 !== null ? "Alarm set for" : "No alarm set"}
</Text>
Expand Down Expand Up @@ -219,15 +220,15 @@ export default function App() {
/>
</View>
);
}, [alarmStringExample3, pickerFeedback, screenWidth, showPickerExample3]);
}, [alarmStringExample3, pickerFeedback, pageWidth, showPickerExample3]);

const renderExample4 = useMemo(() => {
return (
<LinearGradient
colors={["#202020", "#220578"]}
end={{ x: 1, y: 1 }}
start={{ x: 0, y: 0 }}
style={[styles.container, { width: screenWidth }]}
style={[styles.container, { width: pageWidth }]}
>
<TimerPicker
hourLabel=":"
Expand Down Expand Up @@ -257,11 +258,11 @@ export default function App() {
/>
</LinearGradient>
);
}, [pickerFeedback, screenWidth]);
}, [pickerFeedback, pageWidth]);

const renderExample5 = useMemo(() => {
return (
<View style={[styles.container, styles.page5Container, { width: screenWidth }]}>
<View style={[styles.container, styles.page5Container, { width: pageWidth }]}>
<TimerPicker
hideHours
LinearGradient={LinearGradient}
Expand All @@ -285,7 +286,7 @@ export default function App() {
/>
</View>
);
}, [pickerFeedback, screenWidth]);
}, [pickerFeedback, pageWidth]);

const renderNavigationArrows = useMemo(() => {
const pageIndicesWithDarkBackground = [0, 3];
Expand All @@ -303,7 +304,7 @@ export default function App() {
setCurrentPageIndex((currentPageIndex) => {
scrollViewRef.current?.scrollTo({
animated: true,
x: screenWidth * (currentPageIndex + 1),
x: pageWidth * (currentPageIndex + 1),
});
return currentPageIndex + 1;
});
Expand All @@ -328,7 +329,7 @@ export default function App() {
setCurrentPageIndex((currentPageIndex) => {
scrollViewRef.current?.scrollTo({
animated: true,
x: screenWidth * (currentPageIndex - 1),
x: pageWidth * (currentPageIndex - 1),
});
return currentPageIndex - 1;
});
Expand All @@ -348,10 +349,10 @@ export default function App() {
) : null}
</>
);
}, [currentPageIndex, screenWidth]);
}, [currentPageIndex, pageWidth]);

return (
<>
<View onLayout={onRootLayout} style={styles.root}>
<ScrollView
ref={scrollViewRef}
horizontal
Expand All @@ -366,7 +367,7 @@ export default function App() {
{renderExample5}
</ScrollView>
{renderNavigationArrows}
</>
</View>
);
}

Expand Down Expand Up @@ -422,6 +423,9 @@ const styles = StyleSheet.create({
page5Container: {
backgroundColor: "#F1F1F1",
},
root: {
flex: 1,
},
textDark: {
color: "#F1F1F1",
fontSize: 18,
Expand Down
Loading
Loading