Skip to content

Instantly share code, notes, and snippets.

View flunder's full-sized avatar

Lars flunder

  • LarsAttacks
  • London
View GitHub Profile
@flunder
flunder / bouncyBall.tsx
Created January 26, 2024 01:25
ReactNative Reanimated Ball Bouncing of Walls
import React, { useEffect } from "react";
import { StyleSheet, View } from "react-native";
import Animated, {
useAnimatedStyle,
useSharedValue
} from "react-native-reanimated";
import { viewPort } from "@project/utils";
const BALL_SIZE = 20;
import React, { useRef, useEffect } from 'react';
import { Animated, Easing } from 'react-native';
import { useIsMounted } from '@t/utils/hooks/useIsMounted';
export const useEyesAnimation = () => {
const offsetX = useRef(new Animated.Value(0)).current;
const isMounted = useIsMounted();
useEffect(() => {
animate();
@flunder
flunder / unicodeSubstring.ts
Created September 4, 2023 09:29
Shorten a string that contains emoticons.
function insertAt(string, subString, position) {
const before = string.substr(0, position);
const after = string.substr(position);
return `${before}${subString}${after}`;
}
/**
* Crude, but reliable way to do a substring with unicode chars. We tried other
* solutions but they don't work with the flags which are 4 code points!
*/
@flunder
flunder / MelonEmitter.tsx
Created September 4, 2023 09:24
Ticket MelonEmitter Code ( React Native )
import React, { useRef, useEffect, useCallback } from 'react';
import { Animated, Easing } from 'react-native';
import { pickOne } from '@t/utils/pickOne';
import { MelonHalf, MelonQuarter } from '@t/components/Icons';
const MelonEmitter = ({ runAnimation }) => {
const numberOfMelons = 20;
const driver = useRef(new Animated.Value(0)).current;
const colors = useRef(['#FFA0B4', '#F1DBDF', '#FFE4E9', '#BCFF4F']).current;
const svgs = [MelonQuarter, MelonHalf];
@flunder
flunder / onViewableItemsChanged.ts
Created April 23, 2023 13:10
React-Native, flatlist onViewableItemsChanged get Index of page
// Quicker bi-directional onViewableItemsChanged
const [activeIndex, setActiveIndex] = useState(0);
const onViewableItemsChanged = useRef(({ viewableItems, changed }) => {
if (viewableItems?.length >= 2 && changed?.[0]?.isViewable) {
setActiveIndex(changed?.[0].index);
} else {
if (viewableItems?.[0]) setActiveIndex(viewableItems[0].index);
}
@flunder
flunder / Component.tsx
Last active February 6, 2024 18:41
React Native measure component size hook
import { View } from 'react-native';
import { useComponentSize } from './useComponentSize';
const Component = () => {
const [size, onLayout] = useComponentSize();
return (
<View onLayout={onLayout} />
)
}
@flunder
flunder / Somewhere.ts
Last active March 30, 2023 17:20
Expo alias path using @ example ( Expo v6.3.2 )
import { Box, Text } from "@app/Components"; ✅
@flunder
flunder / gist:93d2ab40cf3be4aa52d0ad5b645bf578
Created January 11, 2023 14:53
Fake Draggable Sheet with Snapping
import React, { useRef, useState } from 'react';
import { Animated, FlatList, StyleSheet } from 'react-native';
import { Box, Button, Text, Touchable } from '@app/components';
import { Colors, Grid, Sizes } from '@app/utils/const/theme';
import { viewPort } from '@app/utils';
const initialPosition = viewPort.height.full - 300;
const MapSheet = ({
@flunder
flunder / Reanimated2_ui_test.js
Created December 5, 2020 20:56
React Native test of Reanimated2
import React, { useEffect, useRef } from "react";
import { Dimensions, View } from "react-native";
import Animated, { useSharedValue, withTiming, useAnimatedStyle, useAnimatedProps } from "react-native-reanimated";
import Svg, { Polygon } from 'react-native-svg'
const { width, height } = Dimensions.get('window');
const MAXBALLS = 100;
const BALL_SIZE = 10;
const ballsArray = [...Array(MAXBALLS)];
@flunder
flunder / gist:8c1783f9e447dcea94e7470f0728476a
Created November 18, 2020 17:31
Reanimated2 & React-Native-Guesture-Handler Example. Drag and Drop of a credit card and snapping to either the top or the bottom.
import Animated, { onGestureEvent, useSharedValue, withTiming, withDecay, withSpring, useAnimatedStyle, interpolate, Easing, Extrapolate, interpolateColor, useAnimatedGestureHandler } from "react-native-reanimated";
import { PanGestureHandler } from 'react-native-gesture-handler';
import { Dimensions, StyleSheet, View } from "react-native";
import React, { useEffect, useRef } from "react";
import { useCreditCard } from "./Hooks/useCreditCard";
import { Card } from './Shared/Card';
const { width, height } = Dimensions.get('window');
export default function FirstLook(props) {