#9.4 React Hook Forms on Native

ローカルにフォームがなくてもいいです.
userEffectを使用してregisterを登録し、onChangeTextを使用してValueを設定します.

//Login.js
export default function Login({ navigation }) {
  const { register, handleSubmit, setValue } = useForm();
  
  const onValid = (data) => {
        console.log(data);
    };
    useEffect(() => {
        register("username");
        register("password");
    }, [register]);
  return (
        <AuthLayout>
            <TextInput
                placeholder="Username"
                returnKeyType="next"
                autoCapitalize="none"
                placeholderTextColor={"rgba(255, 255, 255, 0.6)"}
                onSubmitEditing={() => onNext(passwordRef)}
                onChangeText={(text) => setValue("username", text)}
            />
            <TextInput
                ref={passwordRef}
                placeholder="Password"
                secureTextEntry
                returnKeyType="done"
                lastOne={true}
                onSubmitEditing={handleSubmit(onValid)}
                placeholderTextColor={"rgba(255, 255, 255, 0.6)"}
                onChangeText={(text) => setValue("password", text)}
            />
            <AuthButton
                text="Log In"
                disabled={false}
                onPress={handleSubmit(onValid)}
            />
        </AuthLayout>
    );
}

#9.5 Navigate with param

navigationの内蔵navigation関数はparamと一緒にスキップできます.

//CreateAccount.js
export default function CreateAccount({ navigation }) {
    const { register, handleSubmit, setValue, getValues } = useForm();
    const onCompleted = (data) => {
        const { createAccount: { ok } } = data;
        const { username, password } = getValues();
        if (ok) {
            navigation.navigate("Login", {
                username,
                password,
            });
        }
    };

受信時にuseFormを介してルーティングされたparamを受信する.

//Login.js
export default function Login({ route: { params } }) {
    const { register, handleSubmit, setValue, formState, watch } = useForm({
        defaultValues: {
            password: params?.password,
            username: params?.username,
        }
    });

#9.6 AsyncStorage

ログインすると、複数セットを使用して同期ストレージに格納されます.
Web上でlocalStorageから直接取得するため、isLogedInValerの作成時にlocalStorage値として、reac-nativeは非同期受信として、最初にfalseに設定し、ロード時に値をチェックします

//apollo.js
import { ApolloClient, InMemoryCache, makeVar } from "@apollo/client";
import AsyncStorage from "@react-native-async-storage/async-storage";

export const isLoggedInVar = makeVar(false);
export const tokenVar = makeVar("");

export const logUserIn = async (token) => {
    await AsyncStorage.multiSet([["token", JSON.stringify(token)], ["loggedIn", JSON.stringify("yes")],]);
    isLoggedInVar(true);
    tokenVar(token);
};

アプリケーションの最初の実行とロード時にトークンを確認します.

//App.js
const preload = async () => {
    const token = await AsyncStorage.getItem("token");
    if (token) {
      isLoggedInVar(true);
      tokenVar(token);
    }
    return preloadAssets();
  };