Add new examples and update docs (#264)

* add useAnimationDuration example * added example for UseReanimatedAnimationBuilderScreen * add switchListItem example * update example * fix ts type * update folder name * revert link to match src folder structure * fix links * Update to be platform specific * updated description for useReanimatedAnimationBuilder screen * updated example for SwitchListItem screen --------- Co-authored-by: JDMathew <[email protected]>
FormidableLabs · Oct 9, 2024 · 544bf32 · 544bf32
1 parent fce6630
commit 544bf32
Show file tree

Hide file tree

Showing 17 changed files with 501 additions and 22 deletions.
diff --git a/examples/bare/ios/AMAExample.xcodeproj/project.pbxproj b/examples/bare/ios/AMAExample.xcodeproj/project.pbxproj
@@ -470,6 +470,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = "";
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = AMAExample/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "AMA Example";
@@ -498,6 +499,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = AMAExample/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "AMA Example";
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -586,8 +588,10 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				USE_HERMES = true;
 			};
 			name = Debug;
 		};
@@ -652,8 +656,10 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				USE_HERMES = true;
 				VALIDATE_PRODUCT = YES;
 			};
 			name = Release;

diff --git a/examples/bare/src/AppNavigator.tsx b/examples/bare/src/AppNavigator.tsx
@@ -9,11 +9,14 @@ import {
   Header,
   HomeScreen,
   PressableScreen,
+  SwitchListItemScreen,
   TextScreen,
   TouchableOpacityScreen,
   TouchableWithoutFeedbackScreen,
   UseAMAContextScreen,
+  UseAnimationDurationScreen,
   UseAnimationScreen,
+  UseReanimatedAnimationBuilderScreen,
   UseReanimatedTimingScreen,
   UseTimedActionScreen,
 } from '@examples/shared-ui';
@@ -51,6 +54,16 @@ export const AppNavigator = () => {
             headerTitle: () => <Header title={'Pressable Demo'} autofocus />,
           }}
         />
+        <Stack.Screen
+          name="SwitchListItem"
+          component={SwitchListItemScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => (
+              <Header title={'Switch List Item Demo'} autofocus />
+            ),
+          }}
+        />
         <Stack.Screen
           name="TouchableOpacity"
           component={TouchableOpacityScreen}
@@ -89,6 +102,16 @@ export const AppNavigator = () => {
             ),
           }}
         />
+        <Stack.Screen
+          name="UseAnimationDuration"
+          component={UseAnimationDurationScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => (
+              <Header title={'Animation Duration Demo'} autofocus />
+            ),
+          }}
+        />
         <Stack.Screen
           name="UseReanimatedTiming"
           component={UseReanimatedTimingScreen}
@@ -99,6 +122,16 @@ export const AppNavigator = () => {
             ),
           }}
         />
+        <Stack.Screen
+          name="UseReanimatedAnimationBuilder"
+          component={UseReanimatedAnimationBuilderScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => (
+              <Header title={'Reanimated Animation Builder Demo'} autofocus />
+            ),
+          }}
+        />
         <Stack.Screen
           name="Form"
           component={FormScreen}
@@ -192,7 +225,10 @@ type StackParamList = {
   TouchableWithoutFeedback: undefined;
   Text: undefined;
   UseAnimation: undefined;
+  UseAnimationDuration: undefined;
+  UseReanimatedAnimationBuilder: undefined;
   UseReanimatedTiming: undefined;
+  SwitchListItem: undefined;
   Form: undefined;
   FlatList: undefined;
   ExpandablePressable: undefined;

diff --git a/examples/bare/src/types.ts b/examples/bare/src/types.ts
@@ -5,6 +5,8 @@ export type RootStackParamList = {
   TouchableWithoutFeedback: undefined;
   Text: undefined;
   UseAnimation: undefined;
+  UseAnimationDuration: undefined;
+  UseReanimatedAnimationBuilder: undefined;
   UseReanimatedTiming: undefined;
   Form: undefined;
   FlatList: undefined;
@@ -14,4 +16,5 @@ export type RootStackParamList = {
   BottomSheet: undefined;
   UseTimedAction: undefined;
   UseAMAContext: undefined;
+  SwitchListItem: undefined;
 };
diff --git a/examples/expo/src/AppNavigation.tsx b/examples/expo/src/AppNavigation.tsx
@@ -9,11 +9,14 @@ import {
   Header,
   HomeScreen,
   PressableScreen,
+  SwitchListItemScreen,
   TextScreen,
   TouchableOpacityScreen,
   TouchableWithoutFeedbackScreen,
   UseAMAContextScreen,
+  UseAnimationDurationScreen,
   UseAnimationScreen,
+  UseReanimatedAnimationBuilderScreen,
   UseReanimatedTimingScreen,
   UseTimedActionScreen,
 } from '@examples/shared-ui';
@@ -51,6 +54,16 @@ export const AppNavigator = () => {
             headerTitle: () => <Header title={'Pressable Demo'} autofocus />,
           }}
         />
+        <Stack.Screen
+          name="SwitchListItem"
+          component={SwitchListItemScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => (
+              <Header title={'Switch List Item Demo'} autofocus />
+            ),
+          }}
+        />
         <Stack.Screen
           name="TouchableOpacity"
           component={TouchableOpacityScreen}
