How to fetch data from local JSON file on react native?

Since React Native 0.4.3 you can read your local JSON file like this:

const customData = require('./customData.json');

and then access customData like a normal JS object.

----

import sample from '../dbstore/sample1.json'

Redux example

Code tren https://stephengrider.github.io/JSPlaygrounds/

const reducer = (state = [], action) => {
 switch (action.type) {
    case 'split_string':
        return action.payload.split('')
    case 'add_character':
        return [...state, action.payload]
    default:
        return state;
 }
}


const store = Redux.createStore(reducer)
store.getState()


const action1 = {
 type: 'split_string',
  payload: 'abcd'
}
store.dispatch(action1)
store.getState()


const action2 = {
  type: 'add_character',
  payload: 'e'
}
store.dispatch(action2)
store.getState()

Output:

[]
{"type":"split_string","payload":"abcd"}
["a","b","c","d"]
{"type":"add_character","payload":"e"}
["a","b","c","d","e"]

Tổng quan redux

• action: là plain javascript object
• reducer: là javascript function
• input: state cần thay đổi, action
• output: state
• state: chứa trạng thái của hệ thống

state là read-only (chỉ đọc). muốn thay đổi state thì cần phải sử dụng action

Lỗi "unrecognized font family" khi dùng react-native-vector-icons

Cách xử lý:
google "unrecognized font family react-native-vector-icons" => không giải quyết được
google "react-native-vector-icons error" => mở rộng kết quả tìm kiếm

----
Giải pháp:

1. xoá node_modules
2. npm i
3. react-native link react-native-vector-icons
4. chạy lại packager
5. chạy lại simulator
6. ....
7. đến bao giờ hết lỗi

React-Native: Application has not been registered error

it is an error caused by not matching name of project and your registered component.

You have inited project with one name, i.e.

react-native init AwesomeApp

But in your index.ios.js file you register other component

AppRegistry.registerComponent('Bananas', () => Bananas);

When it must be

AppRegistry.registerComponent('AwesomeApp', () => Bananas);

Try to fix it.

---

Most of the times the problem is that you have another react-native start (i.e. React Native Packager) server running either on another terminal or another tab of TMUX (if you are using TMUX).

You need to find that process and close it, so after running react-native run-ios for instance, it will establish a new packager server that registered for that specific application.

Just find that process using:

ps aux | grep react-native

find the process id (PID) and kill the packager process using kill command (e.g. kill -9 [PID]). You should find the launchPackager.command app in macOS, not sure about the other operating systems.

Then try to run the run-ios (or android) again. You should be able to see the new path after running the new packager server, e.g.:

Looking for JS files in
   /Users/afshin/Desktop/awesome-app 

Reload a React Native app on an Android device manually via command line

Using the cmd line you can send a command to the Android device.

adb shell input text "RR"

This command tells the Android device to type the character "R" twice which is the React Native command to Reload on Android.

The adb shell command has many useful features many of which are described here:

ADB Shell Input Events

To open the developer menu:

adb shell input keyevent 82

Troubleshooting React Native Startup

For students enrolled in The Complete React Native and Redux Course and having trouble getting an app to start up in the emulator, the list of issues below may help. However, before looking at specific errors, make sure you have configured your development environment correctly. Check out Building Projects with Native Code in the Getting Started section of React Native's documentation.

This list will be updated with more issues and information, as needed

• [Linter] Error running ESLint
• No bundle URL present
• Print: Entry, ":CFBundleIdentifier", Does Not Exist
• transform.forEach is not a function
• Unable to resolve module /ReactComponentWithPureRenderMixin
• undefined is not an object (evaluating '_reactNative.ViewPropTypes.style')

[Linter] Error running ESLint

As of July 13, 2017, there is an issue with NPM version 5 that is causing libraries that eslint-config-rallycoding depends on to be installed in the incorrect directory. There should be an update to NPM that fixes this soon.

Solution 1:

Manually install the dependent libraries, specifying the correct version:
npm install eslint-plugin-react@6.10.3 eslint-plugin-jsx-a11y@2.2.3 eslint-plugin-import@1.16.0
Also, eslint-config-rallycoding requires version 3.X of ESLint, but this should have installed correctly. Finally, you may need to quit the test editor and reopen the project for the linter to work correctly.

Solution 2:

Use Yarn, instead of NPM, to install dependencies.

No bundle URL present

GitHub Issue if solutions do not work

Solution 1: iOS

Delete the build folder and rerun the project
rm -rf ios/build 
react-native run-ios

Solution 2: iOS

Open a second terminal window in the project directory and run npm start. Then in the first terminal window, run react-native run-ios.

Print: Entry, ":CFBundleIdentifier", Does Not Exist

GitHub Issue if solutions do not work

Solution 1:

Remove spaces from file or directory names.
Use/path/to/ReactNative/app1 instead of /path/to/React Native/app1.

Solution 2:

Make sure port 8081 is not already in use. On a Mac, run the following command to see if any processes are running on port 8081:
lsof -i :8081
If a process is running, terminate it using this command:
kill -9 <PID>
On Windows, follow these instructions.

Solution 3:

In the project directory, run the terminal command react-native upgrade. You can also use react-native-git-upgrade to do this.

Solution 4:

Specify a version of React Native when initializing a project: 
react-native init ProjectName --version 0.44.2

transform.forEach is not a function

GitHub Issue if solutions do not work

Solution 1:

Install the PropTypes library: 
npm install prop-types --save

Unable to resolve module /ReactComponentWithPureRenderMixin

In the course, this issue can occur when a version of React Native Router Flux (RNRF) is incompatible with a version of React Native

Solution 1:

Initialize the project using the same versions of React Native and RNRF used in the course:
react-native init manager --version 0.34.1 
npm install react-native-router-flux@3.35.0 --save

undefined is not an object (evaluating '_reactNative.ViewPropTypes.style')

In the course, this issue can occur when a newer version of React Native Router Flux (RNRF) is used with an older version of React Native

Solution 1:

Initialize the project using the same versions of React Native and RNRF used in the course:
react-native init manager --version 0.34.1 
npm install react-native-router-flux@3.35.0 --save