'react-native-webview expo web not loading URI
I inherited a school group project with a GitHub repository containing a nodejs TypeScript server and client application. The server runs on a cloudservice and the client is supposed to be a Android or web-browser based application to connect to this server.
The problem is that the client app is not working when trying to access a uri via showWebview. The uri is specified like this: https://appname.domain.toplevel/v1/auth/login. This path redirects to a Oauth2 identity provider. On emulated android this works, but via the Expo web the client just shows a white screen after pressing a button which calls toggleWebView.
login-screen.txs:
import { Button, Divider, PlainText, Title } from '@components/general'
import { ScreenContainer, ScreenWrapper, Section } from '@components/layout'
import React from 'react'
import { SafeAreaView } from 'react-native'
import { WebView, WebViewNavigation } from 'react-native-webview'
import styled from 'styled-components/native'
import { useAuth } from '@/contexts/auth'
import { color, spaces, typography } from '@/theme'
import { urlParamParser, useToggle } from '@/utils'
/**
* Login function
*/
export const LoginScreen = () => {
const auth = useAuth()
const [showWebview, toggleWebView] = useToggle()
/**
* Gets authorisation of the user and sending to new page
* @param navigationState
*/
const onNavigationStateChange = async (navigationState: WebViewNavigation) => {
const url: string = navigationState.url
if (!url) return
const authToken = urlParamParser(url, 'token')
if (authToken) {
await auth.signIn(authToken)
}
}
/**
* Styling code
*/
const Wrapper = styled(ScreenWrapper)`
justify-content: space-between;
align-items: center;
padding-bottom: ${spaces.xl4}px;
`
const Image = styled.Image`
flex: 1;
aspect-ratio: 1;
`
/**
* Showing components like a picture, text and the login button on the login page
*/
return (
<ScreenContainer>
<SafeAreaView />
{showWebview ? (
<WebView
style= {styled.webView}
javaScriptEnabled={true}
domStorageEnabled={true}
source={{ uri: `https://appname.domain.toplevel/v1/auth/login` }}
onNavigationStateChange={onNavigationStateChange}
/>
) : (
<Wrapper>
<Image source={require('@assets/images/login.png')} />+
<Section>
<Title
value="Inloggen"
fontSize={typography.xl5.fontSize}
fontFamily="Lato-Bold"
color={color.black}
/>
<Divider />
<PlainText>
Om gebruik te maken van Stutor dien je in te loggen met je school account
</PlainText>
<Divider />
<Button onPress={toggleWebView}>
<Title
value="Inloggen met school account"
fontSize={typography.md.fontSize}
fontFamily="Lato-Bold"
color={color.white}
/>
</Button>
</Section>
</Wrapper>
)}
</ScreenContainer>
)
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
