Magic Link SDK вообще не отвечает в приложении React Native

#react-native

#react-native

Вопрос:

В настоящее время я пытаюсь протестировать Magic Link в действительно простом приложении React Native, поскольку я пытаюсь опробовать его перед внедрением в реальное приложение.

Редактировать — вот ссылка на документацию.

Однако, несмотря на установку SDK и следование документации, он не отвечает… Или даже, казалось бы, пытается что-то сделать. Ошибка не появляется, она просто не отвечает — так что я, должно быть, упускаю что-то действительно очевидное.

Вот компонент ‘test’ полностью (каждая строка):

 import React, { useState } from 'react';
import { Text, View, TextInput, Button, StyleSheet } from 'react-native';

import { Magic } from '@magic-sdk/react-native';

const m = new Magic('API_KEY');

function App () {

  const [email, setEmail] = useState('')

  const onClick = async () => {
    console.log(email);
    m.auth.loginWithMagicLink({ email: email })
  };

  const logout = async () => {
    await m.user.logout();
    console.log(await m.user.isLoggedIn());
  }

  const getMeta = async () => {
    const meta = await m.user.getMetadata()
    console.log(meta);
  };

  return (
    <View style={styles.view}>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} />
        <Button style={styles.button} onPress={onClick} title="Submit" />
        <Button onPress={logout} title="Logout" />
        <Button onPress={getMeta} title="Get Data" />
    </View>
  )
}

const styles = StyleSheet.create({
  view: {
    marginTop: 300
  },
  input: {
    height: 60,
    width: 300,
    alignSelf: 'center',
    borderWidth: 1,
    borderColor: 'red',
    paddingLeft: 10,
    borderRadius: 10
  },
  button: {
    marginTop: 50,
    marginBottom: 300
  }
})
 

Magic Link SDK для React Native функционирует так же, как и в Web, но он не работает, несмотря на то, что я в значительной степени использую идентичный код в практическом веб-приложении, и он работает точно так, как ожидалось.

Может кто-нибудь указать, что я делаю неправильно, и почему ни одна из функций не отвечает?

К вашему сведению — журналы консоли работают… Я думаю, это проблема с Magic.

Спасибо!

Ответ №1:

Я думаю, вам не хватает компонента relayer, <m.Relayer />

Соответствующий раздел в документах

 function App() {
  return (
    <View>
      {/* Remember to render the `Relayer` component into your app! */}
      <m.Relayer />
    </View>
  );
}