Forem: Bogdan Sikora

Interactive Mobile Experiences: Implementing Scratch Cards in React Native

Bogdan Sikora — Wed, 28 Feb 2024 03:31:22 +0000

In the digital age, engagement and interactivity have become cornerstones of user experience.
One unique method to elevate engagement in mobile applications is through the use of scratch card features.
Scratch cards, familiar to many from the realm of lottery tickets and reward games, involve scratching off a surface to reveal hidden information or prizes beneath.
In mobile apps, this concept is replicated digitally, providing a fun and interactive element for users. Examples of where digital scratch cards can be effectively utilized include:

Marketing Campaigns: Apps can use scratch cards as a part of promotional activities, allowing users to scratch off panels to reveal discounts, coupons, or special offers.
Educational Apps: To make learning more engaging, scratch cards can be used to reveal answers to quizzes or puzzles.
E-commerce Platforms: Scratch cards can serve as an intriguing way for customers to receive random rewards or discover special deals.
Loyalty Programs: Businesses can enhance their loyalty programs by offering digital scratch cards that provide a chance to win bonus points, exclusive content, or prizes.

However, when it comes to implementing such interactive scratch card features within React Native Expo projects, developers face a significant challenge.
React Native Expo, renowned for its extensive library and ease of use in developing cross-platform mobile applications,
surprisingly lacks actively maintained solutions for incorporating scratch card functionality.
While there exist a few attempts and scattered solutions across the development community, these are often outdated,
not optimized for current Expo SDK versions, or lack comprehensive documentation and support.
This gap signifies a missed opportunity for developers looking to integrate such engaging features seamlessly
into their apps without ejecting from Expo or resorting to complex native module integrations.

This gap in the React Native Expo ecosystem necessitates a creative and technically robust solution to bring the engaging experience of scratch cards to mobile applications.
Recognizing the potential to fill this void, our solution revolves around leveraging the capabilities of a custom canvas solution tailored for the React Native environment.
The challenge of not being able to use the traditional HTML <canvas> element, due to its incompatibility with native mobile platforms, leads us to an innovative alternative: React Native Skia.

Introducing React Native Skia

React Native Skia is a cutting-edge 2D graphics library that brings the power of the Skia Graphics Library to React Native applications.
As the driving force behind the visuals of Chrome and Android, Skia enables developers to create smooth, high-performance animations and graphics.
React Native Skia extends this capability to mobile app development, offering a rich API for crafting interactive and engaging user interfaces.
It stands as a pivotal tool for overcoming the challenges of implementing dynamic features like scratch cards in React Native Expo apps, providing a seamless,
cross-platform solution that enhances user experience through visually compelling interactions.

Key Components of Our Scratch Card Solution with React Native Skia

Our digital scratch card feature leverages React Native Skia's robust 2D graphics capabilities, adopting a structure reminiscent of SVG for intuitive, high-performance mobile interactions. Central to our approach are several pivotal elements:

Image Component: This component is crucial as it represents the scratchable surface. Users interact with this layer by "scratching" it away to unveil hidden elements underneath. The image thus serves not just as a background, but as an active layer that responds to touch interactions.
Masking with Rect and Path: To achieve the dynamic scratch-off effect, we employ a sophisticated masking technique involving two elements:
- Rect: Initially covers the user elements beneath, acting as the canvas for the scratchable image. It ensures that the content meant to be revealed remains hidden until interacted with.
- Path: Evolves in real-time based on user touch, effectively "erasing" parts of the Rect to reveal the content below. This component is key to simulating the scratch effect.

Understanding Masking

Masking is a graphic design technique used to control the visibility of graphical elements. It's similar to placing a stencil over a surface, where only exposed areas can be altered or interacted with. In the context of our scratch card:

The Rect component starts fully opaque, concealing the elements underneath.
The Path grows as the user scratches the screen, changing its shape based on the movement of the user's touch. This action gradually uncovers the elements beneath the image, creating an engaging and interactive experience.

This method allows for dynamic interaction, with the scratched path revealing underlying content in a manner that's both visually appealing and engaging for the user.

