refactor: migrate components to Reanimated

Author: satya164

docs/6.x/docs/components/Appbar/Appbar.mdx

@@ -131,11 +131,11 @@ export default MyComponent;
 
 <div>
 
-### elevated  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
+### elevation
 
 </div>
 
-  <PropTable componentLink="Appbar/Appbar" prop="elevated" />
+  <PropTable componentLink="Appbar/Appbar" prop="elevation" />
 
 <div>
 

docs/6.x/docs/components/Appbar/AppbarHeader.mdx

@@ -82,11 +82,11 @@ export default MyComponent;
 
 <div>
 
-### elevated  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
+### elevation
 
 </div>
 
-  <PropTable componentLink="Appbar/AppbarHeader" prop="elevated" />
+  <PropTable componentLink="Appbar/AppbarHeader" prop="elevation" />
 
 <div>
 

docs/6.x/docs/components/Surface.mdx

@@ -26,7 +26,11 @@ import { Surface, Text } from 'react-native-paper';
 import { StyleSheet } from 'react-native';
 
 const MyComponent = () => (
-  <Surface style={styles.surface} elevation={4}>
+  <Surface
+    style={styles.surface}
+    contentStyle={styles.content}
+    elevation={4}
+  >
      <Text>Surface</Text>
   </Surface>
 );
@@ -35,9 +39,12 @@ export default MyComponent;
 
 const styles = StyleSheet.create({
   surface: {
-    padding: 8,
     height: 80,
     width: 80,
+  },
+  content: {
+    flex: 1,
+    padding: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -68,6 +75,14 @@ const styles = StyleSheet.create({
 
 <div>
 
+### contentStyle
+
+</div>
+
+  <PropTable componentLink="Surface" prop="contentStyle" />
+
+<div>
+
 ### elevation  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
 
 </div>

example/src/Examples/AppbarExample.tsx

@@ -47,7 +47,7 @@ const AppbarExample = () => {
         <Appbar.Header
           style={showCustomColor ? styles.customColor : null}
           mode={appbarMode}
-          elevated={showElevated}
+          elevation={showElevated ? 2 : 0}
         >
           {showLeftIcon && (
             <Appbar.BackAction onPress={() => navigation.goBack()} />

example/src/Examples/BottomNavigationExample.tsx

@@ -86,7 +86,7 @@ const BottomNavigationExample = () => {
 
   return (
     <View style={styles.screen}>
-      <Appbar.Header elevated>
+      <Appbar.Header>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
         <Appbar.Content title="Bottom Navigation" />
         <Menu

example/src/Examples/MenuExample.tsx

@@ -50,7 +50,7 @@ const MenuExample = () => {
 
   return (
     <View style={styles.screen}>
-      <Appbar.Header elevated>
+      <Appbar.Header>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
         <Appbar.Content title="Menu" />
         <Menu

example/src/Examples/SurfaceExample.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { Surface, Text, Palette, List, IconButton } from 'react-native-paper';
 import type { Elevation } from 'react-native-paper';
@@ -12,19 +12,14 @@ const AnimatedSurface = () => {
   const [index, setIndex] = React.useState(3);
 
   const level = elevationLevels[index];
-  const elevation = React.useRef(new Animated.Value(level)).current;
-
-  React.useEffect(() => {
-    Animated.timing(elevation, {
-      toValue: level,
-      duration: 250,
-      useNativeDriver: false,
-    }).start();
-  }, [elevation, level]);
 
   return (
     <View style={styles.scroll}>
-      <Surface style={styles.surface} elevation={elevation}>
+      <Surface
+        style={styles.surface}
+        contentStyle={styles.surfaceContent}
+        elevation={level}
+      >
         <Text variant="bodySmall">{`Elevation ${level}`}</Text>
       </Surface>
       <View style={styles.actions}>
@@ -49,7 +44,13 @@ const SurfaceExample = () => {
   const elevationValues: Elevation[] = [0, 1, 2, 3, 4, 5];
 
   const renderSurface = (index: Elevation, mode: 'flat' | 'elevated') => (
-    <Surface key={index} style={styles.surface} mode={mode} elevation={index}>
+    <Surface
+      key={index}
+      style={styles.surface}
+      contentStyle={styles.surfaceContent}
+      mode={mode}
+      elevation={index}
+    >
       <Text variant="bodySmall">{`Elevation ${index}`}</Text>
     </Surface>
   );
@@ -93,10 +94,16 @@ const SurfaceExample = () => {
             </Surface>
           </View>
           <View style={styles.verticalSurfacesContainer}>
-            <Surface style={styles.verticalSurface}>
+            <Surface
+              style={styles.verticalSurface}
+              contentStyle={styles.verticalSurfaceContent}
+            >
               <Text style={styles.centerText}>Top</Text>
             </Surface>
-            <Surface style={styles.verticalSurface}>
+            <Surface
+              style={styles.verticalSurface}
+              contentStyle={styles.verticalSurfaceContent}
+            >
               <Text style={styles.centerText}>Bottom</Text>
             </Surface>
           </View>
@@ -122,6 +129,10 @@ const styles = StyleSheet.create({
     height: 120,
     width: 120,
     borderRadius: 8,
+  },
+  surfaceContent: {
+    flex: 1,
+    borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -153,6 +164,9 @@ const styles = StyleSheet.create({
   },
   verticalSurface: {
     height: '48%',
+  },
+  verticalSurfaceContent: {
+    flex: 1,
     justifyContent: 'center',
   },
 

example/src/Examples/TeamDetails.tsx

@@ -207,7 +207,7 @@ const ThemeBasedOnSourceColor = () => {
   return (
     <PaperProvider theme={theme[colorScheme]}>
       <View style={styles.screen}>
-        <Appbar.Header elevated>
+        <Appbar.Header>
           <Appbar.BackAction onPress={() => navigation.goBack()} />
           <Appbar.Content title={headerTitle} />
         </Appbar.Header>

example/src/Examples/TooltipExample.tsx

@@ -44,7 +44,7 @@ const TooltipExample = () => {
   React.useLayoutEffect(() => {
     navigation.setOptions({
       header: () => (
-        <Appbar.Header elevated>
+        <Appbar.Header>
           <Tooltip title="Go back">
             <Appbar.BackAction onPress={() => navigation.goBack()} />
           </Tooltip>

example/src/RootNavigator.tsx

@@ -25,7 +25,7 @@ function Header({ navigation, route, options, back }: NativeStackHeaderProps) {
   const drawerNavigation = useNavigation('Home');
 
   return (
-    <Appbar.Header elevated>
+    <Appbar.Header>
       {back ? (
         <Appbar.BackAction onPress={() => navigation.goBack()} />
       ) : (