Forem: B42

PostHog Workflows Tutorial: i18n, Push Notifications & Webhooks

Alexander Hodes — Thu, 05 Feb 2026 05:40:28 +0000

At the beginning of the year, PostHog released Workflows from beta. At B42, we had been using PostHog for analytics for over a year, but our customer journeys ran in a separate tool. Now after migrating to PostHog Workflow we have everything in one tool. After the Workflows release, we migrated everything in 2 days. Here's what we learned.

The cool thing is that workflows can be built independently of your code. Only the events need to be triggered. This makes it easy for non-developers to build workflows and customer journeys.

Getting started

Sending emails

Email sending is very easy to configure and set up. Four DNS entries need to be made, which are displayed directly in the setup window. Once the entries are verified, the email address is marked as verified and can be used for email sending.

Building Email Templates

Templates are very helpful for sending emails. When creating templates, various components such as text, buttons, HTML elements, or images can be used.

With templates, the email structure can be built once, so that when integrating an email step, only the text needs to be changed.

In the template itself, global settings such as colors, font, or alignment can also be configured.

Building workflows

Building workflows is very intuitive. First, a trigger for the workflow is selected. This can be a specific event, a manual trigger, a webhook, tracking pixel, or schedule.

Further steps and actions can be added, like emails, webhooks or third party integrations like Slack.

There's always an exit. You can also define earlier exists if certain conditions match.

Small hacks

During the implementation of workflows, we encountered some smaller challenges, such as messaging in different languages or sending push notifications.

i18n

Currently, it's not yet directly possible to translate texts. However, Conditional Branches can be used to check variables and customize the further course of the flow depending on conditions.

We check the user's language with Conditional Branches, which we store in the person. This allows us to split the flow based on language and ensure that the user receives emails or push notifications in the correct language.

As a prerequisite, you need to sync the language code of the user with PostHog. The default value can be used for a fallback language like English.

Sending Push Notifications

Sending push notifications is currently not yet possible. As a workaround, webhooks can be used. You can integrate an endpoint in your application that receives a POST request with a specific body.

{
   "title": "Hello Max",
   "message": "Welcome to our application",
   "deeplink": "http://localhost:3000/welcome"
}

If Firebase Cloud Messaging is already integrated in your backend and the users' message tokens are stored, you can directly send the push notification to the user.

import { Response, Request } from 'express';

const secret = 'random-secret-string';

export async function POST(req: Request, res: Response) {
  // Validate secret that not everybody can send push notifications
  if (req.headers['x-webhook-secret'] !== secret) {
    return res.status(401).json({
      error: 'Invalid webhook secret',
    });
  }

  const userId = req.body.userId;
  const message = req.body.message;
  const title = req.body.title;
  const deeplink = req.body.deeplink;

  if (!userId || !message || !title) {
    return res.status(400).json({
      error: 'Missing userId, message, or title',
    });
  }

  // send push notification
  await sendPushNotification({ userId, title, message, deeplink });

  return res.status(200).json({ success: true });
}

Variables for Content Personalization

Variables from the event or user can also be used in the JSON body to personalize the content.

Using Custom Header Fields

To prevent your webhook from being misused, you can also send custom header fields, such as x-webhook-secret=random-value. If the value doesn't match the defined secret, you can return a 401 Unauthorized error.

Outlook

It probably won't be long before push notifications are directly supported in PostHog, making the workaround obsolete. This is already mentioned in the roadmap and documentation.

However, the webhook can continue to be used to execute internal processing or processes.

Using variables in emails or webhooks

Like push notifications, emails can be personalized with template syntax.

Typical use cases include the email address, which can be retrieved with {{ person.properties.email }}. This accesses the person property email.

The same can be done for other variables like the name {{person.properties.firstname}}. If-conditions can also be used or workflow variables can be accessed {{ variables.NAME }}.

Automations

In addition to messaging workflows, automation workflows exist. These can be used to set user properties once an event has been executed. A typical use case is when the user has completed onboarding.

Using delays

Another exciting feature is delays, which allow waiting for a defined period after an event. For example, after an event like user_created, a welcome email can be sent to the user after five minutes.

Webhook Logs

For webhooks, it's recommended to activate logs. This logs the requests as well as the status codes of the responses. This makes debugging and error analysis much easier.

Common issues & solutions

There are some common issues which we experienced during implementation.

Issue: Workflow not triggering
Solution: Check event name matches exactly (case-sensitive)