export const ScratchCard: React.FC<Props> = ({ style, children, image }) => {
  // State to hold the dimensions of the Canvas, initialized to 0.
  const [[width, height], setSize] = useState([0, 0]);
  // Ref to hold the dynamically changing path created by user interaction.
  const path = useRef(Skia.Path.Make());

  return (
    <View
      // Event handler to update the Canvas size based on its layout dimensions.
      onLayout={(e) => {
        setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
      }}
      style={[styles.container, style]}>
      {Boolean(image && width && height) && (
        <>
          <View style={styles.content}>{children}</View>
          <Canvas
            style={styles.canvas}
            // Start a new path when the user begins a touch gesture.
            onTouchStart={({ nativeEvent }) => {
              path.current.moveTo(nativeEvent.locationX, nativeEvent.locationY);
            }}
            // Extend the path as the user moves their finger.
            onTouchMove={({ nativeEvent }) => {
              path.current.lineTo(nativeEvent.locationX, nativeEvent.locationY);
            }}>
            {/* Mask to create the scratch effect by revealing parts of the image based on the path */}
            <Mask
              mode="luminance"
              // Define the mask with a Rect (the entire area) and the dynamic Path for scratched areas.
              mask={
                <Group>
                  {/* Rect covering the whole canvas; initially, everything is "covered". */}
                  <Rect x={0} y={0} width={1000} height={1000} color="white" />
                  {/* Path representing the scratched area. Black color subtracts from the mask, revealing the image. */}
                  <Path
                    path={path.current}
                    color="black"
                    style="stroke"
                    strokeJoin="round"
                    strokeCap="round"
                    strokeWidth={50}
                  />
                </Group>
              }>
              {/* The image that acts as scratching surface */}
              <Image
                image={image}
                fit="cover"
                x={0}
                y={0}
                width={width}
                height={height}
              />
            </Mask>
          </Canvas>
        </>
      )}
    </View>
  );
};

Try It Out Yourself

For those eager to dive into the code and see our scratch card solution in action,
we've made the complete implementation available on Expo Snack.
This platform allows you to easily run and experiment with the code in a web-based simulator or on your own device,
offering a hands-on experience with the solution we've developed.

View the full code on Expo Snack

By exploring the code, you can gain deeper insights into the implementation details and potentially adapt or extend the functionality to suit your specific app development needs.
We encourage you to experiment with the component, tweak the parameters, and see firsthand how the scratch card feature can be integrated into your React Native Expo projects.

Explore Our AI Innovations

As a software development studio specializing in AI applications, we harness cutting-edge technology to craft intelligent solutions that drive progress. Join us in shaping the future and redefine the boundaries of what's possible.

Discover Our AI Projects

Stay ahead with us. Explore, innovate, and transform with Skica Labs.

React-Phaser

Bogdan Sikora — Tue, 24 Jan 2023 08:36:13 +0000

https://github.com/4rokis/react-phaser-example

There are multiple reasons why you might want to combine React with Phaser. One of them being that you have a bigger React application and only a certain scene/part is a canvas.

💡 Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers.

React application then can either passively render a canvas or actively send new data to it.

React application re-renders multiple times and that is not desired for canvas base library. To mitigate that we are creating a component that will bridge those two environments.

export const ROOT_ID = 'root-id'

const Root = memo(() => {
  return <div id={ROOT_ID} />
})

class PhaserApp {
  constructor(id) {
    this.game = new Phaser.Game({
      type: Phaser.AUTO,
      width: 1000,
      height: 1000,
      parent: ROOT_ID,
    })
  }

  destroy = () => {
    this.game.destroy(true)
  }
}

export const PhaserBridge = () => {
  const app = useRef(null)

  useLayoutEffect(() => {
    app.current = new PhaserApp(ROOT_ID)

    return () => {
      app.current?.destroy()
    }
  }, [])

  return <Root />
}

useLayoutEffect will ensure that PhaserApp is initialized only once and is destroyed on unmount.

We can upgrade the bridge to include an update logic to emit an event to Phaser.

export class PhaserApp {
  ...
  update = (direction) => {
    this.game.events.emit('update', direction)
  }
  ...
}

export const PhaserBridge = ({ direction }) => {
  ...
  useEffect(() => {
    if (!app.current) {
      return
    }

    app.current.update(direction)
  }, [direction])
  ...
}

