To fix the "Invalid prop ‘source’ supplied to Image" error with React-Native Image, we set the source prop of the Image component to the value returned by calling require with the image path.
For instance, we add the Image by writing
<Image source={require("./my-icon.png")} />;
We set the source to the value returned by require to add the image at my-icon.png.
To pass params to tab navigator React Navigation 5, we create a context and set put the value we want in the context.
Then any component inside the context provider can access the value.
For instance, we write
export const NetworkContext = React.createContext();
to create the NetworkContext and export it.
Then we write
const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = ({ route }) => {
return (
<NetworkContext.Provider value={route.params.network}>
<PostsTabNav.Navigator>
<PostsTabNav.Screen
name="NetworkPosts"
component={NetworkPostsScreen}
/>
<PostsTabNav.Screen
name="NetworkUsers"
component={NetworkUsersScreen}
/>
</PostsTabNav.Navigator>
</NetworkContext.Provider>
);
};
to create the PostsTabNav with createMaterialTopTabNavigator.
And then we wrap NetworkContext.Provider around the PostsTabNav components and set the context value to route.params.network.
Then the PostsTabNav components can access route.params.network with the context.
To add external JavaScript files with script tags in React Next.js, we add the script tags into the Head component.
For instance, we write
import Head from "next/head";
const Layout = (props) => (
<div>
<Head>
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="/js/myscript.js"></script>
</Head>
<p id="demo"></p>
</div>
);
export default Layout;
to add the script tags into the Next.js Head component.
To focus a React Material UI TextField on button click, we assign a ref to the TextField by assign a ref to the inputRef orop of the TextField.
Then we can call focus on the element we get from the ref.
For instance, we write
import React, { useState, useRef } from "react";
const Comp = (props) => {
const textInput = useRef(null);
return (
<div>
<Button
onClick={() => {
setTimeout(() => {
textInput.current.focus();
}, 100);
}}
>
Focus TextField
</Button>
<TextField
fullWidth
required
inputRef={textInput}
name="firstName"
type="text"
placeholder="Enter Your First Name"
label="First Name"
/>
</div>
);
};
to call the useRef to create the textInput ref.
Then we assign textInput as the value of the inputRef prop.
And then we call textInput.current.focus( to focus the element in the button’s click handler.
To simulate keydown on document with Jest, we create a new KeyboardEvent instance.
For instance, we write
const event = new KeyboardEvent("keydown", { keyCode: 37 });
document.dispatchEvent(event);
to create a new KeyboardEvent instance with the 'keydown' event.
And we set the event object to { keyCode: 37 }.
Then we call document.dispatchEvent with the event object to dispatch the keydown event with key code 37.