Skip to content

Instantly share code, notes, and snippets.

View flunder's full-sized avatar

Lars flunder

13 followers · 26 following
  • LarsAttacks
  • London
View GitHub Profile
@flunder
flunder / Fullpage.html
Created April 24, 2012 16:44
A web page created at CodePen.io
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Code Pen &middot; 1</title>
<link rel="stylesheet" href="http://codepen.io/stylesheets/css/reset.css">
<style>
@flunder
flunder / iconExample.js
Last active September 26, 2017 16:11
An example gist trying to show how to implement an icon within a tcomb form in react-native
const Form = t.form.Form;
const postOptions = t.struct({
publication: t.String,
tags: t.String,
more: t.String,
facebook: t.Boolean
})
const options = {
@flunder
flunder / .eslintrc
Last active January 19, 2018 11:47
React Project esLint Settings
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
@flunder
flunder / gist:b3a9844e1ae440ac82788972753c74dc
Last active February 14, 2018 11:14
_helpers.css
._bg1 { background-color: aliceblue }
._bg2 { background-color: antiquewhite }
.noSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
@flunder
flunder / .csscomb.json
Last active April 25, 2018 23:24
{
"exclude": [
".git/**",
"node_modules/**",
"bower_components/**"
],
"sort-order": [ [
"content",
"display",
"flex-direction",
@flunder
flunder / constants.js
Created March 20, 2020 17:57
A React Native Config Starting point
import { View, UIManager, LayoutAnimation, Platform } from 'react-native'
/*
Colors
For extras colors use their name:
http://chir.ag/projects/name-that-color
*/
export const Colors = {
@flunder
flunder / Reanimated2_basic_animation.js
Last active November 18, 2020 17:31
Expo ReAnimated2 Basic animation using timing, spring etc
import Animated, { useSharedValue, withTiming, withSpring, useAnimatedStyle, interpolate, Easing, Extrapolate } from "react-native-reanimated";
import { View, Button } from "react-native";
import React from "react";
export default function AnimatedStyleUpdateExample(props) {
const randomWidth = useSharedValue(50);
const randomHeight = useSharedValue(50);
const randomColor = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => {
@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) {
@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: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 = ({