Installing Mobile Application

This section will help you walk through the minimum step by step to run Kindie mobile application


Inorder to do this step, please make sure all compatibility requirements were installed

After install all development OS at previous step, now you have to install some tools, dependencies to run the Kindie mobile app:

Step 1: Open mobile app project by Visual Studio Code:

Note: You can toogle terminal by hot keys Ctrl + `

Step 2: To install the React Native command-line utility, run the below command in your terminal:

npm install -g react-native-cli
React Native is an open-source mobile application framework created by Facebook.It is used to develop applications for Android, iOS, Web and UWPby enabling developers to use React along with native platform capabilities. You can refer full document about React Native here:

https://facebook.github.io/react-native/


Step 3: Install others npm Package Manager:

npm install

Step 4: Run the app
4.1 If you need to build for Android device:

react-native run-android

4.2 If you need to build for iOS device:

react-native run-ios

Note that for react-native run-android to work, you should have an open Android emulator or an Android device with USB Debugging enabled connected to your system via a USB cable.

If all goes well you should see the following screen on your iOS or Android emulator.

Common Error

SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
    at new RegExp ()
    at blacklist (D:\demo\app-kindie\node_modules\metro-config\src\defaults\blacklist.js:34:10)

It appears in \node_modules\metro-config\src\defaults\blacklist.js, there is an invalid regular expression that needed changed. You have to change the first expression under sharedBlacklist from:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

to

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Then you MUST clean project (go to android folder):

cd android
.\gradlew clean

go back working folder and build again:

cd ..
react native run-android

Here the issue from stackoverflow: https://stackoverflow.com/questions/58120990/how-to-resolve-the-error-on-react-native-start/58122821#58122821

Have fun!


Leave a Reply