fix hoverable icons display

Author: Andrzej Antoni Kwaśniewski

apps/common-app/src/legacy/v2_api/hoverable_icons/index.tsx

@@ -95,7 +95,7 @@ export default function Example() {
 
   return (
     <Animated.View style={styles.container}>
-      <Animated.View style={{ flexDirection: 'row', overflow: 'visible' }}>
+      <Animated.View style={styles.wrapper}>
         {images.map((source, index) => (
           <BoxComponent key={index} source={source} />
         ))}
@@ -116,4 +116,10 @@ const styles = StyleSheet.create({
     height: SIZE,
     marginHorizontal: 8,
   },
+  wrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
 });

apps/common-app/src/new_api/platform_specific/hoverable_icons/index.tsx

@@ -98,7 +98,7 @@ export default function Example() {
 
   return (
     <Animated.View style={styles.container}>
-      <Animated.View style={{ flexDirection: 'row', overflow: 'visible' }}>
+      <Animated.View style={styles.wrapper}>
         {images.map((source, index) => (
           <BoxComponent key={index} source={source} />
         ))}
@@ -119,4 +119,10 @@ const styles = StyleSheet.create({
     height: SIZE,
     marginHorizontal: 8,
   },
+  wrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
 });