Update User ID

Before any data synchronization, we need to set or configure a user to identify the data and know who owns the information. We recommend configuring this after your login using the updateUser function of useRookConfiguration, as shown below.

const handleLogin = async () => {
  ...
  await yourLoginService(`${userID}:${password}`);
  await updateUserID(userID);
  ...
};

Finally your screen should look like this.

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";
import { useRookConfiguration } from "react-native-rook-sdk";

export const Login = () => {
  const [loading, setLoading] = useState(false);
  const [userID, setUserID] = useState("");
  const [password, setPassword] = useState("");

  const { ready, updateUserID } = useRookConfiguration();

  const handleLogin = async () => {
    try {
      setLoading(true);

      await yourLoginService(`${userID}:${password}`);
      await updateUserID(userID);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return ready ? (
    <View style={styles.container}>
      <Text style={styles.title}>Inicio de Sesión</Text>
      <TextInput
        style={styles.input}
        placeholder="User ID"
        keyboardType="email-address"
        onChangeText={(text) => setUserID(text)}
      />
      <TextInput
        style={styles.input}
        placeholder="Contraseña"
        secureTextEntry={true}
        onChangeText={(text) => setPassword(text)}
      />
      <Button
        title={loading ? "Loading . . ." : "Log in"}
        disabled={loading}
        onPress={handleLogin}
      />
    </View>
  ) : (
    <View style={styles.container}>
      <Text style={styles.title}>Loading</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
    color: "white",
  },
  input: {
    width: "100%",
    height: 40,
    color: "white",
    borderColor: "gray",
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

info

Any call to updateUserID the userID will override the previous userID and reset the sync status, so if you are using background sync all health data will synchronize again the next time the app is launched.