Skip to content

Instantly share code, notes, and snippets.

View eveningkid's full-sized avatar

Arnaud eveningkid

View GitHub Profile
@eveningkid
eveningkid / react-native-animated_twitter-profile.jsx
Last active May 9, 2024 10:42
React Native Animated: Twitter Profile Example
// Expo SDK41
// expo-blur: ~9.0.3
import React, { useRef } from 'react';
import {
Animated,
Image,
ImageBackground,
ScrollView,
StatusBar,
@eveningkid
eveningkid / react-native-reanimated-drag-sort_apple-music.jsx
Last active June 13, 2024 07:13
React Native Reanimated 2 Multiple Drag and Sort: Apple Music Example
// Expo SDK40
// expo-blur: ~8.2.2
// expo-haptics: ~8.4.0
// react-native-gesture-handler: ~1.8.0
// react-native-reanimated: ^2.0.0-rc.0
// react-native-safe-area-context: 3.1.9
import React, { useState } from 'react';
import {
Image,
@eveningkid
eveningkid / react-native-shared-elements_facebook-marketplace.jsx
Created March 24, 2021 10:22
React Native Shared Elements: Facebook Marketplace Example
// Expo SDK40
// @react-native-community/masked-view: 0.1.10
// @react-navigation/native: ^5.9.3
// @react-navigation/stack: ^5.14.3
// react-native-gesture-handler: ~1.8.0
// react-native-reanimated: ~1.13.0
// react-native-safe-area-context: 3.1.9
// react-native-screens: ~2.15.2
// react-native-shared-element: 0.7.0
// react-navigation: 4
@eveningkid
eveningkid / pan-responder-pan-scale-image-example.jsx
Created February 19, 2021 17:54
React Native Pan Responder example to pan/scale an image
import React, { useRef } from 'react';
import {
Animated,
Image,
PanResponder,
useWindowDimensions,
} from 'react-native';
const IMAGE_URI =
'https://vignette.wikia.nocookie.net/joke-battles/images/4/40/18360-doge-doge-simple.jpg/revision/latest?cb=20151209161638';
@eveningkid
eveningkid / animated-toasts-notifications-react-native.jsx
Created February 17, 2021 11:53
Animated Toast/Notification in React Native
import React, {
useEffect,
useRef,
useState,
} from 'react';
import {
Animated,
Button,
Text,
// -- Cibler des éléments
// Comment cibler des éléments principaux ?
const head = document.head;
const body = document.body;
// Comment cicler des éléments par balise/tag HTML ?
// <div>
// <p>...</p>
// <p>...</p>
const initialState = { name: '' };
function reducer(state = initialState, action) {
switch (action.type) {
case 'CHANGE_NAME':
return { ...state, name: action.value };
}
}
const action = {
import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from "react-bootstrap/Image";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
function App() {
return (
module.exports = {
algo(input) {
const groups = [];
let currentGroup = '';
for (const letter of input.split('')) {
if (letter !== currentGroup.charAt(currentGroup.length - 1)) {
groups.push(currentGroup);
currentGroup = '';
}
// Grouped data can be structured in two different ways:
// - as a list:
const chris = [
'Christine',
'?',
'Ireland',
];
console.log(chris[0]);
// - as an object: