Skip to content

Commit a0f45c0

Browse files
troberts-28troberts-28
committed
📝 update docs to include MaskedView component
1 parent 7e1c1a5 commit a0f45c0

File tree

2 files changed

+17
-7
lines changed

2 files changed

+17
-7
lines changed

‎README.md‎

Lines changed: 16 additions & 6 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,10 +473,11 @@ 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 |
@@ -533,7 +543,7 @@ The custom component needs to have the same interface as React Native's `<FlatLi
533543

534544
#### Generic feedback
535545

536-
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.
537547

538548
```Jsx
539549
import { trigger } from 'react-native-haptic-feedback';

‎examples/example-expo/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ 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";
@@ -28,7 +29,6 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
2829
import { TimerPicker, TimerPickerModal } from "../../src";
2930

3031
import { formatTime } from "./utils/formatTime";
31-
import MaskedView from "@react-native-masked-view/masked-view";
3232

3333
if (Platform.OS === "android") {
3434
UIManager.setLayoutAnimationEnabledExperimental?.(true);

0 commit comments

Comments
 (0)