Skip to content

Commit 14adf2d

Browse files
committed
📝 update demo GIFs + README + expo example with updated examples
1 parent bb45dc5 commit 14adf2d

File tree

6 files changed

+16
-11
lines changed

6 files changed

+16
-11
lines changed

README.md

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Includes iOS-style haptic and audio feedback 🍏
2222
- [Examples 😎](#examples-)
2323
- [Timer Picker Modal (Dark Mode) 🌚](#timer-picker-modal-dark-mode-)
2424
- [Timer Picker Modal (Light Mode) 🌞](#timer-picker-modal-light-mode-)
25-
- [Timer Picker with Customisation (Dark Mode) 🌒](#timer-picker-with-customisation-dark-mode-)
25+
- [Timer Picker with Transparent Fade-Out (Dark Mode) 🌒](#timer-picker-with-transparent-fade-out-dark-mode-)
2626
- [Timer Picker with Customisation (Light Mode) 🌔](#timer-picker-with-customisation-light-mode-)
2727
- [Props 💅](#props-)
2828
- [TimerPicker ⏲️](#timerpicker-️)
@@ -74,11 +74,11 @@ If you want the numbers to fade in/out at the top and bottom of the picker, you
7474
### Masked View
7575

7676
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.
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. You then just need to set `backgroundColor: "transparent` on the `TimerPicker` styles prop.
7878

7979
`import MaskedView from "@react-native-masked-view/masked-view";`
8080

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.**
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. (see [this example](#timer-picker-with-transparent-fade-out-dark-mode-))**
8282

8383
### Haptic Feedback
8484

@@ -194,7 +194,7 @@ return (
194194
borderColor: "#C2C2C2",
195195
color: "#C2C2C2"
196196
}}>
197-
Set Alarm 🔔
197+
{"Set Alarm 🔔"}
198198
</Text>
199199
</View>
200200
</TouchableOpacity>
@@ -328,10 +328,11 @@ return (
328328

329329
<img src="demos/example2.gif" width="250" height="550"/>
330330

331-
### Timer Picker with Customisation (Dark Mode) 🌒
331+
### Timer Picker with Transparent Fade-Out (Dark Mode) 🌒
332332

333333
```jsx
334334
import { TimerPicker } from "react-native-timer-picker";
335+
import MaskedView from "@react-native-masked-view/masked-view"; // for transparent fade-out
335336
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
336337
import { Audio } from "expo-av"; // for audio feedback (click sound as you scroll)
337338
import * as Haptics from "expo-haptics"; // for haptic feedback
@@ -343,7 +344,11 @@ const [alarmString, setAlarmString] = useState<
343344
>(null);
344345

345346
return (
346-
<View style={{backgroundColor: "#202020", alignItems: "center", justifyContent: "center"}}>
347+
<LinearGradient
348+
colors={["#202020", "#220578"]}
349+
start={{ x: 0, y: 0 }}
350+
end={{ x: 1, y: 1 }}
351+
style={{alignItems: "center", justifyContent: "center"}}>
347352
<TimerPicker
348353
padWithNItems={2}
349354
hourLabel=":"
@@ -352,9 +357,10 @@ return (
352357
Audio={Audio}
353358
LinearGradient={LinearGradient}
354359
Haptics={Haptics}
360+
MaskedView={MaskedView}
355361
styles={{
356362
theme: "dark",
357-
backgroundColor: "#202020",
363+
backgroundColor: "transparent", // transparent fade-out
358364
pickerItem: {
359365
fontSize: 34,
360366
},
@@ -377,7 +383,7 @@ return (
377383
},
378384
}}
379385
/>
380-
</View>
386+
</LinearGradient>
381387
)
382388

383389
```

demos/example1.gif

-343 KB
Loading

demos/example2.gif

670 KB
Loading

demos/example3.gif

-906 KB
Loading

demos/example4.gif

-678 KB
Loading

examples/example-expo/App.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export default function App() {
100100
<View style={styles.buttonContainer}>
101101
<Text
102102
style={[styles.button, styles.buttonDark]}>
103-
Set Alarm 🔔
103+
{"Set Alarm 🔔"}
104104
</Text>
105105
</View>
106106
</TouchableOpacity>
@@ -120,7 +120,6 @@ export default function App() {
120120
setAlarmStringExample1(formatTime(pickedDuration));
121121
setShowPickerExample1(false);
122122
}}
123-
hideHours
124123
setIsVisible={setShowPickerExample1}
125124
styles={{
126125
theme: "dark",
@@ -159,7 +158,7 @@ export default function App() {
159158
<View style={styles.buttonContainer}>
160159
<Text
161160
style={[styles.button, styles.buttonLight]}>
162-
Set Alarm 🔔
161+
{"Set Alarm 🔔"}
163162
</Text>
164163
</View>
165164
</TouchableOpacity>

0 commit comments

Comments
 (0)