---
# System prepended metadata

title: "\U0001F525 View Events"

---

# 🔥 View Events

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

Clicking on a data point should trigger an event called `onDataSelect`. The event data should include the selected point's `x` and `y` values.

:::spoiler :robot_face: Android 

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

```kotlin
Events("onDataSelect")
```

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

```kotlin
private val onDataSelect by EventDispatcher<Map<String, Float>>()

// ...

init {
  // ...
  
  chartView.setOnChartValueSelectedListener { entry, _ ->
    onDataSelect(mapOf(
      "x" to entry.x,
      "y" to entry.y
    ))
  }
  
  // ...
}
```

:::
 
:::spoiler :apple: iOS

:open_file_folder: File `ios/LinearChartModule.swift`

```swift
Events("onDataSelect")
```

:open_file_folder: File `ios/LinearChartView.swift`

```swift
class LinearChartView: ExpoView, ChartViewDelegate {

  var onDataSelect = EventDispatcher()


  // ...

  public required init(appContext: AppContext? = nil) {
    // ...

    chartView.delegate = self
  }

  // ...
  
  func chartValueSelected(
    _ chartView: ChartViewBase, 
    entry: ChartDataEntry, 
    highlight: Highlight
  ) {
    onDataSelect([
      "x": entry.x,
      "y": entry.y
    ])
  }
  
  // ...
}
```

:::

<br />

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

---


### Task 2

Zooming on a chart should trigger an event called `onScale`. The event data should include the `scaleX` and `scaleY` values.

:::spoiler :robot_face: Android 

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

```kotlin
Events("onDataSelect", "onScale")
```

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

```kotlin
private val onScale by EventDispatcher<Map<String, Float>>()

// ...

init {
  // ...

  chartView.setOnChartScale { _, scaleX, scaleY ->
    onScale(mapOf(
      "scaleX" to scaleX,
      "scaleY" to scaleY
    ))
  }

  // ...
}

```

:::
 
:::spoiler :apple: iOS

:open_file_folder: File `ios/LinearChartModule.swift`

```swift
Events("onDataSelect", "onScale")
```

:open_file_folder: File `ios/LinearChartView.swift`

```swift
var onScale = EventDispatcher()

// ...

func chartScaled(_ chartView: ChartViewBase, scaleX: CGFloat, scaleY: CGFloat) {
  onScale([
    "scaleX": scaleX,
    "scaleY": scaleY
  ])
}
```

:::


<br />

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

---

### [🏞️ View Functions](/DcjStCFdT6euzWqnJqCL6w)