In my a stack screen, I have used two library of webview system. The one is 'react-native-video', other is 'react-native-youtube-iframe'.
The problem is that each library conflicts. When the crash occurred, there were no error messages.
When entering the screen, Vimeo and YouTube play for about a second and then stop at the same time. Originally, it should be auto-play.
If only one library is used on one screen, it will play normally.
Below is my example code.
const Screen = () => {
return (
<View>
<Vimeo // import Vimeo from 'react-native-video'
{/*...settins*/}
/>
<YoutubePlayer // import YoutubePlayer from 'react-native-youtube-iframe'
{/*... settings*/}
/>
</View>
)
}
How can i solve this problem?
Related
I have a Component that renders a Webview, of which there are links. For example, if I have something like:
export const About = () => {
return (
<SafeAreaView edges={['right', 'top', 'left']} style={{ flex: 1 }}>
<Webview url={`${BASE_URL}/about`} />
</SafeAreaView>
)
}
export default About
Let's say that on the /about page, we have a link to /faq. As things currently stand, if I click on the link to /faq, the page will be rendered in that current Webview.
My desired behavior is for the /faq to put on the navigation stack so I can take advantage of the back button in the header. I don't know how to accomplish this. I don't have access to the link to /faq via React Native (see code snippet above) so I can't just add an onClick that pushes a page to the stack.
Another thing I was exploring was setting up some linking configurations so I can link /faq to /about, and so the routing would recognize that. No idea if I was going down a good path there. Please forgive me if I've mixed up concepts, my understanding of the React Native ecosystem and React Navigation is still very raw. Thank you for your time.
I'm attempting to write some tests for my react native app. A component in my app focuses a TextInput after a parent Pressable receives a press. I'm using a ref to identify and focus the TextInput element.
My desired functionality works just fine when running my app through expo, but my test is failing because it seems that the onFocus event is not being called.
Why isn't ref.current.focus() being called when running tests via the #testing-library/react-native library?
Here's my code:
Foo.js
import {Pressable, TextInput} from "react-native";
import {useRef} from "react";
const Foo = (props) => {
const inputRef = useRef()
return (
<Pressable testID={"pressable"} onPress={() => inputRef.current.focus()}>
<TextInput ref={inputRef} testID={"input"} onFocus={props.onFocus} />
</Pressable>
)
}
export default Foo;
Foo.test.js
import { render, screen, fireEvent } from '#testing-library/react-native';
import Foo from "./foo";
test('onFocus is called after press', () => {
const mockFocus = jest.fn();
render(<Foo onFocus={mockFocus} />)
// fireEvent(screen.getByTestId("input"), 'focus');
fireEvent.press(screen.getByTestId("pressable"));
expect(mockFocus).toHaveBeenCalled()
});
This test fails with the following message:
Error: expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
I created an issue on the RNTL GitHub page and received a response from a contributor. Copying and pasting here for easy reference for anyone who might stumble upon this thread.
This is expected as React Test Renderer which we use for rendering
does not support refs. Check #1006 for more details.
Since the behaviour of focus() triggering onFocus event would probably
involve roundtrip to native side (from JS side), then you actually
cannot test such behaviour using RNTL as we do not run native code (see
here for details).
That leaves you with following options:
Call fireEvent.focus to manually trigger onFocus on relevant
TextInput. Recommended in case focus assertion would be a part of a
step in a bigger test.
Use createNodeMock to pass ref creating function to render method, More details here. Recommended in case you
just want to assert pressing button triggers onFocus.
After using Linking.getInitialURL() the URL stay there.
I am using react-native-router-flux to navigate.
when users log out I run
import { NativeModules } from 'react-native';
NativeModules.DevSettings.reload()
What happens is the react-navigation do Linking.getInitialURL()
and if there any result so it navigates automatically to the page.
how to reset Linking.getInitialURL() after use ?
happens only on android
React Navigation 5 provides an option to specify a custom getInitialURL method which you can use:
<NavigationContainer
linking={{
// ... linking config
getInitialURL() {
return YourCustomModule.getInitialURL();
},
}}
>
{/* content */}
</NavigationContainer>
https://reactnavigation.org/docs/navigation-container/#linkinggetinitialurl
For the implementation, since you're reloading the whole JS, the code cannot be in JS as the state is lost on reload. You'll need to write a custom native module where you can clear the initial URL when reloading.
import React from "react";
import AppLoading from "expo-app-loading";
export default function App() {
return <AppLoading />;
}
Isn't the above code supposed to show the splash screen to me? All I get is a white screen. Would really appreciate knowing what I did wrong here.
I have splash.png in my assets folder.
My app.json file:
{
"expo": {
...
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#e2fcff"
},
...
}
}
The code you have shown looks fine. However, there's more to it.
It's quite unclear to me what is actually supposed to work and not. For me, who runs a custom-managed workflow, AppLoading works when I prebuild android/ios and run the standalone app. When I run in Expo Go app I simply see a blank screen instead of the splash screen.
People have discussed if AppLoading works in bare workflow and according to Expo's sdk it should. It also works for me with a prebuild, so bare workflow is supported (in Expo SDK 42).
I have seen no mentions about showing a splash screen within the Expo Go app though, so can't tell whether that is supported or not.
And then web... Once again, not sure if it should work or not - it doesn't for me. It shows a blank page while loading. And in the fonts guide there is an Expo snack which uses AppLoading that shows a splash screen on Android but merely a blank page on web. The AppLoading docs claims it has support for web. If that means it won't crash, or actually display a splash screen image is left untold. The AppLoading docs further claims it uses SplashScreen to show the splash screen, which doesn't have web support. So, I suppose there's nothing such a splash screen for web (which wouldn't surprise me, because splash screens are uncommon on web).
Personally, I'm fine with Android/iOS support for standalone apps. I only use Expo Go for testing. Furthermore, the splash screen I will use for mobile devices won't work well on web anyway. The skeleton I will show won't look the same as the web version, so I would rather implement at custom splash screen for web.
Summary for AppLoading support:
Managed and bare workflow are both supported.
It works on standalone apps.
Not sure if it will display the splash screen in Expo Go app.
Web appears to fallback to displaying a blank page.
If I'm wrong somewhere, or if someone knows if AppLoading works in Expo Go App, please fill me in!
App loading documentation In the documentation, it says that you need to provide additional arrugments
export default function App() {
const [isLoading, setLoading] = useState(true);
if (isLoading) {
return(
<AppLoading
startAsync={() => console.log('starting')}
onFinish={() => { setTimeout(() => {setLoading(false)}, 1000) }}
onError={(err) => {console.log(err)}}
/>
)
}
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
I am learning RN, and as a part of my project, I am building an app that will take me to my toolbelt of items I will be making or have made such as animations. I am currently struggling with the login component of it. I am looking to login to my app so that it can take me to the homepage. I am using asyncstorage. When I log in, nothing happens except it stays on the login page. I have provided the lines of code as to how I have it built out. I really am just looking for something to get to the homepage on my simulator. I won't be deploying it or anything as I am keeping it to myself, but if any of you have any recommendations for articles or videos on how to achieve this in a "simpler" fashion, I am open to that option as well.
<TouchableOpacity
style={styles.buttonContainer}
onPress={this._signInAsync}
>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
_signInAsync = async () => {
await AsyncStorage.setItem("userToken", "abc");
this.props.navigation.navigate("app");
};
}