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. There are two ways to achieve this:

• Consult the list of providers and build your own view with the providers.
• Display a default view provided by ROOK.

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, DataSource } from "react-native-rook-sdk";

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" });
await presentDataSourceView({ redirectUrl: "https://example.com" });

Default View

If the default view works well for your application, all you need to do is call the function that displays it.

import { useRookDataSources } from "react-native-rook-sdk";

const ShowDataSourcesButton: React.FC = () => {
  const { presentDataSourceView } = useRookDataSources();

  const handlePress = async () => {
    try {
      await presentDataSourceView();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <View style={{ marginVertical: 10 }}>
      <Button title="Show Data Sources View" onPress={handlePress} />
    </View>
  );
};

export default ShowDataSourcesButton;

tip

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