Issue: Variables not rendering
Solution: Ensure property exists before workflow trigger

Issue: Email not sending
Solution: Check if the sender is selected correctly

Issue: Webhook request without body
Solution: Check if Content-Type header is set correctly, e.g. application/json

What's next?

We've built 15+ workflows at B42 since migrating from welcome sequences to multi-language onboarding. What challenges are you facing with customer journey automation? Drop a comment or connect with me on LinkedIn!

Further resources

Test your React Native app with Maestro

Alexander Hodes — Thu, 22 Dec 2022 13:08:18 +0000

Testing is always something that's important in app development, but often it's still done manually by testers or developers. Sometimes it can occur that one of the main workflows, e.g. the onboarding or sign up, fails in production because it hasn't been tested before. A couple of weeks ago, we've found Maestro which can be used for automating UI tests in a simple and effective way.

We want to show you in this article how you can integrate Maestro with a React Native app. For achieving this we will built a small application showing a sign in form and explain some core features of Maestro.

Developing the example app

Initializing the app

This first step is to create a React Native app. Here, you can select between the Expo and React Native CLI approach. We will create this tutorial for both approaches, because there are some special notes about creating flows with Maestro for Expo apps. The React Native CLI code can be found here. The Expo app code can be found here.



# Create React Native app with React Native CLI
$ npx react-native init ReactNativeMaestroExample --template react-native-template-typescript
# Create React Native app with Expo
$ npx create-expo-app -t expo-template-blank-typescript react-native-maestro-example

Changing the app identifier

One requirement for running the flows that we will create is that the app package name/ bundle identifier is com.example.app. Here you can find an instruction for changing it in a React Native CLI app. In Expo apps, you need to set ios.bundleIdentifier and android.package properties in the app.json file. Further docs for iOS and Android can be found in the Expo docs.



{
  /** further config **/
  "ios": {
    "bundleIdentifier": "com.example.app"
  },
  "android": {
    "package": "com.example.app"
  }
}

Implementing components

Our example app with contain a single screen showing a sign in form with two inputs and a sign in button. If the username and password entered are valid (longer than 8 characters) a success message will be displayed below the sign in button. For implementing this, we use basic React Native components and style them using the StyleSheet. Below your can find the code of this sign in form.



export default function App() {
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [valid, setValid] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.inputGroup}>
        <Text style={styles.label}>Username</Text>
        <TextInput
          style={styles.input}
          placeholder="Username"
          onChange={(e) => setUsername(e.nativeEvent.text)}
          testID="usernameInput"
        />
      </View>
      <View style={styles.inputGroup}>
        <Text style={styles.label}>Password</Text>
        <TextInput
          style={styles.input}
          placeholder="Password"
          secureTextEntry
          onChange={(e) => setPassword(e.nativeEvent.text)}
          testID="passwordInput"
        />
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          if (username.length > 0 && password.length > 0) {
            setValid(true);
          } else {
            setValid(false);
          }
        }}
        testID="signInButton"
      >
        <Text style={styles.buttonText}>Sign in</Text>
      </TouchableOpacity>
      {valid ? <Text style={styles.successText}>Sign in successfully</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#fff",
    justifyContent: "center",
  },
  inputGroup: {
    marginBottom: 16,
  },
  label: {
    fontSize: 12,
    fontWeight: "bold",
    marginBottom: 6,
  },
  input: {
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "gray",
    padding: 12,
    width: "100%",
    fontSize: 18,
  },
  button: {
    borderRadius: 8,
    padding: 12,
    backgroundColor: "black",
    alignItems: "center",
    marginBottom: 8,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: "bold",
    color: "white",
  },
  successText: {
    fontSize: 16,
    color: "green",
    alignSelf: 'center',
  },
});

Installing maestro

Maestro will be installed using the terminal, because it will be used with the CLI. Installation for Mac OS and Linux requires just to commands. A detailed instruction about installing and upgrading Maestro can be found in the Maestro docs.



# install and upgrade maestro
$ curl -Ls "https://get.maestro.mobile.dev" | bash

Running flows on iOS Simulator requires installation of Facebook IDB.



$ brew tap facebook/fb
$ brew install facebook/fb/idb-companion

The installation of Maestro on Windows is a bit more complex. The detailed instruction can be found in the Maestro docs.

You can check if maestro is installed by checking the version. It should print the version number, e.g. 1.17.



$ maestro -v

