React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
https://facebook.github.io/react-native/
It depends on what project you are going to build. As for front-end developer, you nearly need to learn nothing, only a new way to write javascript (Redux, JSX).
No. (But everyone use it.)
First of all, in React Native, you only need to learn javascript, you only use javascript. JSX looks like html but it is a syntax extension to javascript.
We dislike putting html tags into javascript because it creates chaos, but doesn’t document.querySelector('.login_from') this kind of code make you annoy? You have to switch tabs between project/static/html/login.html and project/src/js/login.js to check if you need something changed both in .js and .html. But now in React they are together in one component file, easy to check and does not have side effect.
https://facebook.github.io/react/docs/components-and-props.html
Let’s build an App!
You can use Redux or Context, but in fact I wouldn’t call it as a global variable.
No shortcut, go through Redux document and React Native Redux examples.
No, those files are necessary for the app. If we want to add a third-party library that would need us to modify info.plist file. So please don’t delete anything.
The way to do that is using setState(xxx) function or using Redux. If you want to change anything and show it on the screen, you need to make components re-render.
Function setState() will trigger render, and you should avoid doing this inside any render recycle function: Lifecycle in React Native Component
Yes. If you have multi-reducer and want to use the same variables, just adding the action into both switch cases, then they will trigger in the same time. If you need them be triggered by the right order, you could do something like:
this.props.someAction().then((responseObj: Object): void => {
if (responseObj && responseObj.type !== THE_ACTION_YOU_DONT_WANT_TO_ACT) {
this.props.someOtherAction();
}
});
Variable reference problem, if you want to update an array in Redux store, using this way instead: To update an array in redux store.
Please check if you accidentally press down “cmd” + “T” in iOS Simulator. If both android and iOS Simulator are extremely slow, you might need to close the debug window or set focus on the debug window.
In Dev menu there is an option name Show Inspector, you could check the network in side Simulator there. If you feel the text is too small, the only choice would be some tool like Wireshark.
Android Simulator cannot access local host file, you need to set a Simulator host file and upload into Simulator.
Here is a video about how to do it: https://www.youtube.com/watch?v=H-GSFIr0ixs
Every time android Simulator(maybe only in React Native) send AJAX request, it will add "Content-Type": "charset=utf-8" to the request headers automatically. And if your server side does not accept this, it might cause error.
Refs can be as string attribute or callback method: https://reactnatve.wordpress.com/2016/05/24/refs-to-components
You can use redux-persist library or write native code by yourself. So if you are using redux-persist, then you must learn how to use redux.
First of all, do not follow the wrong document. If your version is 0.37, then follow the docs of version 0.37 not the docs of the version you want to upgrade. Then, check out rn-diff to see if it is ok to skip some version directly.
For example my version 0.46.4 has to upgrade to 0.49.0 first because there is some change I have to do manually. After I make sure version 0.49.0 on my computer is working, then I upgrade to 0.52.0.
If you want to upgrade React Native version, you should know what third library you are using. Because when upgrading is done. You have to add those library one by one again.
Try to close the React Native packager and delete the app in your Android Simulator. Then start everything again. If the problem still there, go checking if you are using redux-persist and do the purge first.
No, you have to use SMS app in iOS to send SMS text.
No :(
You can shake your cellphone if it is running in debug mode in the same wifi connection with your laptop.
If the component is using WebView or something similar which is pretty complicated component, you will need to write jest.mock('WebView', () => 'WebView') to mock WebView component when you are writing snapshot.
If the component is using redux, you need to import Provider from react-redux and write the component inside of .
If the component will fetch data, you also need to mock the internet. For example you can use fetchMock.
Jest framework are changing very fast, so you might need to keep version up-to-date and check the error that isn’t causing by version itself.
The short explanation is snapshot will go inside of the component to make snapshot as much detail as possible, but it is not necessary and also very hard to do that with some component.
So, just mock them please :)
Make sure version in your package.json file is the version you want.
For example, "react-native: ^0.43.3" is not same as "react-native: 0.43.3".
Clean up and re-install everything.
If the error still there, then try to run
$ react-native-git-upgrade
It is painfully that use jest.mock in every snapshot, is there a way to setup once for all?
Yes, you can create a setup.js file in test folder and write the mock function there.The in the package.json file, change jest block into this:
"jest": {
"preset": "react-native",
"collectCoverage": true,
"coverageDirectory": "__coverage__",
"testRegex": "./__tests__/[^setup].*.js$",
"transformIgnorePatterns": ["node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"],
"setupFiles": ["./__tests__/setup.js"]
}
After integration react-native-push-notification, why Android devices always relaunch after clicking the notification?
added android:launchMode="singleTop" to the main activity element in AndroidManifest.xml
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:launchMode="singleTop"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
...
</activity>
Most of the time it will be called if this component is not on the screen. And “not on the screen” does not mean disappear, but it means the screen is not in the memory.
For example, the app has a home screen and home screen can navigate to the event screen. This means home screen will never trigger componentWillUnmount, because event screen is only cover home screen, the home screen is still there. And event screen will trigger componentWillUnmount when navigation pops the screen out.
Add those codes in setup.js( see the answer for "It is painfully that use jest.mock in every snapshot, is there a way to setup once for all?" ):
jest.mock('Linking', () => {
return {
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
openURL: jest.fn(),
canOpenURL: jest.fn(),
getInitialURL: jest.fn(),
}
})
jest.mock('react-native-fabric', () => {
return {
Crashlytics: {
crash: () => {},
},
Answers: {
logCustom: () => {},
logContentView: () => {},
},
}
})
If there is only single action you need to trigger, normally you only need to pass the state into it.So it won’t be tricky. But if you need to trigger multi actions, you need to change :
“return dispatch =>{....}”
into
“return (dispatch, getState) => {....}”
And then you could use getState().xxxx to get reducer inside action creator, but also remember this way needs you to install redux-thunk.
When you try to debug react native, the debug is using chrome v8 engine to run javascript not native javascript core. So the results sometime are different.
JSC on Android doesn't include the locale settings. It would increase the size of the APK by ~2MB. So we need to use some date format npm package by our own.
1.First of all, use npm install flow-bin:
npm install --save-dev flow-bin
2.Add npm script in package.json:
"flow": "flow"
3.Open terminal and run:
npm run flow init
4.Add //@flow on the top of the file which you want to check type. 5.After init, there should be a .flowconfig file, change it into:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
[include]
[libs]
./flowLibs.js
[lints]
[options]
unsafe.enable_getters_and_setters=true
6.Create a js file “flowLibs.js” in project root, if npm run flow check cause any error like “Module_Name. Required module not found”. You should write down a code in flowLibs.js like below:
declare module 'Module_Name' { declare var exports: any; };
add scalesPageToFit = {false} in WebView jsx node.
Do the link manually and check if you are using Cocoapods or you have a pod file in your project. If you do, use .xworkspace to build the app not .xcodeproj.
If you are not using Cocoapods and there is a pod file in your project, just delete it.