Expo typescript and React Native UI Kitten, quick start

Quick start
  1. npx create-expo-app -t expo-template-blank-typescript (xpcats)
  2. npx expo start (xps)
  3. npm i @ui-kitten/components @eva-design/eva
  4. npx expo install react-native-svg ( to install svg package)
  5. ctl c(shut down the current bundler process )
  6. npm start -- --reset-cache
  7.  configure ApplicationProvider {...eva} theme={eva.light} in  App.tsx (read doc)
  8.  npm i @ui-kitten/eva-icons(for eva icons)
     import { EvaIconsPack } from "@ui-kitten/eva-icons";(in app.ts or .js)
     <IconRegistry icons={EvaIconsPack} />(in app.ts or .js render)
React Navigation
  1. npm install @react-navigation/native
  2. npx expo install react-native-screens react-native-safe-area-context(Expo dependencies) 
  3. npm install @react-navigation/native-stack(stack navigator) 
  4. npm install @react-navigation/bottom-tabs(bottom-tabs navigator) 
  5. npm install @react-navigation/drawer(drawer navigator) 
    npx expo install react-native-gesture-handler react-native-reanimated(for expo) 
  6. npm install @react-navigation/material-top-tabs react-native-tab-view(material-top-tabs navigator) 
    npx expo install react-native-pager-view(for expo) 
Expo Install
  1. npx expo install react-native-safe-area-context 
    npx expo install react-native-reanimated 
    npx expo install react-native-screens 
    npx expo install react-native-gesture-handler 
    npx expo install react-native-pager-view 
    npx expo install install react-native-svg 
    npx expo install expo-constants
    npx expo install expo-contacts
    npx expo install expo-linking
    npx expo install expo-secure-store
    npx expo install expo-splash-screen
    npx expo install expo-notifications
    npx expo install react-native-reanimated (follow Install react-native-reanimated package from npm ) 
Install react-native-reanimated package from npm:
  1. npx expo install react-native-reanimated
  2. Add react-native-reanimated/plugin plugin to your babel.config.js 
                            module.exports = {
                              presets: [
                                ... // don't add it here :)
                              ],
                              plugins: [
                                ...
                                'react-native-reanimated/plugin',
                              ],
                            };
                          
  3. react-native-reanimated/plugin has to be listed last.
  4. npx expo start -c (restart expo with cache clean)
Frequences error
  1. [InvalidTokenError: Invalid token specified: invalid base64 for part #2 (Property 'atob' doesn't exist)]
    npm install core-js
    import "core-js/stable/atob"; 
EAS Build

Prepare distribution
  1. incluses only neccessary assets  
  2. optimize assets
    npm i -g sharp-cli 
    npx expo-optimize
  3. npx eas-cli@latest (alternative)
Create buikd for ios/android
  1. npm install -g eas-cli
    npx eas-cli@latest (alternative)
  2. eas login (for login if not) 
    eas whoami( check if already logged)
  3. eas build:configure (Configure the project eas.json file)
  4. Run a build
    eas build -p android --profile preview  for Build APKs for Android Emulators and devices 
    eas build -p ios --profile preview  for Build for iOS Simulators 
    eas build --platform android Build for app stores 
    eas build --platform ios Build for app stores
    eas build --platform all Build for app stores for both)
  5. Deploy the build for apple store (ios)
    Ddownload the application ipa file from your expo.dev/accounts ..
    Connect to appstoreconnect.apple.com and follow instructions
  6. ex
How to upgrade to the latest SDK version

  1. npm install expo@latest
    npm install expo@49( specific SDK versionn
  2. npx expo install --fix  ( Upgrade dependencies)