| import { BottomSheetModal, BottomSheetModalProps } from '@gorhom/bottom-sheet'; | |
| import { useCallback, useRef } from 'react'; | |
| import { BackHandler, NativeEventSubscription } from 'react-native'; | |
| /** | |
| * hook that dismisses the bottom sheet on the hardware back button press if it is visible | |
| * @param bottomSheetRef ref to the bottom sheet which is going to be closed/dismissed on the back press | |
| */ | |
| export const useBottomSheetBackHandler = ( | |
| bottomSheetRef: React.RefObject<BottomSheetModal | null>, |
| import React, {createContext, useEffect, useState} from 'react'; | |
| import auth from '@react-native-firebase/auth'; // or from 'firebase/auth'; | |
| import Loading from '../components/Loading'; | |
| import {myFirestore} from '../common/firebase.js'; | |
| export const AuthContext = createContext({}); | |
| export const AuthProvider = (props) => { |
Layout projection: A method for animating browser layouts at 60fps
Animating layout is hard. Prohibitively so; how many ambitious designers have provided dev teams dazzling videos of app-quality UI animations, only to be rebuffed?
If you're a web developer, what would your reaction be if asked to realise this kind of App Store-style interaction, where an item opens into a full-screen view when clicked:
| const downloadFile = async (uri, path, folder) => { | |
| return new Promise(async (resolve, reject) => { | |
| try { | |
| const file_request = await fetch(uri, { | |
| method: 'GET', | |
| credentials: 'include', | |
| mode: 'cors', | |
| }); | |
| const file_blob = await file_request.blob(); |
| import React, {useMemo} from 'react' | |
| import Animated from 'react-native-reanimated' | |
| import {View, Dimensions, StyleSheet} from 'react-native' | |
| import FastImage from 'react-native-fast-image' | |
| import ConfettiImage from 'assets/images/confetti.png' | |
| const NUM_CONFETTI = 100 | |
| const COLORS = ['#00e4b2', '#09aec5', '#107ed5'] | |
| const CONFETTI_SIZE = 16 |
Install, build and debug a react native app in WSL2 (Windows Subsystem for Linux) and Ubuntu.
| import { forEachObjIndexed } from "ramda"; | |
| import * as React from "react"; | |
| import { | |
| Animated, | |
| ScrollView, | |
| View, | |
| ViewStyle, | |
| LayoutChangeEvent, | |
| NativeScrollEvent, | |
| } from "react-native"; |
Inspired by dannyfritz/commit-message-emoji
See also gitmoji.
| Commit type | Emoji |
|---|---|
| Initial commit | 🎉 :tada: |
| Version tag | 🔖 :bookmark: |
| New feature | ✨ :sparkles: |
| Bugfix | 🐛 :bug: |
| <span> | |
| <select name="day"> | |
| <option value="monday">Monday</option> | |
| <option value="tuesday">Tuesday</option> | |
| <option value="wednesday">Wednesday</option> | |
| <option value="thursday">Thursday</option> | |
| <option value="friday">Friday</option> | |
| <option value="saturday">Saturday</option> | |
| <option value="sunday">Sunday</option> | |
| </select> |
