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