Merge branch 'main' into @tjzel/clangd-support

packages/docs-reanimated/src/examples/DelayText.tsx

@@ -5,6 +5,7 @@ import Animated, {
   withDelay,
   withTiming,
 } from 'react-native-reanimated';
+import useThemedTextStyle from '@site/src/hooks/useThemedTextStyle';
 
 const DURATION = 1000;
 const DELAY = 500;
@@ -16,6 +17,7 @@ interface AppProps {
 }
 
 export default function App({ width }: AppProps) {
+  const textColor = useThemedTextStyle();
   const [isShown, setShown] = useState<boolean>(false);
 
   const opacity1 = useSharedValue<number>(0);
@@ -40,20 +42,21 @@ export default function App({ width }: AppProps) {
   return (
     <View style={styles.container}>
       <View style={styles.text}>
-        <Animated.Text style={{ ...styles.label, opacity: opacity1 }}>
+        <Animated.Text style={[styles.label, textColor, { opacity: opacity1 }]}>
           {text[0]}
         </Animated.Text>
-        <Animated.Text style={{ ...styles.label, opacity: opacity2 }}>
+        <Animated.Text style={[styles.label, textColor, { opacity: opacity2 }]}>
           {text[1]}
         </Animated.Text>
         {width > 450 && (
-          <Animated.Text style={{ ...styles.label, opacity: opacity3 }}>
+          <Animated.Text
+            style={[styles.label, textColor, { opacity: opacity3 }]}>
             {text[2]}
           </Animated.Text>
         )}
       </View>
       {width <= 450 && (
-        <Animated.Text style={{ ...styles.label, opacity: opacity3 }}>
+        <Animated.Text style={[styles.label, textColor, { opacity: opacity3 }]}>
           {text[2]}
         </Animated.Text>
       )}

packages/docs-reanimated/src/examples/MakeMutable.tsx

@@ -1,5 +1,4 @@
-import { Text, StyleSheet, View, TouchableOpacity } from 'react-native';
-import { useColorScheme } from '@mui/material';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
 
 import React, { useCallback, useMemo, useState } from 'react';
 import Animated, {
@@ -9,19 +8,16 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
-
-function useTextColorStyle() {
-  const { colorScheme } = useColorScheme();
-
-  return colorScheme === 'light' ? styles.darkText : styles.lightText;
-}
+import useThemedTextStyle from '@site/src/hooks/useThemedTextStyle';
 
 type CheckListSelectorProps = {
   items: string[];
   onSubmit: (selectedItems: string[]) => void;
 };
 
 function CheckListSelector({ items, onSubmit }: CheckListSelectorProps) {
+  const textColor = useThemedTextStyle();
+
   const checkListItemProps = useMemo(
     () =>
       items.map((item) => ({
@@ -48,7 +44,7 @@ function CheckListSelector({ items, onSubmit }: CheckListSelectorProps) {
         <CheckListItem key={props.item} {...props} />
       ))}
       <TouchableOpacity style={styles.submitButton} onPress={handleSubmit}>
-        <Text style={styles.submitButtonText}>Submit</Text>
+        <Text style={[styles.submitButtonText, textColor]}>Submit</Text>
       </TouchableOpacity>
     </View>
   );
@@ -60,7 +56,7 @@ type CheckListItemProps = {
 };
 
 function CheckListItem({ item, selected }: CheckListItemProps) {
-  const textColor = useTextColorStyle();
+  const textColor = useThemedTextStyle();
 
   const onPress = useCallback(() => {
     // highlight-start
@@ -109,7 +105,7 @@ const ITEMS = [
 ];
 
 export default function App() {
-  const textColor = useTextColorStyle();
+  const textColor = useThemedTextStyle();
   const [selectedItems, setSelectedItems] = useState<string[]>([]);
 
   return (
@@ -166,10 +162,4 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
   },
-  lightText: {
-    color: 'var(--swm-off-white)',
-  },
-  darkText: {
-    color: 'var(--swm-navy-light-100)',
-  },
 });

packages/docs-reanimated/src/examples/ReducedMotionConfig.tsx

@@ -1,4 +1,3 @@
-import { useColorScheme } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Switch, View, Text } from 'react-native';
 import Animated, {
@@ -9,9 +8,10 @@ import Animated, {
   ReducedMotionConfig,
   ReduceMotion,
 } from 'react-native-reanimated';
+import useThemedTextStyle from '@site/src/hooks/useThemedTextStyle';
 
 export default function App() {
-  const { colorScheme } = useColorScheme();
+  const textColor = useThemedTextStyle();
   const [isReduceMotionDisabled, setIsReduceMotionDisabled] = useState(false);
   const sv = useSharedValue<number>(0);
   const animatedStyle = useAnimatedStyle(() => ({
@@ -21,10 +21,7 @@ export default function App() {
   useEffect(() => {
     sv.value = 0;
     sv.value = withRepeat(withTiming(360, { duration: 2000 }), -1, true);
-  }, [colorScheme, isReduceMotionDisabled]);
-
-  const textColor =
-    colorScheme === 'light' ? styles.darkText : styles.lightText;
+  }, [textColor, isReduceMotionDisabled]);
 
   return (
     <View style={styles.container}>
@@ -63,10 +60,4 @@ const styles = StyleSheet.create({
     fontFamily: 'Aeonik',
     fontSize: 16,
   },
-  lightText: {
-    color: 'var(--swm-off-white)',
-  },
-  darkText: {
-    color: 'var(--swm-navy-light-100)',
-  },
 });

packages/docs-reanimated/src/examples/RelativeCoords.tsx

@@ -4,12 +4,12 @@ import Animated, {
   useAnimatedRef,
   getRelativeCoords,
 } from 'react-native-reanimated';
-import { useColorScheme } from '@mui/material';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import useThemedTextStyle from '@site/src/hooks/useThemedTextStyle';
 
 const RelativeCoords = () => {
   const animatedRef = useAnimatedRef();
-  const { colorScheme } = useColorScheme();
+  const textColor = useThemedTextStyle();
   const [coords, setCoords] = useState({ x: 0, y: 0 });
 
   const tapGesture = Gesture.Tap().onEnd((event) => {
@@ -23,9 +23,6 @@ const RelativeCoords = () => {
     }
   });
 
-  const textColor =
-    colorScheme === 'light' ? styles.darkText : styles.lightText;
-
   return (
     <View style={styles.container}>
       <Text style={[styles.coordsData, textColor]}>
@@ -74,12 +71,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
   },
-  lightText: {
-    color: 'var(--swm-off-white)',
-  },
-  darkText: {
-    color: 'var(--swm-navy-light-100)',
-  },
 });
 
 export default RelativeCoords;

packages/docs-reanimated/src/examples/RunOnUI.tsx

@@ -7,12 +7,14 @@ import Animated, {
   runOnUI,
   MeasuredDimensions,
 } from 'react-native-reanimated';
+import useThemedTextStyle from '@site/src/hooks/useThemedTextStyle';
 
 type MeasurableTextProps = React.PropsWithChildren<{
   onPress: (measurements: MeasuredDimensions) => void;
 }>;
 
 function MeasurableText(props: MeasurableTextProps) {
+  const textColor = useThemedTextStyle();
   const { children, onPress } = props;
   const animatedRef = useAnimatedRef<Animated.View>();
 
@@ -27,7 +29,7 @@ function MeasurableText(props: MeasurableTextProps) {
 
   return (
     <Animated.Text
-      style={styles.title}
+      style={[styles.title, textColor]}
       onPress={handleMeasure}
       ref={animatedRef}>
       {children}

packages/docs-reanimated/src/examples/TimingTabs.tsx

@@ -5,11 +5,13 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated';
+import useThemedTextStyle from '@site/src/hooks/useThemedTextStyle';
 
 const TAB_WIDTH = 150;
 const TABS = ['Home', 'Search', 'Profile'];
 
 export default function App() {
+  const textColor = useThemedTextStyle();
   const offset = useSharedValue<number>(-TAB_WIDTH);
 
   const animatedStyles = useAnimatedStyle(() => ({
@@ -43,7 +45,7 @@ export default function App() {
               i !== TABS.length - 1 ? [styles.tab, styles.divider] : styles.tab
             }
             onPress={() => handlePress(tab)}>
-            <Text style={styles.tabLabel}>{tab}</Text>
+            <Text style={[styles.tabLabel, textColor]}>{tab}</Text>
           </Pressable>
         ))}
       </View>
@@ -79,7 +81,7 @@ const styles = StyleSheet.create({
   animatedBorder: {
     height: 8,
     width: 64,
-    backgroundColor: 'tomato',
+    backgroundColor: 'var(--swm-purple-dark-100)',
     borderRadius: 20,
   },
 });

packages/docs-reanimated/src/examples/UseHandlerEventExample.tsx

@@ -6,13 +6,13 @@ import Animated, {
   useAnimatedProps,
   type ScrollEvent,
 } from 'react-native-reanimated';
-import { useColorScheme } from '@mui/material';
 import { TextInput, SafeAreaView, View, StyleSheet } from 'react-native';
+import useThemedTextStyle from '@site/src/hooks/useThemedTextStyle';
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 function UseHandlerExample() {
-  const { colorScheme } = useColorScheme();
+  const textColor = useThemedTextStyle();
   const offsetY = useSharedValue(0);
 
   const handlers = {
@@ -45,9 +45,6 @@ function UseHandlerExample() {
 
   const BRAND_COLORS = ['#fa7f7c', '#b58df1', '#ffe780', '#82cab2', '#87cce8'];
 
-  const textColor =
-    colorScheme === 'light' ? styles.darkText : styles.lightText;
-
   const content = BRAND_COLORS.map((color, index) => (
     <View
       key={index}
@@ -94,10 +91,4 @@ const styles = StyleSheet.create({
     marginVertical: 10,
     marginHorizontal: 20,
   },
-  lightText: {
-    color: '#001a72',
-  },
-  darkText: {
-    color: '#f8f9ff',
-  },
 });

packages/docs-reanimated/src/hooks/useScreenSize.tsx → packages/docs-reanimated/src/hooks/useScreenSize.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 /*
  * Caution - read before use!

packages/docs-reanimated/src/hooks/useThemedTextStyle.ts

@@ -0,0 +1,18 @@
+import { useColorScheme } from '@mui/material';
+import { StyleSheet, TextStyle } from 'react-native';
+
+const useThemedTextStyle = (): TextStyle => {
+  const { colorScheme } = useColorScheme();
+  return colorScheme === 'light' ? styles.darkText : styles.lightText;
+};
+
+export default useThemedTextStyle;
+
+const styles = StyleSheet.create({
+  lightText: {
+    color: 'var(--swm-off-white)',
+  },
+  darkText: {
+    color: 'var(--swm-navy-light-100)',
+  },
+});

packages/docs-reanimated/src/pages/index.tsx

@@ -6,7 +6,7 @@ import HomepageStartScreen from '@site/src/components/Hero/StartScreen';
 import ReanimatedFeatures from '@site/src/components/ReanimatedFeatures';
 import Animations from '@site/src/components/Animations';
 import Testimonials from '@site/src/components/Testimonials';
-import FooterBackground from '../components/FooterBackground';
+import FooterBackground from '@site/src/components/FooterBackground';
 import Sponsors from '@site/src/components/Sponsors';
 import { HireUsSection } from '@swmansion/t-rex-ui';