Skip to content

Commit 66c38e3

Browse files
troberts-28troberts-28
authored
Merge pull request #47 from troberts-28/feature/transparent-fadeout
Feature: enable transparent fadeout
2 parents 44c172a + 5e276b3 commit 66c38e3

File tree

9 files changed

+266
-223
lines changed

9 files changed

+266
-223
lines changed

‎README.md‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Includes iOS-style haptic and audio feedback 🍏
6060

6161
## Peer Dependencies 👶
6262

63-
This component will work in your React Native Project **_without any peer dependencies_**.
63+
This component will work in your React Native Project **_without any peer dependencies_**. However, to enable various features (e.g. fade-out, feedback) you will need to supply various libraries as props. These are detailed below.
6464

6565
### Linear Gradient
6666

@@ -71,6 +71,15 @@ If you want the numbers to fade in/out at the top and bottom of the picker, you
7171

7272
**To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.**
7373

74+
### Masked View
75+
76+
To make the numbers fade in/out on a transparent background (e.g. if the picker is rendered on top of a gradient or image), you will need to install the [@react-native-masked-view/masked-view
77+
](https://www.npmjs.com/package/@react-native-masked-view/masked-view) component. This is as the standard LinearGradient implementation relies on there being a solid background colour.
78+
79+
`import MaskedView from "@react-native-masked-view/masked-view";`
80+
81+
**To enable the fade-out on a transparent background, you need to supply the imported `MaskedView` component AND one of the LinearGradient components as props to either TimerPickerModal or TimerPicker.**
82+
7483
### Haptic Feedback
7584

7685
Enable haptic feedback with the [expo-haptics](https://www.npmjs.com/package/expo-haptics) module:
@@ -464,16 +473,15 @@ return (
464473
| repeatMinuteNumbersNTimes | Set the number of times the list of minutes is repeated in the picker | Number | 3 | false |
465474
| repeatSecondNumbersNTimes | Set the number of times the list of seconds is repeated in the picker | Number | 3 | false |
466475
| disableInfiniteScroll | Disable the infinite scroll feature | Boolean | false | false |
467-
| LinearGradient | Linear Gradient Component | [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient).LinearGradient or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).default | - | false |
468-
| Haptics | Haptics Namespace (required for Haptic feedback) | [expo-haptics](https://www.npmjs.com/package/expo-haptics) | - | false |
469-
| Audio | Audio Class (required for audio feedback i.e. click sound) | [expo-av](https://www.npmjs.com/package/expo-av).Audio | - | false |
470-
| pickerFeedback | Generic picker feedback as alternative to the below Expo feedback support | `() => void \| Promise<void> ` | - | false |
476+
| LinearGradient | [Linear Gradient Component (required for picker fade-out)](#linear-gradient) | [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient).LinearGradient or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).default | - | false |
477+
| MaskedView | [Masked View Component (required for picker fade-out on transparent background)](#masked-view) | [@react-native-masked-view/masked-view](https://www.npmjs.com/package/@react-native-masked-view/masked-view).default | - | false |
478+
| Haptics | [Haptics Namespace (required for Haptic feedback)](#haptic-feedback) | [expo-haptics](https://www.npmjs.com/package/expo-haptics) | - | false |
479+
| Audio | [Audio Class (required for audio feedback i.e. click sound)](#audio-feedback-click-sound) | [expo-av](https://www.npmjs.com/package/expo-av).Audio | - | false |
480+
| pickerFeedback | [Generic picker feedback as alternative to the above Expo feedback support](#generic-feedback) | `() => void \| Promise<void> ` | - | false |
471481
| FlatList | FlatList component used internally to implement each picker (hour, minutes and seconds). More info [below](#custom-flatlist) | [react-native](https://reactnative.dev/docs/flatlist).FlatList | `FlatList` from `react-native` | false |
472482
| clickSoundAsset | Custom sound asset for click sound (required for offline click sound - download default [here](https://drive.google.com/uc?export=download&id=10e1YkbNsRh-vGx1jmS1Nntz8xzkBp4_I)) | require(.../somefolderpath) or {uri: www.someurl} | - | false |
473483
| pickerContainerProps | Props for the picker container | `React.ComponentProps<typeof View>` | - | false |
474-
| pickerGradientOverlayProps | Props for both gradient overlays | `Partial<LinearGradientProps>` | - | false |
475-
| topPickerGradientOverlayProps | Props for the top gradient overlay | `Partial<LinearGradientProps>` | - | false |
476-
| bottomPickerGradientOverlayProps | Props for the bottom gradient overlay | `Partial<LinearGradientProps>` | - | false |
484+
| pickerGradientOverlayProps | Props for the gradient overlay (supply a different `locations` array to adjust its position) overlays | `Partial<LinearGradientProps>` | - | false |
477485
| styles | Custom styles for the timer picker | [CustomTimerPickerStyles](#custom-styles-) | - | false |
478486

479487
#### Custom Styles 👗
@@ -535,7 +543,7 @@ The custom component needs to have the same interface as React Native's `<FlatLi
535543

536544
#### Generic feedback
537545

538-
To enable haptic feedback from the non-Expo module [react-native-haptic-feedback](https://github.com/mkuczera/react-native-haptic-feedback) or provide feedback in any other form you can use the generic feedback callback prop `pickerFeedback`. This function is called whenever any of the pickers tick onto a new number.
546+
To enable haptic feedback from the non-Expo module [react-native-haptic-feedback](https://github.com/mkuczera/react-native-haptic-feedback) (or provide feedback in any other form) you can use the generic feedback callback prop `pickerFeedback`. This function is called whenever any of the pickers tick onto a new number.
539547

540548
```Jsx
541549
import { trigger } from 'react-native-haptic-feedback';

‎examples/example-expo/App.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import React, {
77
} from "react";
88

99
import Ionicons from "@expo/vector-icons/Ionicons";
10+
import MaskedView from "@react-native-masked-view/masked-view";
1011
import { Audio } from "expo-av";
1112
import * as Haptics from "expo-haptics";
1213
import { LinearGradient } from "expo-linear-gradient";
1314
import {
15+
Image,
1416
LayoutAnimation,
1517
Platform,
1618
Pressable,
@@ -118,6 +120,7 @@ export default function App() {
118120
setAlarmStringExample1(formatTime(pickedDuration));
119121
setShowPickerExample1(false);
120122
}}
123+
hideHours
121124
setIsVisible={setShowPickerExample1}
122125
styles={{
123126
theme: "dark",
@@ -187,7 +190,10 @@ export default function App() {
187190

188191
const renderExample3 = useMemo(() => {
189192
return (
190-
<View
193+
<LinearGradient
194+
colors={["#202020", "#220578"]}
195+
start={{ x: 0, y: 0 }}
196+
end={{ x: 1, y: 1 }}
191197
style={[
192198
styles.container,
193199
styles.page3Container,
@@ -198,12 +204,13 @@ export default function App() {
198204
Haptics={Haptics}
199205
hourLabel=":"
200206
LinearGradient={LinearGradient}
207+
MaskedView={MaskedView}
201208
minuteLabel=":"
202209
padWithNItems={2}
203210
secondLabel=""
204211
styles={{
205212
theme: "dark",
206-
backgroundColor: "#202020",
213+
backgroundColor: "transparent",
207214
pickerItem: {
208215
fontSize: 34,
209216
},
@@ -221,12 +228,12 @@ export default function App() {
221228
right: -20,
222229
top: 0,
223230
bottom: 6,
224-
width: 40,
231+
width: 46,
225232
alignItems: "center",
226233
},
227234
}}
228235
/>
229-
</View>
236+
</LinearGradient>
230237
);
231238
}, [screenWidth]);
232239

@@ -363,7 +370,7 @@ const styles = StyleSheet.create({
363370
backgroundColor: "#F1F1F1",
364371
},
365372
page3Container: {
366-
backgroundColor: "#202020",
373+
flex: 1,
367374
},
368375
page4Container: {
369376
backgroundColor: "#F1F1F1",

‎examples/example-expo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@expo/vector-icons": "^14.0.3",
13+
"@react-native-masked-view/masked-view": "0.3.2",
1314
"expo": "~52.0.31",
1415
"expo-av": "~15.0.2",
1516
"expo-haptics": "~14.0.1",

0 commit comments

Comments
 (0)