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.

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" });

tip

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