return (<><StatusBar style="light" /><View style={{ flex: 1 }} /><TouchableOpacitystyle={styles.buttonContainer}onPress={() => {console.log('pressed');}}><FontAwesome name="random" size={24} color="white" /></TouchableOpacity></>);
import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia';// ...return (<><StatusBar style="light" /><Canvas style={{ flex: 1 }}><Rect x={0} y={0} width={200} height={200}><LinearGradientstart={vec(0, 0)}end={vec(200, 200)}colors={['red', 'blue']}/></Rect></Canvas>...</>);
import { useWindowDimensions } from 'react-native';return (<><StatusBar style="light" /><Canvas style={{ flex: 1 }}><Rect x={0} y={0} width={width} height={height}><LinearGradientstart={vec(0, 0)}end={vec(width, height)}colors={['red', 'blue']}/></Rect></Canvas>...</>);
import { useSharedValue, withTiming } from 'react-native-reanimated';// ...const leftColor = useSharedValue('red');const rightColor = useSharedValue('blue');
const colors = useDerivedValue(() => {return [leftColor.value, rightColor.value];}, []);
<Canvas style={{ flex: 1 }}><Rect x={0} y={0} width={width} height={height}><LinearGradientstart={vec(0, 0)}end={vec(width, height)}colors={colors}/></Rect></Canvas>
const getRandomColor = () => {// Generate random RGB color valuesconst r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);// Return the color in the format 'rgba(r, g, b, 1)'return `rgba(${r}, ${g}, ${b}, 1)`;};
<TouchableOpacitystyle={styles.buttonContainer}onPress={() => {leftColor.value = getRandomColor();rightColor.value = getRandomColor();}}><FontAwesome name="random" size={24} color="white" /></TouchableOpacity>
leftColor.value = withTiming(getRandomColor());rightColor.value = withTiming(getRandomColor());
import {TouchableOpacity,StyleSheet,View,useWindowDimensions,} from 'react-native';import { StatusBar } from 'expo-status-bar';import { FontAwesome } from '@expo/vector-icons';import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia';import {useDerivedValue,useSharedValue,withTiming,} from 'react-native-reanimated';// That was in the utils file (but let's keep it here for the sake of simplicity)const getRandomColor = () => {// Generate random RGB color valuesconst r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);// Return the color in the format 'rgba(r, g, b, 1)'return `rgba(${r}, ${g}, ${b}, 1)`;};const App = () => {const { width, height } = useWindowDimensions();const leftColor = useSharedValue('red');const rightColor = useSharedValue('blue');const colors = useDerivedValue(() => {return [leftColor.value, rightColor.value];}, []);return (<><StatusBar style="light" /><Canvas style={{ flex: 1 }}><Rect x={0} y={0} width={width} height={height}><LinearGradientstart={vec(0, 0)}end={vec(width, height)}colors={colors}/></Rect></Canvas><TouchableOpacitystyle={styles.buttonContainer}onPress={() => {// Where the magic happens 🪄leftColor.value = withTiming(getRandomColor());rightColor.value = withTiming(getRandomColor());}}><FontAwesome name="random" size={24} color="white" /></TouchableOpacity></>);};// Boring stylesconst styles = StyleSheet.create({buttonContainer: {position: 'absolute',bottom: 52,right: 32,height: 64,aspectRatio: 1,borderRadius: 40,backgroundColor: '#111',zIndex: 10,justifyContent: 'center',alignItems: 'center',},});export { App };
Every week I send out a newsletter sharing new things.