canvas working 🎉

src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx

@@ -3,42 +3,56 @@ import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
 import ViewShot from 'react-native-view-shot'
 import {StyleSheet, View} from 'react-native'
 
+export interface PlaceholderCanvasRef {
+  capture: () => Promise<string>
+}
+
 // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to
-// "screenshot"
+// "screenshot".
-export const PlaceholderCanvas = React.forwardRef(function PlaceholderCanvas(
+export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
-  {},
+  function PlaceholderCanvas({}, ref) {
-  ref,
+    const avatar = useAvatar()
-) {
+    const viewshotRef = React.useRef()
-  const avatar = useAvatar()
+    const Icon = avatar.placeholder.component
-  const viewshotRef = React.useRef()
-  const Icon = avatar.placeholder.component
 
-  // React.useEffect(() => {
+    React.useImperativeHandle(ref, () => ({
-  //   // @ts-ignore this library doesn't have types
+      // @ts-ignore this library doesn't have types
-  //   viewshotRef.current.capture().then(uri => {
+      capture: viewshotRef.current.capture,
-  //     return uri
+    }))
-  //   })
-  // }, [avatar, ref])
 
-  return (
+    return (
-    <View style={styles.imageContainer}>
+      <View style={styles.container}>
-      <ViewShot
+        <ViewShot
-        ref={viewshotRef}
+          // @ts-ignore this library doesn't have types
-        options={{fileName: 'placeholderAvatar', format: 'jpg', quality: 1.0}}>
+          ref={viewshotRef}
-        <View
+          options={{
-          style={[{backgroundColor: avatar.backgroundColor}]}
+            fileName: 'placeholderAvatar',
-          collapsable={false}>
+            format: 'jpg',
-          <Icon height={500} width={500} style={{color: 'white'}} />
+            quality: 1.0,
-        </View>
+          }}>
-      </ViewShot>
+          <View
-    </View>
+            style={[
-  )
+              styles.imageContainer,
-})
+              {backgroundColor: avatar.backgroundColor},
+            ]}
+            collapsable={false}>
+            <Icon height={85 * 5} width={85 * 5} style={{color: 'white'}} />
+          </View>
+        </ViewShot>
+      </View>
+    )
+  },
+)
 
 const styles = StyleSheet.create({
-  imageContainer: {
+  container: {
-    top: 100,
+    top: -2000,
     position: 'absolute',
-    zIndex: -5,
+  },
+  imageContainer: {
+    height: 150 * 5,
+    width: 150 * 5,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 })

src/screens/Onboarding/StepProfile/index.tsx

@@ -32,7 +32,10 @@ import {openCropper, openPicker} from 'lib/media/picker'
 import {Emoji, EmojiName, emojiItems, emojiNames} from './types'
 import {SelectImageButton} from '#/screens/Onboarding/StepProfile/SelectImageButton'
 import ViewShot from 'react-native-view-shot'
-import {PlaceholderCanvas} from '#/screens/Onboarding/StepProfile/PlaceholderCanvas'
+import {
+  PlaceholderCanvas,
+  PlaceholderCanvasRef,
+} from '#/screens/Onboarding/StepProfile/PlaceholderCanvas'
 
 interface Avatar {
   image?: {
@@ -63,6 +66,19 @@ export function StepProfile() {
     placeholder: emojiItems.smile,
     backgroundColor: '#338388',
   })
+  const [uri, setUri] = React.useState('')
+
+  const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
+
+  React.useEffect(() => {
+    // TODO remove, this is for testing
+    ;(async () => {
+      const res = await canvasRef.current?.capture()
+      if (res) {
+        setUri(res)
+      }
+    })()
+  }, [avatar])
 
   React.useEffect(() => {
     track('OnboardingV2:StepProfile:Start')
@@ -97,6 +113,8 @@ export function StepProfile() {
               </View>
               <Items type="emojis" />
               <Items type="colors" />
+              {/* TOOD remove, testing */}
+              <Image source={uri} style={{height: 100, width: 100}} />
             </View>
 
             <OnboardingControls.Portal>
@@ -114,7 +132,7 @@ export function StepProfile() {
               </Button>
             </OnboardingControls.Portal>
           </View>
-          <PlaceholderCanvas />
+          <PlaceholderCanvas ref={canvasRef} />
         </>
       </AvatarContext.Provider>
     </SetAvatarContext.Provider>
@@ -140,6 +158,7 @@ function AvatarCircle() {
     <View
       style={[
         styles.imageContainer,
+        t.atoms.border_contrast_high,
         {backgroundColor: avatar.backgroundColor},
       ]}>
       <Icon height={85} width={85} style={{color: 'white'}} />
@@ -256,7 +275,7 @@ const styles = StyleSheet.create({
     height: 150,
     width: 150,
     overflow: 'hidden',
-    borderWidth: 1,
+    borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center',
   },