Skip to content

Instantly share code, notes, and snippets.

@andigu
andigu / TabParallax.js
Last active October 23, 2023 07:34
A react native component featuring parallax scrolling with tabs
import React, {Component} from "react";
import {Animated, Dimensions, Platform, Text, TouchableOpacity, View} from "react-native";
import {Body, Header, List, ListItem as Item, ScrollableTab, Tab, TabHeading, Tabs, Title} from "native-base";
import LinearGradient from "react-native-linear-gradient";
const {width: SCREEN_WIDTH} = Dimensions.get("window");
const IMAGE_HEIGHT = 250;
const HEADER_HEIGHT = Platform.OS === "ios" ? 64 : 50;
const SCROLL_HEIGHT = IMAGE_HEIGHT - HEADER_HEIGHT;
const THEME_COLOR = "rgba(85,186,255, 1)";
@andigu
andigu / animatedBgColor.js
Created August 13, 2017 06:44
Animating background colour and translation in react native at 60 fps.
import React, {Component} from "react";
import {Animated, Text, View} from "react-native";
const SCROLL_HEIGHT = 800;
export class Colours extends Component {
nativeScroll = new Animated.Value(0);
nonNativeScroll = new Animated.Value(0);
constructor(props) {
import React, {Component} from "react";
import {Animated, Dimensions, Platform, Text, View} from 'react-native';
import {Body, Header, List, ListItem as Item, ScrollableTab, Tab, Tabs, Title} from "native-base";
const NAVBAR_HEIGHT = 56;
const {width: SCREEN_WIDTH} = Dimensions.get("window");
const COLOR = "rgb(45,181,102)";
const TAB_PROPS = {
tabStyle: {width: SCREEN_WIDTH / 2, backgroundColor: COLOR},
activeTabStyle: {width: SCREEN_WIDTH / 2, backgroundColor: COLOR},
export const diffClamp = function(
a: Animated.Value<number>,
min: number,
max: number,
): AnimatedDiffClamp {
return new AnimatedDiffClamp(a, min, max);
};
class AnimatedDiffClamp {
constructor(a: Animated.Value<number>, min: number, max: number) {
@andigu
andigu / table.md
Last active April 24, 2019 22:32
Input Last Input Value Last Output Value Formula Output
1 0 - - - 0
2 2 0 0 0 + 2 - 0 2
3 8 2 2 2 + 8 - 2 8
4 10 8 8 8 + 10 - 8 10
5 11 10 10 10 + 11 - 10 10
6 100 11 10 10 + 100 - 11 10
7 98 100 10 10 + 98 - 100 8
8 92 98 8 8 + 92 - 98 2
export class SwipeableCard extends Component {
translateX = new Animated.Value(0);
_panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: Animated.event([null, {dx: this.translateX}]),
onPanResponderRelease: (e, {vx, dx}) => {
const screenWidth = Dimensions.get("window").width;
if (Math.abs(vx) >= 0.5 || Math.abs(dx) >= 0.5 * screenWidth) {
Animated.timing(this.translateX, {
import React, {Component} from "react";
import {LayoutAnimation, UIManager} from 'react-native';
import {Body, Container, Header, Title, View} from "native-base";
import {SwipeableCard} from "./SwipableCard";
export class PanResponderDemo extends Component {
titles = new Array(10).fill(null).map((_, i) => `Card #${i}`);
state = {
closedIndices: []
};
@andigu
andigu / 3DAnimation.js
Last active February 26, 2023 17:59
Advanced demo for panresponder
import React, {Component} from "react";
import {Animated, Dimensions, Easing, PanResponder, StyleSheet, View} from "react-native";
import {Card} from "./Card";
const {width: screenWidth, height: screenHeight} = Dimensions.get("window");
export class Sliding extends Component {
bottomPadding = 10;
data = new Array(20).fill({
name: "John Smith",
@andigu
andigu / Alarm.java
Last active February 26, 2023 18:01
public class Alarm extends BroadcastReceiver {
@Override
public void onReceive(final Context context, Intent intent) {
final Intent service = new Intent(context, AlarmService.class);
HeadlessJsTaskService.acquireWakeLockNow(context);
UiThreadUtil.runOnUiThread(new Runnable() {
@Override
public void run() {
context.startService(service);
public class AlarmService extends HeadlessJsTaskService {
static long lastActive = 0;
@Override
protected @Nullable
HeadlessJsTaskConfig getTaskConfig(Intent intent) {
long current = System.currentTimeMillis();
if ((current - lastActive) >= 30 * 1000) {
lastActive = current;
return new HeadlessJsTaskConfig(