Something awesome about Skia

03/17/2024 13:17

React Native Skia works wonderfully.
I've managed to seamlessly integrate it with Reanimated 3 as well.
I even have the touch listeners directly on the Skia components.

It automatically overlays the Skia view with the Animated.View and binds it.
To achieve this, I created an extension of the skia canvas, along with a react context for the components to communicate the touch components to.

That in turn gives me this delicious setup:

export default function Page() {

  const onPress = () => {
    console.log('pressed');
  }

  return (
    <View style={{flex: 1}}>
      <Canvas>
        <Button onPress={onPress} />
      </Canvas>
    </View>
  );
}

export default function Page() {

  const onPress = () => {
    console.log('pressed');
  }

  return (
    <View style={{flex: 1}}>
      <Canvas>
        <Button onPress={onPress} />
      </Canvas>
    </View>
  );
}

This allows the same flexibility that the standard React components offer, in the sense that you can connect the onPress listener directly to a Skia component.
To me, this is just beautiful and will be one of the things that will soon allow me to fly very fast.

Thankful for Skia as well, that library performs so well.
Excited to see how far I can take this stack.

I'm considering doing Skia tutorials as well, in the same style as @wcandillon does along the way.
Let me know if this is something you would want.

So what happens under the hood?

All of this happens through a custom context and a custom hook.

// The hook, from a custom context
const { addGesture, removeGesture } = useGestureHandler()

// _layout.tsx
export default function RootLayout() {
  ...
  return (
    <VariousProviders>
      <Slot />
      {/* The gestures added by the components are rendered on top automatically */}
      { gestures.map((gesture, index) => (
        <Fragment key={index}>
          {gesture}
        </Fragment>
      ))}
    </VariousProviders>
  )
}

// The hook, from a custom context
const { addGesture, removeGesture } = useGestureHandler()

// _layout.tsx
export default function RootLayout() {
  ...
  return (
    <VariousProviders>
      <Slot />
      {/* The gestures added by the components are rendered on top automatically */}
      { gestures.map((gesture, index) => (
        <Fragment key={index}>
          {gesture}
        </Fragment>
      ))}
    </VariousProviders>
  )
}

And then finally, the button component with touch handlers can be implemented like so:

export default function Button({ onPress }: ButtonProps) {

  const { addGesture, removeGesture } = useGestureHandler()
  
  useEffect(() => {
    const gesture = <TabGesture 
      height={128} 
      width={128} 
      left={64} 
      top={64} 
      tabbed={tabbed} 
    />
    addGesture([gesture])
    return () => removeGesture([gesture])
  }, [])

  return (
    <>
      <Box box={rrect(rect(64, 64, 128, 128), 24, 24)} color='green' />
    </>
  )
}

export default function Button({ onPress }: ButtonProps) {

  const { addGesture, removeGesture } = useGestureHandler()
  
  useEffect(() => {
    const gesture = <TabGesture 
      height={128} 
      width={128} 
      left={64} 
      top={64} 
      tabbed={tabbed} 
    />
    addGesture([gesture])
    return () => removeGesture([gesture])
  }, [])

  return (
    <>
      <Box box={rrect(rect(64, 64, 128, 128), 24, 24)} color='green' />
    </>
  )
}

Where the TabGesture component looks like this:

export function TabGesture({top, left, width, height, tabbed}: TabGestureProps) {
  const gesture = Gesture.Manual()
    .onTouchesDown(() => {
      tabbed.value = true;
    })
    .onTouchesUp(() => {
      tabbed.value = false
    })

  const style = useAnimatedStyle(() => {
    return {height, width, top, left, position: 'absolute'}
  })

  return ( 
    <GestureDetector gesture={gesture}>
      <Animated.View style={style} />
    </GestureDetector>
  )
}

export function TabGesture({top, left, width, height, tabbed}: TabGestureProps) {
  const gesture = Gesture.Manual()
    .onTouchesDown(() => {
      tabbed.value = true;
    })
    .onTouchesUp(() => {
      tabbed.value = false
    })

  const style = useAnimatedStyle(() => {
    return {height, width, top, left, position: 'absolute'}
  })

  return ( 
    <GestureDetector gesture={gesture}>
      <Animated.View style={style} />
    </GestureDetector>
  )
}

And that gives us this magical setup:

export default function Page() {

  const onPress = () => {
    console.log('pressed');
  }

  return (
    <View style={{flex: 1}}>
      <Canvas>
        <Button onPress={onPress} />
      </Canvas>
    </View>
  );
}

export default function Page() {

  const onPress = () => {
    console.log('pressed');
  }

  return (
    <View style={{flex: 1}}>
      <Canvas>
        <Button onPress={onPress} />
      </Canvas>
    </View>
  );
}

And then in the button, you can trigger the onPress event from the props like so (or however you want your component to trigger the event):

useDerivedValue(() => {
  if(tabbed.value) {
    runOnJS(onPress?.call)
  }
})

useDerivedValue(() => {
  if(tabbed.value) {
    runOnJS(onPress?.call)
  }
})

That's about it!
I hope you got inspired for your own Skia setup. Since all of these libraries are new, I find it interesting to see new uses of Skia pop up.

Thanks for reading 😊 Comments, likes and subscriptions are always appreciated, and can be done so annonymously.

Write a reply (0/3500)

Replies

(1/0) 03/18/2024 13:14, anonymous user wrote

"thanks for sharing this, do you a rep example of this?" - I'll set up a repo later "Don't you mean Tapped gesture btw? Instead of "Tabbed"" - Yes, you're right. I'll correct it soon "Shouldn't you have a way to reply to people here?" - Yeah I should, will make it soon 😄

(1/0) 03/18/2024 07:40, anonymous user wrote

Don't you mean Tapped gesture btw? Instead of "Tabbed"

(1/0) 03/18/2024 04:43, anonymous user wrote

thanks for sharing this, do you a rep example of this?