---
# System prepended metadata

title: "\U0001F476 First Steps"

---

# 👶 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`

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

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

```typescript=
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`

```typescript=9

import FirstModule from "./FirstModule";

export {
  FirstModule,
  // ...
};
```

🚀 run command in the root directory:
```shell
yarn build
```
:::
 
<br />

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


---



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