Am I able to use transform in styled-components in React Native?
I define the styled component like this:
const StyledAnimatedView = Animated.createAnimatedComponent(styled.View<
ViewProps
>`
transform: translateY(-100);
`);
but it throws me an error when component mounts:
Error: Failed to parse declaration "transform: translateY(-100)"
I know it is possible in web but maybe not in React Native?
transform: translateY(-100px);
I found that "px" is necessary in most cases when you are using react native. btw, you can use props.
styled.View<ViewProps>`
transform: translateY(${props => props.translateY});
`);
<StyledAnimatedView translateY={'-100px'}/>
Related
React Native app with Expo.
Installed Jest and Enzyme
Want to run Enzyme Mount on the component so I can test state updates.
I have this simple test
describe("State checking", () => {
test("Make sure that State gets added from Route params", () => {
const component = mount(<Categories/>);
const instance = component.instance();
console.log(instance);
})
})
When running this, I get this error from the test:
Warning: <View /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Warning: The tag <View> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
What is going on here? Does it not recognize that I am using React Native?
I have researched this issue but get nothing useful.
Thank you for your time.
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.
I was trying to move all things that I could to useNativeDriver. I tried this:
onPanResponderMove: Animated.event([null, { dy:this.state.appearAnim }], { useNativeDriver:true }),
However this causes the error of:
config.onPanResponderMove is not a function
If I just set useNativeDriver to false, it works as per expectations.
Does anyone have any idea on how to use native driver with PanResponder?
I quote from the react-native github repository:
PanResponder can't work with Animated.event([], {useNativeDriver: true});
This is a current limitation of native Animated.event. It doesn't work with PanResponder because it is implemented in JavaScript. You can have a look at https://github.com/wix/react-native-interactable which can handle gestures with native animated values.
Looks like it is currently not possible to useNativeDriver with the PanResponder in react native.
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.
In my current react native app.
I am using react-native-navigation for general app navigation.
On the other hand, I would like to use native-base for some basic UI elements.
My question is, how do I pass a <Icon name="ios-search"/> from native-base to a react-native-navigation tab?
Based on this wiki. It seems that they only accept an actual image for a tab icon?
https://github.com/wix/react-native-navigation/wiki/Top-Level-API
As far as i see it, native-base icons is just a wrapper on react-native-vector-icon. In react-native-vector-icon, there is a getImageResource function that allows me to convert icons into images. How do I do it in native-base?
getImageSource function will be added to the Icon in next version of Native Base.
For now, you can import any Icon family directly from react-native-vector-icons and use getImageSource from there.
import Ionicons from 'react-native-vector-icons/Ionicons';
...
...
getImageSource('ios-home', 20, 'red').then((source) => this.setState({ userIcon: source }));