Делаю авторизацию в мобильном приложение на React Native через ВКонтакте. Токен и в последствии данные пользователя получаю, но есть ошибка Objects are not valid as a React child. Если убрать async у функции то ошибки нет, но тогда и данные от ВК я не получаю. Я прочитал о том, что render является синхронным и не будет ждать завершения асинхронных подпрограмм и подозреваю что ошибка из-за этого возникает но я не понимаю как исправить.
import * as AuthSession from 'expo-auth-session';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
async function App(e) {
e.preventDefault();
let redirectUrl = await AuthSession.getRedirectUrl();
let result = await AuthSession.startAsync({
authUrl: 'https://oauth.vk.com/authorize?client_id=7563861&display=mobile&redirect_uri=' + redirectUrl + '&response_type=token&v=5.92',
});
if (result.type === 'success') {
const response = await fetch('https://api.vk.com/method/users.get?v=5.92&access_token=' + result.params.access_token);
const user = await response.json();
this.setState({
name: user.response[0].first_name + ' ' + user.response[0].last_name
});
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e9ebee',
alignItems: 'center',
justifyContent: 'center',
},
loginBtn: {
backgroundColor: '#4267b2',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 20
},
logoutBtn: {
backgroundColor: 'grey',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 20,
position: "absolute",
bottom: 0
},
});
return (
<View style={styles.container}>
<TouchableOpacity style={styles.loginBtn} onPress={App}>
<Text style={{color: "#fff"}}>Войти с помощью ВКонтакте</Text>
</TouchableOpacity>
</View>
);
}
export default App;