Kadi Kraman kadikraman

How to add Animated Bottom Tab Icons for iOS

Choose which symbols you want to use from SF Symbols.

Create a TabBarIcon.tsx:

import { SymbolView } from "expo-symbols";

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.

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

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 "[email protected]"

Copy it to your clipboard

	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) -->

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

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