PhaserBridge now includes a useEffect hook that waits for the prop direction to change. Once changed it will trigger the update method with it. The update method then emits an update event to the whole phaser app.
A phaser scene can then listen to it and update.

this.game.events.on('update', (direction) => {
  this.direction = direction
})

React app just needs to render the bridge with particular properties.

function App() {
  const [direction, setDirection] = useState(null)
  return (
    <div className="App">
      <AppBridge direction={direction} />
    </div>
  );
}

This solution works well with PIXI.js or a custom canvas solution.

Kudos

Architecture, Code, and Configs come from Style Space

Connect with expert stylists, over 1-on-1 video styling sessions for clothing, hair, and makeup/skincare styling. Elevate your style, simplify getting ready and save time and money.

Crop and Upload Image Service

Bogdan Sikora — Tue, 17 Jan 2023 14:51:12 +0000

Image service

Simple tool to upload and edit pictures. The front-end is using in NextJs and Backend NodeJs.

NodeJs is used to be able to easily test and iterate on localhost. Production level solution will be released fully on NextJs with S3 as storage, later on*.*

https://github.com/4rokis/image-service-example

Upload new Image

Client

Once a user selects an image, he can modify the image(crop, zoom, rotate) via react-easy-crop library.

Once finished the original file and transformations data are passed to the ImageService.

Backend

Image service accepts an image and saves it to storage (Local files, S3, Firebase, …) and takes the image, and applies used modifications (crop, zoom, rotate). The modified image is then saved in multiple sizes/scales (160, 320, 640, 750, 828, …) for a user to fetch the desired size based on their screen size.

Fetch uploaded Image

ImageService returns the image path on success. Client then can use NextImage with a custom loader

import NextImage from 'next/image'

const parseFileName = (path) => {
  const pathParts = path.split('/')
  const filename = pathParts[pathParts.length - 1]
  return filename.split('.')
}

const myLoader = ({ src, width }) => {
  if (!src) {
    return ''
  }
  const [path, params, name, end] = parseFileName(src)
  return `${IMAGE_BASE_URL}/${name}-${width}.${end}`
}

export const Image = ({
  className,
  src,
  sizes,
}) => {
  return (
    <NextImage
      {...rest}
      loader={myLoader}
      src={src}
      sizes={sizes}
    />
  )
}

or native image with srcSet

import React, { HTMLAttributes } from 'react'

import { getSrcSet } from './utils'

export const Image = ({
  src,
  sizes,
}) => {
  return (
    <img
      src={src}
      sizes={sizes}
      srcSet={getSrcSet(src)}
    />
  )
}
Image.displayName = 'Image'

to fetch the image.

The page then can use sizes prop to define what is the actual image size.

<Image src={image} sizes={`600px`} />
<Image src={image} sizes={`50vw`} />
<Image src={image} sizes={`12rem`} />

In the network tab you can see that the correct image sizes were fetched (Github example)

Edit Uploaded Image

Editing an already uploaded image works similarly, but the image is not sent from the client as it is already in storage. The Image Crop component fetches the original image and based on file query parameters shows the correct state. The ImageService then based on the image name and new transformations updates images.

Kudos

Architecture, Code, and Configs come from Style Space

Connect with expert stylists, over 1-on-1 video styling sessions for clothing, hair, and makeup/skincare styling. Elevate your style, simplify getting ready and save time and money.

Turborepo example

Bogdan Sikora — Wed, 04 Jan 2023 15:07:56 +0000

Github project
https://github.com/S4n60w3n/monorepo-example

Project structure

apps
- web
- docs
- store
packages
- components (Shared codebase. Design system, shared react components, custom libraries, …)
- tsconfig (Typescript configuration)
- eslint-config-custom (Linter configuration)

NextJs apps are fully autonomous NextJS applications that runs next to each other as zones. Master app(web) handles the zone configuration and user doesn't know that the app/zone he interacts with has changed.