@@ -89,6 +102,16 @@ export const AppNavigator = () => {
             ),
           }}
         />
+        <Stack.Screen
+          name="UseAnimationDuration"
+          component={UseAnimationDurationScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => (
+              <Header title={'Animation Duration Demo'} autofocus />
+            ),
+          }}
+        />
         <Stack.Screen
           name="UseReanimatedTiming"
           component={UseReanimatedTimingScreen}
@@ -99,6 +122,16 @@ export const AppNavigator = () => {
             ),
           }}
         />
+        <Stack.Screen
+          name="UseReanimatedAnimationBuilder"
+          component={UseReanimatedAnimationBuilderScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => (
+              <Header title={'Reanimated Animation Builder Demo'} autofocus />
+            ),
+          }}
+        />
         <Stack.Screen
           name="Form"
           component={FormScreen}
@@ -192,9 +225,12 @@ type StackParamList = {
   TouchableWithoutFeedback: undefined;
   Text: undefined;
   UseAnimation: undefined;
+  UseAnimationDuration: undefined;
   UseReanimatedTiming: undefined;
+  UseReanimatedAnimationBuilder: undefined;
   Form: undefined;
   FlatList: undefined;
+  SwitchListItem: undefined;
   ExpandablePressable: undefined;
   FlatListDynamic: undefined;
   FlatListStatic: undefined;

diff --git a/examples/shared/index.ts b/examples/shared/index.ts
@@ -19,9 +19,12 @@ export { TextScreen } from './src/screens/Text.screen';
 export { TouchableOpacityScreen } from './src/screens/TouchableOpacity.screen';
 export { TouchableWithoutFeedbackScreen } from './src/screens/TouchableWithoutFeedback.screen';
 export { UseAMAContextScreen } from './src/screens/UseAMAContext.screen';
+export { UseAnimationDurationScreen } from './src/screens/UseAnimationDurationScreen';
 export { UseAnimationScreen } from './src/screens/UseAnimationScreen';
+export { UseReanimatedAnimationBuilderScreen } from './src/screens/UseReanimatedAnimationBuilderScreen';
 export { UseReanimatedTimingScreen } from './src/screens/UseReanimatedTimingScreen';
 export { UseTimedActionScreen } from './src/screens/UseTimedAction.screen';
+export { SwitchListItemScreen } from './src/screens/SwitchListItemScreen';
 
 // other
 

diff --git a/examples/shared/src/screens/Home.screen.tsx b/examples/shared/src/screens/Home.screen.tsx
@@ -26,6 +26,11 @@ export const HomeScreen = ({ navigation }) => {
           onPress={() => navigate('TouchableWithoutFeedback')}
         />
         <Spacer height={'normal'} />
+        <CTAPressable
+          title="SwitchListItem"
+          onPress={() => navigate('SwitchListItem')}
+        />
+        <Spacer height={'normal'} />
         <CTAPressable
           title="ExpandablePressable"
           onPress={() => navigate('ExpandablePressable')}
@@ -57,6 +62,16 @@ export const HomeScreen = ({ navigation }) => {
           onPress={() => navigate('UseAnimation')}
         />
         <Spacer height={'normal'} />
+        <CTAPressable
+          title="useAnimationDuration"
+          onPress={() => navigate('UseAnimationDuration')}
+        />
+        <Spacer height={'normal'} />
+        <CTAPressable
+          title="useReanimatedAnimationBuilder"
+          onPress={() => navigate('UseReanimatedAnimationBuilder')}
+        />
+        <Spacer height={'normal'} />
         <CTAPressable
           title="useReanimatedTiming"
           onPress={() => navigate('UseReanimatedTiming')}