Creating test flows

Our workflow should look like this:

Start the app
Enter username
Enter password
Press sign in button
Check if success message is visible

Maestro studio

Maestro studio can be used for inspecting the hierarchy of your app. When opening Maestro studio a new window in your browser will be opened showing a screenshot of your app and the clickable elements.



$ maestro studio

Example workflow "sign in"

The first step in our workflow is to start the app. For this we can use start launchApp command. Here you can add further options like clearing the state, clearing the keychain or stop the app before launching. We don't need them in our example.



appId: com.example.app
---
- launchApp:
    appId: com.example.app

The next step is to tap on the text field for entering the username. Maestro studio shows that we can achieve this by using one of the following commands.

The easiest one looks like this:



# tap on username
- tapOn:
    text: "Username"
    index: 1

The next step is to enter a user name. For Text Input, maestro provides different possibilities. One would be to enter a static text. This text could be as well defined as constant or passed as parameter. In addition, Maestro provides some random text that can be entered, e.g. email, person name, number or text.



# enter text
- inputText: "Hello World"
# enter random email
- inputRandomEmail       
# enter random person name
- inputRandomPersonName  
# enter random integer
- inputRandomNumber   
# enter random text
- inputRandomText

After entering the text the keyboard needs to be closed that no component is displayed below the keyboard. This can be achieved using hideKeyboard. This is the part for entering the username by focusing the text field, entering a random person name and hiding the keyboard. Nearly the same thing needs to be done for the password as well. Here, we just need to replace Username text with Password.



# tap on username
- tapOn:
    text: "Username"
    index: 1
# enter username
- inputRandomPersonName
# hide keyboard
- hideKeyboard

After entering username and password, clicking the sign in button is the next step. This can be done as well using the tapOn. Here we pass the text of the button.



# tap on sign in
- tapOn: "Sign in"
# alternative: tap on sign in (does the same)
- tapOn:
    text: "Sign in"

The final step is to check if sign up was successful by checking if the success message is displayed. This can be done using Assertions. Assertions help to check if an element is visible or not. The result can be used as well for running conditional flows.

The success message in our example app can be checked with this:



- assertVisible: "Sign in successfully"

The complete workflow is shown below.



appId: com.example.app
---
- launchApp:
    appId: com.example.app
# tap on username
- tapOn:
    text: "Username"
    index: 1
# enter username
- inputRandomPersonName
# hide keyboard
- hideKeyboard
# tap on password
- tapOn:
    text: "Password"
    index: 1
# enter password
- inputRandomText
# hide keyboard
- hideKeyboard
# tap on sign in
- tapOn: "Sign in"
- assertVisible: "Sign in successfully"

Further actions that can be executed during the flow can be found in the Maestro documentation.

Running workflows

Run workflow local

After finishing the development of the workflow we can run it locally using maestro test. Here you can specify if you want to run a single workflow or all workflows in a specific directory.



# run single flow
$ maestro test .maestro/sign-in-flow.yaml
# run all flows in a directory
$ maestro test .maestro

Run workflow in the cloud

After signing up for maestro cloud, you can run your tests as well in the cloud. This cloud execution will be useful if you want to run your workflows in your CI/ CD pipeline.



$ maestro cloud --apiKey <apiKey> <appFile> .maestro/

Tips and tricks

Using testID property

Writing test flows is really easy and straight forward. One problem comes up if you want to test your application in different languages. Normally, you would need to create a test flow for each languages which increases maintainability and development time with every new language.

For this problem you can use the testID property which is provided for buttons, texts, views, images and other components. This property is mapped to the id property in Maestro. After integrating the testID you an access an element, like this:



# using testID property
- tapOn:
    id: "signInButton"
# using text
- tapOn:
    text: "Username"
    index: 1

This makes it less dependent on the text or translations shown in your app. In some libraries using the testID property is not working, but you will find this out while inspecting the hierarchy of your app.



<TextInput
  style={styles.input}
  placeholder="Password"
  secureTextEntry
  onChange={(e) => setPassword(e.nativeEvent.text)}
  testID="passwordInput"
/>

Furthermore using the testID makes it more easy to find the component in your app.

Developing flows with Expo