💡 A zone is a single deployment of a NextJS app. You can have multiple zones and merge them as a single app. [Advanced Features: Multi Zones | Next.js](https://nextjs.org/docs/advanced-features/multi-zones#how-to-merge-zones)

Zone configuration

The master app/zone hold the configuration. Officially user interacts with this app only and we use the power of rewrites to serve user with a different zone.

// /apps/web/next.config.js
const {
 DOCS_URL = 'http://localhost:3001',
 STORE_URL = 'http://localhost:3002',
} = process.env
module.exports = {
 transpilePackages: ['@shared/components'],
 async rewrites() {
 return [
 {
 source: '/:path*',
 destination: `/:path*`,
 },
 // Docs
 {
 source: '/docs',
 destination: `${DOCS_URL}/docs`,
 },
 {
 source: '/docs/:path*',
 destination: `${DOCS_URL}/docs/:path*`,
 },
 // Store
 {
 source: '/store',
 destination: `${STORE_URL}/store`,
 },
 {
 source: '/store/:path*',
 destination: `${STORE_URL}/store/:path*`,
 },
 ]
 },
}

Every time user goes to subsection of /docs route it will get served with the docs application and so on.
Each of the zones need to have a basePath set to that path.


// /apps/docs/next.config.js
module.exports = {
 basePath: '/docs',
}

NPM workspace configuration

💡 Workspaces is a generic term that refers to the set of features in the npm cli that provides support to managing multiple packages from your local files system from within a singular top-level, root package.
workspaces | npm Docs


// Root package.json
{
 "name": "my-monorepo",
 "version": "1.0.0",
 "description": "",
 "devDependencies": {
 },
 "dependencies": {
 },
 "workspaces": [
 "apps/*",
 "packages/*"
 ]
}

This simple configuration will add everything in apps and packages folder to the workspace. NPM will then do its magic and link the subproject and shared dependencies.

💡 If your shared codebase project name in the package.json is "my-shared-project". NPM will create a folder in the root node_modules with that name "/node_modules/my-shared-project". The apps can then access that codebase.

Sub apps that want to use that shared codebase now only need to add it to package.json


// /apps/docs/package.json
{
 "name": "docs",
 "dependencies": {
 "@shared/components": "*",
 },
}

and to the NextJS config.


// /apps/docs/next.config.js
module.exports = {
 basePath: '/docs',
 transpilePackages: ['@shared/components'],
}

This simple configuration will allow you to have multi-zone NextJS monorepo.

Turborepo

Turborepo is a build system for JS codebases. It allows for easier control of the packages as well as running custom scripts.
Turborepo
The configuration is quite straightforward.

// root turbo.json
{
 "$schema": "https://turbo.build/schema.json",
 "pipeline": {
 "build": {
 "dependsOn": ["^build"],
 "outputs": ["dist/**", ".next/**"]
 },
 "tsc": {
 "outputs": []
 },
 "test": {
 "outputs": []
 },
 "lint": {
 "outputs": []
 },
 "dev": {
 "cache": false
 },
 "start": {
 "cache": false
 }
 }
 }

You can specify commands that will run in each of the sub-projects and cache the results for faster second run if nothing has changed.

Shared configuration

Typescript

3 different configs. One is a shared base between environments and 2 for each environment.

Base config

Shared base config

// packages/tsconfig/base.json
{
 "$schema": "https://json.schemastore.org/tsconfig",
 "display": "Default",
 "compilerOptions": {
 "resolveJsonModule": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "module": "CommonJS",
 "lib": [
 "es2017",
 "dom"
 ],
 "target": "es5",
 "moduleResolution": "node",
 "skipLibCheck": true,
 "isolatedModules": true,
 "strict": true,
 "incremental": true
 },
 "include": [
 "**/*.ts",
 "**/*.tsx"
 ],
 "exclude": [
 "./node_modules/*"
 ]
}

NextJS

Configuration for NextJs environment


 // packages/tsconfig/nextjs.json
 {
 "$schema": "https://json.schemastore.org/tsconfig",
 "display": "Next.js",
 "extends": "@shared/tsconfig/base.json",
 "compilerOptions": {
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,
 "sourceMap": true,
 "keyofStringsOnly": true,
 "noEmit": true,
 "target": "es6",
 "jsx": "preserve",
 "allowJs": true,
 "forceConsistentCasingInFileNames": true,
 "strictNullChecks": true,
 "noImplicitAny": true
 },
 "include": [
 "next-env.d.ts"
 "**/*.ts",
 "**/*.tsx"
 ],
 }

React

Configuration for shared react library (Design System) and unit tests


 // packages/tsconfig/react.json
 {
 "$schema": "https://json.schemastore.org/tsconfig",
 "display": "React",
 "extends": "@shared/tsconfig/base.json",
 "compilerOptions": {
 "declaration": true,
 "composite": true,
 "downlevelIteration": true,
 "outDir": "./dist",
 "jsx": "react",
 "baseUrl": "./src"
 }
 }

Projects then need to add "@shared/tsconfig": "*", into dev-dependencies and extend the config

// /apps/docs/tsconfig.json
// include & exclude need to be redefined to point to this directory
{
 "extends": "@shared/tsconfig/nextjs.json",
 "include": [
 "**/*.ts",
 "**/*.tsx",
 "next-endv.d.ts"
 ],
 "exclude": [
 "node_modules"
 ]
}

Linter

It is required that the name of the package starts with eslint-config-
We are using prettier and eslint mix.

// /packages/eslint-config-custom/package.json
{
 "name": "eslint-config-custom",
 "version": "0.0.0",
 "main": "index.js",
 "license": "MIT",
 "dependencies": {
 "eslint": "7.14.0",
 "@next/eslint-plugin-next": "12.1.0",
 "eslint-config-prettier": "6.15.0",
 "eslint-plugin-import": "2.22.1",
 "eslint-plugin-prettier": "3.1.4",
 "eslint-plugin-react": "7.21.5",
 "prettier": "2.2.1",
 "@typescript-eslint/eslint-plugin": "5.27.1",
 "@typescript-eslint/parser": "5.27.1"
 },
 "files": [
 "prettier.json",
 "eslint"
 ],
 "publishConfig": {
 "access": "public"
 }
}

// /packages/eslint-config-custom/index.js
module.exports = {
 parser: "@typescript-eslint/parser",
 plugins: ["import", "@typescript-eslint"],
 ignorePatterns: [
 "node_modules/**",
 "storybook-static/**",
 ".next/**",
 "out/**",
 "dist/**",
 ],
 extends: ["plugin:prettier/recommended", "plugin:@next/next/recommended"],
 parserOptions: {
 ecmaVersion: 2018,
 sourceType: "module",
 }
};

// /packages/eslint-config-custom/prettier.js
module.exports = {
 printWidth: 80,
 singleQuote: true,
 trailingComma: "all",
 parser: "typescript",
};

// /.eslintrc.js
module.exports = {
 root: true,
 extends: ["custom"],
 settings: {
 next: {
 rootDir: ["apps/*/"],
 },
 },
};

Apps then need to add "eslint-config-custom": "*", into dev-dependencies and extend the config

// /apps/docs/.eslintrc.js
module.exports = {
 root: true,
 extends: ['custom'],
}

// /apps/docs/.prettierrc.js
module.exports = {
 …require("eslint-config-custom/prettier.js"),
};

Kudos

Architecture, Code and Configs come from Style Space

Connect with expert stylists, over 1-on-1 video styling sessions for clothing, hair and makeup/skincare styling. Elevate your style, simplify getting ready and save time and money.

Forem: Bogdan Sikora

Interactive Mobile Experiences: Implementing Scratch Cards in React Native

Introducing React Native Skia

Key Components of Our Scratch Card Solution with React Native Skia

Understanding Masking

Try It Out Yourself

Explore Our AI Innovations

React-Phaser

Kudos

Links

Crop and Upload Image Service

Image service

Upload new Image

Client

Backend

Fetch uploaded Image

Edit Uploaded Image

Kudos

Links

Turborepo example

Project structure

Zone configuration

NPM workspace configuration

Turborepo

Shared configuration

Typescript

Base config

NextJS

React

Linter

Kudos

Links

Forem: Bogdan Sikora

Interactive Mobile Experiences: Implementing Scratch Cards in React Native

Introducing React Native Skia

Key Components of Our Scratch Card Solution with React Native Skia

Understanding Masking

Try It Out Yourself

Explore Our AI Innovations

React-Phaser

*Kudos*

*Links*

Crop and Upload Image Service

Image service

Upload new Image

Client

Backend

Fetch uploaded Image

Edit Uploaded Image

Kudos

Links

Turborepo example

Project structure

Zone configuration

NPM workspace configuration

Turborepo

Shared configuration

Typescript

Base config

NextJS

React

Linter

Kudos

Links

Kudos

Links