Skip to content

Instantly share code, notes, and snippets.

View enzomanuelmangano's full-sized avatar
📺
https://www.youtube.com/c/Reactiive

Enzo Manuel Mangano enzomanuelmangano

📺
https://www.youtube.com/c/Reactiive
View GitHub Profile
import React, { useState } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { Switch } from 'react-native-gesture-handler';
import Animated, {
interpolateColor,
useAnimatedStyle,
useDerivedValue,
withTiming,
} from 'react-native-reanimated';
@enzomanuelmangano
enzomanuelmangano / App.tsx
Created May 19, 2021 17:01
interpolate backgroundColor of Circle and View
import React, { useState } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { Switch } from 'react-native-gesture-handler';
import Animated, {
interpolateColor,
useAnimatedStyle,
useDerivedValue,
withTiming,
} from 'react-native-reanimated';
@enzomanuelmangano
enzomanuelmangano / App.tsx
Last active May 19, 2021 16:58
We are animating the backgroundColor
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Switch } from 'react-native-gesture-handler';
import Animated, {
interpolateColor,
useAnimatedStyle,
useDerivedValue,
withTiming,
} from 'react-native-reanimated';
@enzomanuelmangano
enzomanuelmangano / App.tsx
Created May 19, 2021 16:41
Prepare the stuff for backgroundColor interpolation
export default function App() {
const [theme, setTheme] = useState<Theme>('light');
const rStyle = useAnimatedStyle(() => {
return {
backgroundColor: Colors.light.background,
};
});
return (
@enzomanuelmangano
enzomanuelmangano / App.tsx
Last active May 19, 2021 16:58
Switch Component
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Switch } from 'react-native-gesture-handler';
const Colors = {
dark: {
background: '#1E1E1E',
circle: '#252525',
text: '#F8F8F8',
@enzomanuelmangano
enzomanuelmangano / App.tsx
Last active May 19, 2021 16:58
Theme Colors
import React from 'react';
import { View, StyleSheet } from 'react-native';
const Colors = {
dark: {
background: '#1E1E1E',
circle: '#252525',
text: '#F8F8F8',
},
@enzomanuelmangano
enzomanuelmangano / babel.config.js
Last active May 19, 2021 15:57
babel config js with reanimated plugin
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};