Developing maestro test flows with Expo is a bit different compared to development for React Native apps created with the React Native CLI. The difference is that your app built with Expo is started within the Expo Go App. This means that you're not able to start your test workflow by identifying your app with the bundle identifier. If you would do so, the workflow would fail. Instead you can open your app with openLink from Maestro. Here you just need to enter the url which is exposed while starting your expo app locally. As well you can just use your localhost for doing this, e.g. exp://127.0.0.1:19000. You need to keep in mind that the localhost would not work if you connect your smartphone via USB to your computer or laptop.



# common way to start your app
- launchApp:
    appId: com.example.app
# needed to open app in expo
- openLink: exp://127.0.0.1:19000

Some examples for creating a workflow using expo can be found in our example repository

Recording flows

Another feature provided by Maestro is recording flows. Here you will get a screen recording of your device where the flow is executed. Next to it a terminal window with the executed steps is shown. When the record is finished, you will see a link in your terminal window that can be used for downloading the video as mp4 file.



# start video recording
$ maestro record flow-file.yaml

Below you can find an example recording.

Variables and parameters

Instead of using random text like in the example at the top, you can use parameters and constants for passing data to your flow. One way is to push data with external parameters into your flow. These parameters will be defined when starting your workflow in the terminal. Below you can find the sign-in workflow updated with external parameters for USERNAME and PASSWORD.



appId: com.example.app
---
- launchApp:
    appId: com.example.app
# tap on username
- tapOn:
    id: "usernameInput"
# enter username
- inputText: ${USERNAME}
# hide keyboard
- hideKeyboard
# tap on password
- tapOn:
    id: "passwordInput"
# enter password
- inputText: ${PASSWORD}
# hide keyboard
- hideKeyboard
# tap on sign in
- tapOn:
    id: "signInButton"
- assertVisible: "Sign in successfully"

You can run this workflow like this



$ maestro test -e USERNAME="Test User" -e PASSWORD=Test123456 .maestro/sign-in-flow-external-parameters.yaml

Instead of passing the data as external parameters, you can define them as well as constants in your flow. The only changed we need to do is to define the constants at the top of the workflow file below the appId. The syntax for accessing the variables stays the same.



appId: com.example.app
env:
    USERNAME: "Test User"
    PASSWORD: Test123456
---
- launchApp:
    appId: com.example.app
# tap on username
- tapOn:
    id: "usernameInput"
# enter username
- inputText: ${USERNAME}
# hide keyboard
- hideKeyboard
# tap on password
- tapOn:
    id: "passwordInput"
# enter password
- inputText: ${PASSWORD}
# hide keyboard
- hideKeyboard
# tap on sign in
- tapOn:
    id: "signInButton"
- assertVisible: "Sign in successfully"

This workflow can be started like any other flow without any external parameters.



$ maestro test .maestro/sign-in-flow-constants.yaml

One example for using the external parameters will be passing the app id if you have different app ids for different environments, e.g. development, alpha and production. With replacing the app id as external parameter you can reuse your flows for different app versions.

Nested flows

Nested flows can help to move recurring flows, e.g. sign-in or entering text, into separate flow files for reducing the complexibility of flows and increasing the maintainability.

Creating nested flows works the same way like normal flows. We will create a nested flow for entering the text in the sign in flow. This flow consists of three steps: focusing text input, entering text and hiding keyboard.



# tap on username
- tapOn:
    id: "usernameInput"
# enter username
- inputRandomPersonName
# hide keyboard
- hideKeyboard

Moving this into a subflow looks like this. We will use external parameters for passing the text input id and the text.



appId: com.example.app

---
# tap on text input
- tapOn:
    id: ${TEXT_INPUT_ID}
# enter text
- inputText: ${TEXT}
# hide keyboard
- hideKeyboard

When integrating this subflow into the main flow, we can use the runFlow command with passing external parameters as env. The subflow will be defined as file.



# enter username
- runFlow:
    file: subflow-enter-text.yaml
    env:
      TEXT_INPUT_ID: usernameInput
      TEXT: "Test User"

The complete sign in flow will look like this after integrating the subflows.



appId: com.example.app
---
- launchApp:
    appId: com.example.app
# enter username
- runFlow:
    file: subflows/subflow-enter-text.yaml
    env:
      TEXT_INPUT_ID: usernameInput
      TEXT: "Test User"
# enter password
- runFlow:
    file: subflows/subflow-enter-text.yaml
    env:
      TEXT_INPUT_ID: passwordInput
      TEXT: Test123456
# tap on sign in
- tapOn:
    id: "signInButton"
- assertVisible: "Sign in successfully"

Exporting test report



