# 👶 First Steps

### Navigation

- [🏡 Native modules made easy with Expo](/gYH9xz-oR2ai0Yih8if50w)
- [👉 👶 First Steps](/ANE6NSUlTSimTIrN-gMsBw)
- [⚙️ Native Module](/mAIt0ctDTvSL5xV4uE9nWQ)
- [📈 Passing data to view](/_gWWp8uoQwGkqKcEyfk8Tg)
- [📚 View Props](/96IjlLNDRvydILdkbfaA5A)
- [🔥 View Events](/PQWXYmxLRCebmLfx3Fh_gg)
- [🏞️ View Functions](/DcjStCFdT6euzWqnJqCL6w)
- [👷‍♂️ Classes and Shared Objects](/__42gVw8RqiIgfSbVseIvw)
- [📊 Views and shared object](/IgHyIAHQQPCbeBD74Ri4BA)

---

### Task 1

Export a simple module called `FirstModule` that contains two functions:
- `functionAsync` - async function that returns a string
- `function` - sync function that returns a string

::: spoiler code spoiler

:open_file_folder: File `android/src/main/java/expo/modules/workshopscharts/FirstModule.kt`

package expo.modules.workshopscharts

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class FirstModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("FirstModule")

    AsyncFunction("functionAsync") {
      return@AsyncFunction "Expo Native Api"
    }

    Function("function") {
      return@Function "Expo Native API"
    }
  }
}

:open_file_folder: `ios/FirstModule.swift`

import ExpoModulesCore

public class FirstModule : Module {
  public func definition() -> ModuleDefinition {
    Name("FirstModule")
    
    AsyncFunction("functionAsync") {
      return "Expo Native Api"
    }
    
    Function("function") {
      return "Expo Native API"
    }
  }
}

:open_file_folder: File `expo-module.config.json`

{
  "platforms": ["ios", "android"],
  "ios": {
    "modules": [
      "FirstModule", 
      "ChartsModule",
      "LinearChartModule"
    ]
  },
  "android": {
    "modules": [
      "expo.modules.workshopscharts.FirstModule",
      "expo.modules.workshopscharts.ChartsModule", 
      "expo.modules.workshopscharts.LinearChartModule"
    ]    
  }
}

:::

<br />

📝 Full changelog: [open GitHub Commit](https://github.com/software-mansion-labs/appjs-2023-workshop-expo-modules/commit/3d3aefac43be634b6a28fd571976e327a2502252)

---

### Task 2

Add types to the exported module.

:::spoiler code spoiler

:open_file_folder: File `src/FirstModule.ts`

import { requireNativeModule } from "expo-modules-core";

type FirstModuleType = {
  readonly functionAsync: () => Promise<string>;
  readonly function: () => string;
};

const module = requireNativeModule<FirstModuleType>("FirstModule");

export default module;

:open_file_folder: File `src/index.ts`

import FirstModule from "./FirstModule";

export {
  FirstModule,
  // ...
};

🚀 run command in the root directory:

yarn build

:::

<br />

📝 Full changelog: [open GitHub Commit](https://github.com/software-mansion-labs/appjs-2023-workshop-expo-modules/commit/eb9cfe4a0492b1d7ac89e92dcf59332f4e5365ff)

---

### [⚙️ Native Module](/mAIt0ctDTvSL5xV4uE9nWQ)