Remove use of flatten where possible (#9325)

* remove use of flatten where possible

* restore flatten where it says it's needed

* missing utils alpha

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
 import {type AppBskyEmbedImages} from '@atproto/api'
 
@@ -224,5 +224,5 @@ function noCorners(
   if (corners.includes('bottomRight')) {
     styles.push({borderBottomRightRadius: 0})
   }
-  return StyleSheet.flatten(styles)
+  return styles
 }

src/view/icons/Logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, type TextProps} from 'react-native'
+import {type TextProps} from 'react-native'
 import Svg, {
   Defs,
   LinearGradient,
@@ -12,6 +12,7 @@ import {Image} from 'expo-image'
 
 import {colors} from '#/lib/styles'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
+import {flatten} from '#/alf'
 
 const ratio = 57 / 64
 
@@ -23,7 +24,7 @@ type Props = {
 export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
   const {fill, ...rest} = props
   const gradient = fill === 'sky'
-  const styles = StyleSheet.flatten(props.style)
+  const styles = flatten(props.style)
   const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 32)