# creates test report in console
$ maestro test --format junit .maestro/sign-in-flow-testid.yaml 
# creates test report as file
$ maestro test --format junit --output result.xml .maestro/sign-in-flow-testid.yaml

The result will look like this.



<?xml version='1.0' encoding='UTF-8'?>
<testsuites>
  <testsuite name="Test Suite" device="iPhone 14 Plus - iOS 16.1 - E7F8022E-939F-4165-B887-F342740BFCE6" tests="1" failures="0">
    <testcase id="sign-in-flow-testid" name="sign-in-flow-testid"/>
  </testsuite>
</testsuites>

The result provides a good overview about the test results when running multiple workflows. We can do this by running every test in the React Native CLI example.



$ maestro test --format junit --output results.xml -e USERNAME="Test User" -e PASSWORD="Test123456" .maestro

The result for multiple workflows looks like this.



<?xml version='1.0' encoding='UTF-8'?>

<testsuites>

  <testsuite name="Test Suite" device="iPhone 14 Plus - iOS 16.1 - E7F8022E-939F-4165-B887-F342740BFCE6" tests="5" failures="0">

    <testcase id="sign-in-flow" name="sign-in-flow"/>

    <testcase id="sign-in-flow-with-subflow" name="sign-in-flow-with-subflow"/>

    <testcase id="sign-in-flow-constants" name="sign-in-flow-constants"/>

    <testcase id="sign-in-flow-testid" name="sign-in-flow-testid"/>

    <testcase id="sign-in-flow-external-parameters" name="sign-in-flow-external-parameters"/>

  </testsuite>

</testsuites>

Further resources

Implement Spotify Wrapped slider in React Native

Alexander Hodes — Fri, 16 Dec 2022 09:47:33 +0000

Many people know Spotify Wrapped which displays the listening activity for the past year. The last part of this story provides a summary about top songs, top artists, top genre and total minutes. Here the users can select between different styles of this summary that can be shared.

We want to show you how to implement this component without using any third-party libraries.

General functionality

In general there's just a horizontal scrolling container displaying different styles of this summary. When scrolling it's snapped that the selected summary is always centered.

Implementing the summary component

At first we create a basic summary component that is inspired by the design of Spotify. Here, an image is displayed at the top and some data is displayed in a table format below. Furthermore, we need to think about the size of this component, because it should not take the complete screen and should be responsive to fit different screen sizes. That's why we took 60% of the screen height and about 67% of the screen width.

const { width, height } = Dimensions.get("screen");

// calculating size of summary component
export const SUMMARY_HEIGHT = height * 0.6;
export const SUMMARY_WIDTH = width * 0.665;

Implementing the design is using some flex styling and implementing some rows and columns for displaying the data. In addition, props for updating the background and text color are added.

Below, you can find a snippet of this summary component. The complete implementation can be found here.

type Props = {
  backgroundColor: string;
  textColor: string;
};

export const Summary: FunctionComponent<Props> = ({
  backgroundColor,
  textColor,
}) => {
  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: backgroundColor,
          height: SUMMARY_HEIGHT,
          width: SUMMARY_WIDTH,
        },
      ]}
    >
      <View style={styles.header}>
        <View style={[styles.headerPlaceholder, { backgroundColor: backgroundColor }]}></View>
      </View>
      <View style={styles.body}>
        <View style={styles.row}>
          <View style={styles.column}>
            <Text style={[styles.title, { color: textColor }]}>
              {"Top songs"}
            </Text>
            <Text style={[styles.text, { color: textColor }]}>{"#1 Song"}</Text>
          </View>
          <View style={styles.column}>
            <Text style={[styles.title, { color: textColor }]}>
              {"Top categories"}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 8,
    padding: 16,
  },
  header: {
    flex: 1,
    backgroundColor: "white",
    marginBottom: 16,
    justifyContent: "center",
    alignItems: "center",
  },
  /** Further styles **/
});

Looks great so far.

Displaying multiple summaries

In the next step, we want to display multiple summaries next to each other. For achieving this, we can use the ScrollView with a horizontal orientation by setting the horizontal property. In addition, we add a container around the summaries for adding some space between them.

