kadikraman

Expo UI Skill

Overview

@expo/ui brings native SwiftUI (iOS/tvOS/macOS) and Jetpack Compose (Android) components to React Native via Expo. It is NOT a JS UI library — it exposes real native platform primitives directly to JavaScript.

• Package: @expo/ui
• Install: npx expo install @expo/ui
• Requires: Development build (not Expo Go)
• Available since: SDK 54 (SwiftUI focus), SDK 55 (expanded Jetpack Compose)

kadikraman

Logo Suite Component

• Designs
• Example 1: static
• Example 2: scrolling

Requirements

Part 1: implement the static list of logos (show 5 logos on the page). The logos should be at the center of the page with grey background as in the designs.

kadikraman

How to add Animated Bottom Tab Icons for iOS

Install expo-symbols.

Choose which symbols you want to use from SF Symbols.

Create a TabBarIcon.tsx:

import { SymbolView } from "expo-symbols";

kadikraman

Fine-tuning for the Native Feel

AppJS 2025 workshop, by @kadikraman and @bycedric

We're excited you chose to join us on this journey on fine tuning for the native feel with Expo. In this workshop we will focus on creating experiences for a great "Platform Feel" for iOS, Android and Web!

Requirements

For this workshop, we will not be using Expo Go. But you don't need to have any native build tools installed either - we'll provide the dev client for you to install on your own phone, and we'll be enhancing this app together.

kadikraman

EAS Build Cheat Sheet

The most commonly used commands for building apps with the EAS CLI

New Project

• eas init - create a new project on expo.dev
• eas build:configure - create eas.json with default configuration

Builds

• eas build --profile development - development client, JS is loaded from your local machine

kadikraman

import {
  Canvas,
  Skia,
  Image as SkiaImage,
} from '@shopify/react-native-skia';
import { useEffect, useState } from 'react';


const data = `<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

kadikraman

module.exports = {
  // other rules
  rules: {
    'no-restricted-syntax': [
      'error',
      {
        selector:
          "JSXElement > JSXExpressionContainer > LogicalExpression[operator!='??']",
        message: 'Use ternary operator instead',
      },

kadikraman

Add new ssh key for GH

https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

ssh-keygen -t ed25519 -C "your_email@example.com"

Copy it to your clipboard

kadikraman

# 123 is the PR number
git fetch origin pull/123/head:pr/123 && git checkout pr/123

kadikraman

git reset --hard upstream/master