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

Top 5 React-Native Courses for Mobile Application Developers

If you are a web developer who wants to go into the massive world of mobile app development but don’t want to spend time learning Java or Kotlin for Android development, or Objective C or Swift for iOS development, then React Native could be a great tool for you.

The React Native is an extension of React, a popular JavaScript framework to develop web applications, which allows you to build native Android and iOS applications in JavaScript.

Unlike Ionic and Cordova, which promote write once run everywhere but doesn’t offer you to create a native app, React Native does convert your code into native code, especially for GUI.

This means, instead of running your application in a web browser or WebView like ionic and Cordova, you get a chance to develop a native application for both Android and iOS in JavaScript.

This is a massive advantage for any JavaScript developer who wants to write the mobile application he has always dreamed about.

Along with Redux, React Native is becoming increasingly popular and turns out to be a valuable skill for your resume if you are looking for a job in mobile app development space as well.

React Native provides an excellent solution for developing apps on mobile in a fraction of the time it takes to make an equivalent iOS or Swift app.

5 Best Courses to learn React Native

If you have read my articles before, then you might know about my 3 points formula to learn a new technology or a framework.

That 3 point formula has helped me to learn many technologies in the past including Git, Spring, and Hibernate and now I am using this technique to learn Kotlin, Docker, and Data Science to upgrade my technical skills in 2018.

I generally start with a good online course, which helps me to understand the most important part and gain some hands-on experience with respect to setup and building simple applications.

To learn these new technologies, once I understand fundamentals, I read a book to get a more comprehensive coverage of all the concepts covered in the online course and something which has not been covered at all.

After completing the book and online course, I develop a real-world application to test my knowledge and fill the gaps in my learning.

This is where I learn most and I look back at the online course I joined and the book I had read whenever I need to learn more.

Anyway, let’s start with some of the best courses to learn React Native and start developing native mobile apps using JavaScript.

1. The Complete React Native and Redux Course

This is one of the best courses to learn React Native and Redux. It will get you up and running with React Native quickly, and teach you the core knowledge you need to understand and build React components for mobile devices.

The course starts with explaining the fundamentals of React, including JSX, props, state, and event handling, so even if you are not familiar with the React framework, you can start with React Native.

It will not only help you to understand React basics, but also the terminology and concepts of Redux, another popular JavaScript framework to build UI.

It will also help you to quickly build a prototype and deploy your own applications to the Apple and Google Play Stores.

In short, this is one of the most complete courses to learn React Native and Redux in a short time.

2. React Native: Advanced Concepts

This is another React Native course from the same author, Stephen Grider, who will show you how to master the advanced topics of React Native including animations, maps, notifications, navigation, and more.

The course will teach you the theory and practice of implementing complex animation systems and bootstrap your app using the new expo platform. You will also learn to have to navigate your user around using React-Navigation.

You will also learn how to authenticate your users using Facebook OAuth, engage your users with automated push notifications, enhance authentication flows in your app with one time passwords with Twilio, and increase your app’s reliability with offline data persistence.

In short, you can take this and the previous course by the same author to master React Native in one or two months.

3. React Native — The Practical Guide

This is another great course on React Native from Udemy. I really like how the author explained React Native to web developers: how it allows you to build awesome, native mobile apps using the same web technology we use to build awesome and responsive web applications.

In this course, you will learn how to create your own React Native apps, publish them to the Google Play Store and Apple App Store, and dive really deep into the React Native ecosystem.

You’ll also learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to animate React Native apps, how to navigate around, use maps and the camera, and so much more!

In short, this course is an interesting, practical, and hands-on course to learn React Native on your own.

4. Create Your First React Native App

This is a crash course in building your first React Native app in a weekend or less. If you are a curious developer who likes to do things rather than read and learn, then this course is for you.

This course is designed to get you up and running with React Native as quickly as possible while introducing you to the most important pieces of React Native development.

It’s not the end-all-be-all, but rather it’s designed to get you started fast while building a firm foundation.

In short, a right course for anyone wanting to get started with React Native or Developers looking for an alternative to their Cordova or Ionic based mobile applications.

5. Build an app in less than 1 hour using React Native

Sometimes, when I am really eager to dive into a technology, I just start building something with that and learn along the way.

This course follows that model, and it claims to teach React Native and its principles by building a tinder-like jokes app in quick time.

In this course you will learn React’s popular JSX markup language, combining HTML and Javascript and get quickly trained on breaking down large applications into much smaller component-based solutions that you can re-use throughout your code.

You will also learn about how ‘props’ and ‘state’ work, more importantly, understand what they exactly are, what they do, and why do you need them.

In short, this is one of the great courses to begin your journey into the beautiful world of mobile and app development.

Summing up the Courses

That’s all the information I have about some of the best courses to learn React Native and developing a mobile application for Android and iOS platforms using JavaScript.

React Native is an excellent framework which cuts down both learning and delivery time and allows you to quickly build and ship the dream app you always wanted to build.

Unlike Ionic and Cordova, it allows you to truly build a native app, which uses native GUI components.

In short, React Native is the fastest way to build native mobile apps for Android and iOS and trusted by big companies like Facebook, Instagram, Uber, Airbnb, and more. If you want to learn something new in 2018, then React Native is a good choice.