I am using react-native-navigation for navigation in my app and also I use Apollo to connect to my server and get query, as you know I have to use:
`const { navigate } = this.props.navigation;
navigate("NewScreen");
Also when I want to set query data I have to use:
render() {
const {data} = this.props
const {loading, allData} = data
but I get this error: " Cannot read property 'navigate' of undefined." However, if I remove this line:
const { navigate } = this.props.navigation
there is no problem.
How should I use these two together?
React Native Navigation and React Navigation are two different libraries.
The function navigate comes from the React Navigation library. If you're using React Native Navigation, you'll have to use push instead.
Related
I want to remove eventlistener in react native but removeEventListener is deprecated in react native
in the latest react native versions you can do this instead
const btnWidthHandler = () =>{
setbtnwidth(Dimensions.get("window").width/4)
}
useEffect(()=>{
dimensionsHandler=Dimensions.addEventListener('change',btnWidthHandler)
return ()=>dimensionsHandler.remove()
},[])
I'm using typescript, it pops error while I'm using react native navigation, so what exactly the type of nivation for the code TabOneScreen({ navigation })?
Thanks,
It depends on your navigator structure, but you can find more information in the React Navigation docs.
They have this example for a simple stack navigator with a screen named Profile.
import { StackNavigationProp } from '#react-navigation/stack';
type ProfileScreenNavigationProp = StackNavigationProp<
RootStackParamList,
'Profile'
>;
type Props = {
navigation: ProfileScreenNavigationProp;
};
For My project I am using one custom hook for navigation some of my screens as from one screen to another screen based on the parameters provide to the function of custom hook. How could I Unit Test it for React Native Custom
const {result} = renderHook(() => {useShoppingCartNavigator()});
The problem is I am getting result.current as void and unable to call function of the hook
But according to the doc it should be like
result.current.customHookFn();
The callback inside your renderHook is not returning anything because you wrapped your customHook on curlybraces. It should be
const {result} = renderHook(() => useShoppingCartNavigator());
In React Native, how can I perform a function when the page shows or any component shows, this really confuses me a lot, I can't find the solution in the Documents, and I use functions to declare the components.
Use a class component and and call your function in the componentDidMount lifecycle method
use can also use hook instead of componentDidMount, I personally find code more readable with hooks
import React, { useEffect } from 'react'
const Component = () => {
useEffect(() => {
//do anything here
}, [])
return(
//JSX
)
}
I have followed –or tried to– several posts on how to do it, including the airbnb enzyme's guide for (separatedly) react-native and jest. (E.g: https://medium.com/#childsmaidment/testing-react-native-components-with-enzyme-d46bf735540#.6sxq10kgt, https://blog.callstack.io/unit-testing-react-native-with-the-new-jest-i-snapshots-come-into-play-68ba19b1b9fe#.4iqylmqh5 or How to use Jest with React Native)
But I keep getting lots of warnings (I have multiple set of concurrent tests) whenever I try to render (not mount, it crashes) any native component. Warnings are always about a native prop not being recognised.
Warning: Unknown props `focus`, `secureTextEntry` on <TextInput> tag. Remove these props from the element.
in TextInput (created by TextInput)
in TextInput (created by PasswordInput)
Anyone who has a set up working, recognises how to remove the warning or how to solve it?
Thanks
So I know this is a bit old but I was having issues with Jest, Enzyme, and React Native and I found this post - hopefully this solution will help.
To start with - Enzyme doesn't support mounting React Native and only supports shallow rendering. This wasn't good enough for me as I needed end-to-end tests from the component to the api which lead me to react-native-mock-render. What this does is allow us to run react native inside a browser environment which let's us test using Enzyme - all the calls for React Native and the components work as you would expect.
To set this up you'll need to install JSDOM, react-native-mock-render, Enzyme 3.0+, and Jest 20.0.0+. And then inside your jest setup file (which is specified in your package.json) include the following code:
const { JSDOM } = require('jsdom');
const jsdom = new JSDOM();
const { window } = jsdom;
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === 'undefined')
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
copyProps(window, global);
// Setup adapter to work with enzyme 3.2.0
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });
// Ignore React Web errors when using React Native
console.error = (message) => {
return message;
};
require('react-native-mock-render/mock');
And that's it - you're all setup to mount components in Enzyme and test them.
If you want to see a full sample check out react-native-mock-render-example. This is working with React 16, React Native 0.51, and Enzyme 3.2.
In order to unit test your component with jest you can use enzyme-to-json
npm install --save enzyme-to-json
then your test would look like this:
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import MyComponent from './MyComponent';
it('should render component', => {
expect(shallowToJson(shallow(<MyComponent />))).toMatchSnapshot();
});
I'm not sure regarding your case with react-native.
I can share my case of using jest + enzyme with standard react.
When I needed to test some component and isolate it from others I used jest.mock, e.g.
jest.mock('../ComponentToBeMocked', () => {
return () => null;
});
Initially I found examples when the second argument (a function) should return just a string representing a name of the mocked component. But in that case I saw that distracting Unknown props warning.