Add the rest of your data sources to your application

ROOK offers a list of providers that you can include in your application, allowing your users to share information from the wearables they use, thereby providing you with more insights.

Consult the list of providers and build your own view with the providers.

warning

For SDK-based data sources (e.g., Apple Health, Health Connect), authorized indicates if the user was created via SDK and linked with ROOK, but it does not confirm permission to access data.

For API-based data sources (e.g., Fitbit, Garmin, Withings), authorized: true confirms that the user has granted ROOK access to retrieve their data through the respective third-party platform.

Custom View

First, we need to create the component that will receive the data source.

import React from "react";
import { View, Text, Image, TouchableOpacity, Linking } from "react-native";

interface Props {
  imageURL: string;
  description: string;
  cta: string;
}

const CustomComponent: React.FC<Props> = ({ imageURL, description, cta }) => {
  const handlePress = () => {
    Linking.openURL(cta);
  };

  return (
    <View style={{ flexDirection: "row", alignItems: "center" }}>
      <Image
        source={{ uri: imageURL }}
        style={{ width: 50, height: 50, marginRight: 10 }}
      />
      <View>
        <Text>{description}</Text>
        <TouchableOpacity
          onPress={handlePress}
          style={{
            backgroundColor: "blue",
            padding: 10,
            borderRadius: 5,
            marginTop: 5,
          }}
        >
          <Text style={{ color: "white" }}>Conectar</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default CustomComponent;

Once the component is created, we need to create another one to display the list of data sources.

import { useEffect, useState } from "react";
import { useRookDataSources } from "react-native-rook-sdk";
import { DataSource } from 'react-native-rook-sdk/lib/typescript/src/types/DataSource';

const CustomListComponent: React.FC<Props> = () => {
  const [sources, setSources] = useState<DataSource[]>([]);
  const { getAvailableDataSources } = useRookDataSources();

  useEffect(() => {
    getAvailableDataSources().then(setSources).catch(console.error);
  }, []);

  const renderItem = ({ item }: { item: DataSource }) => (
    <CustomComponent
      imageURL={item.imageUrl}
      description={item.description}
      cta={item.authorizationURL}
    />
  );

  return (
    <View>
      <FlatList
        data={sources}
        renderItem={renderItem}
        keyExtractor={(item) => item.name}
      />
    </View>
  );
};

tip

In case you need to configure the redirect URL (the URL to which the source page should return), you can do so by passing it into the options.

await getAvailableDataSources({ redirectUrl: "https://example.com" });

tip

if you need to disconnect or revoke the auth for an API source use revokeDataSource.

Custom View​

Custom View