---
title: Code walkthrough
---

import { View, Text } from "react-native";
import { CodeWalkthrough } from "slides:presenting/CodeWalkthrough";

export const code = `async function showResults(query) {
  const rows = await search(query);
  const visible = rows.slice(0, 20);
  setResults(visible);
  announce(visible.length);
}`;
export const highlights = [2, 3, 4];
export const notes = ["Fetch matching rows", "Keep the visible rows", "Publish the results"];

# Code walkthrough

<View style={{ width: 1696, height: 650 }}>
<Steps count={3}>{step => <CodeWalkthrough source={code} lines={[highlights[step], highlights[step]]} fontSize={34} explanation={<Text style={{ color: "white", fontSize: 52 }}>{notes[step]}</Text>} />}</Steps>
</View>