export default function App() {
  return (
    <View style={styles.container}>
      <View style={[styles.summaryScrollContainer, { height: SUMMARY_HEIGHT }]}>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
        >
          <View style={styles.summaryContainer}>
            <Summary backgroundColor="green" textColor="white" />
          </View>
          <View style={styles.summaryContainer}>
            <Summary backgroundColor="red" textColor="white" />
          </View>
          <View style={styles.summaryContainer}>
            <Summary backgroundColor="blue" textColor="white" />
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
  summaryScrollContainer: {
    marginBottom: 12,
  },
  summaryContainer: {
    paddingHorizontal: 8,
  },
});

Furthermore we need to center the summaries in the ScrollView using the contentContainerStyle property. For centering the first and last element, we need to add some padding horizontally.

This padding can be calculated easily with this formula

padding = (SCREEN_WIDTH - (SUMMARY_WIDTH + SUMMARY_PADDING)) / 2

Translated into code:

  const screenWidth = Dimensions.get("screen").width;

  // 16 is padding that is added horizontally around summary
  const summaryWidth = SUMMARY_WIDTH + 16
  // padding that is located on the left and right for centering the summary item
  const horizontalPadding = (screenWidth - summaryWidth) / 2;

Now we got the summary items displayed in a centered and horizontal ScrollView.

Improving the scrolling

When inspecting the scrolling behavior in Spotify, some snapping can be found. We can implement this behavior in the ScrollView using snapToInterval. This property helps to stop at a specific position. We can use our summaryWidth variable (containing SUMMARY_WIDTH and padding) for this.

Another useful property is decelerationRate, which is used for defining speed for users fingers lift when scrolling.

return (
  <ScrollView
    ref={scrollViewRef}
    horizontal
    showsHorizontalScrollIndicator={false}
    contentContainerStyle={{ paddingHorizontal: horizontalPadding }}
    decelerationRate="fast"
    // snap interval for width of summary items
    snapToInterval={summaryWidth}
  >
  {/* summary components  */}
  </ScrollView>
)

Now it's already working fine.

Implement pagination dots

Next step is to implement the dots for displaying the current summary item. At first, we need to store the index of the current summary item in the state. And update this when a dot is pressed.

// further code
const [selected, setSelected] = useState(0);

const changePage = (index: number) => {
  setSelected(index)
}
// further code

We place the dots below the scroll view and in a row. The dot itself is just a circle with a background color which is changed when it's selected. Furthermore it accepts a callback for changing the current summary when it's pressed.

<View style={styles.dotsContainer}>
  <Dot selected={selected === 0} onPress={() => changePage(0)} />
  <Dot selected={selected === 1} onPress={() => changePage(1)} />
  <Dot selected={selected === 2} onPress={() => changePage(2)} />
</View>

Pressing the dot is working, but it's not connected to the ScrollView yet. For achieving this we need to do two things. First, creating a reference of the ScrollView that we can animate the scrolling when a dot is pressed. And second, we need to update the state and scrolling finished.

Animate scrolling when dot is pressed

When pressing a dot the position of the x axis needs to be calculated. This can be done easily by multiplying selected index with the summary width.

const scrollViewRef = useRef<ScrollView>(null)

const changePage = (index: number) => {
  if (scrollViewRef.current) {
    setSelected(index)
    // calculate scroll position by multiplying selected index with with of summary item
    scrollViewRef.current.scrollTo({ x: index * summaryWidth, animated: true })
  }
}

return (
  <ScrollView
    ref={scrollViewRef}
  >
  {/* summary components  */}
  </ScrollView>
)

Updating state when scrolling finished

Updating the state can be done listening to onMomentumScrollEnd property of ScrollView. It provides some information about the current scroll position when scrolling ended. We can calculate the current index by dividing the contentOffset for x axis with the summary width.

const onScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
  const item = Math.round(event.nativeEvent.contentOffset.x / summaryWidth)
  setSelected(item)
}

return (
  <ScrollView
    // updating the index when scroll is ended
    onMomentumScrollEnd={onScrollEnd}
  >
   {/* summary components  */}
  </ScrollView>
)

Result

The result looks pretty nice. We can just add the overScrollMode property and set it to never. in the ScrollView. It removes some dragging visuals on Android.

Further thoughts

The same thing can be achieved as well with a FlatList instead of a ScrollView. Here you just need to create an array of items for rendering the different summary styles.

The only feature missing is the sharing functionality where you can share the selected summary style on social media.

Resources

GitHub Repository https://github.com/alexanderhodes/spotify-wrapped-summary-swipe
Expo Snack https://snack.expo.dev/@alexander.hodes/spotify-wrapped-summary-swipe