DEV Community

Cover image for 13 Most Asked React Native Questions
Truemark Technology profile image KiranPoudel98
KiranPoudel98 for Truemark Technology

Posted on • Originally published at thedevpost.com

13 Most Asked React Native Questions

#reactnative

React Native is a framework created by Facebook that is used for building native apps using React. It is mainly used for developing applications for Android, iOS, and Web. It an open-source framework. So, today we will be checking out the 13 most asked React Native questions.

13 Most Asked React Native Questions

1. What is the difference between React Native and React?

Answer:

ReactJS is a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications. React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood. Both follow the JSX syntax extension to JavaScript. Both are open-sourced by Facebook.

2. What is the difference between using constructor vs getInitialState in React / React Native?

Answer:

The two approaches are not interchangeable. You should initialize state in the constructor when using ES6 classes, and define the getInitialState method when using React.createClass. See the official React doc on the subject of ES6 classes.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}
Enter fullscreen mode Exit fullscreen mode

is equivalent to

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});
Enter fullscreen mode Exit fullscreen mode

3. How to fix error while running React Native app from terminal (iOS)?

Answer:

You can check out this link (Running react-native run-ios occurs an error?). It appears to be a problem with the location of Command line tools. In Xcode, select the Xcode menu, then Preferences, then Locations tab. Select your Xcode version from the dropdown and exit Xcode.

Alt Text

Alternative Answer:

You may need to install or set the location of the Xcode Command Line Tools.

Via command line

If you have Xcode downloaded you can run the following to set the path:

sudo xcode-select -s /Applications/Xcode.app
Enter fullscreen mode Exit fullscreen mode

If the command line tools haven’t been installed yet, you may need to run this first:

xcode-select --install
Enter fullscreen mode Exit fullscreen mode

You may need to accept the Xcode license before installing command-line tools:

sudo xcodebuild -license accept

4. How to fix error “Unable to load script from assets index.android.bundle” on Windows?

Answer:

This issue will help you to resolve the problem in the following steps.

  • (in the project directory) mkdir android/app/src/main/assets
  • react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
  • react-native run-android

You can automate the above steps by placing them in scripts part of package.json like this:

"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"
Enter fullscreen mode Exit fullscreen mode

Then you can just execute npm run android-linux from your command line every time.

Alternative Answer:

If You are running your application on a physical device and getting this error

unable to load script from assets index.android.bundle
Enter fullscreen mode Exit fullscreen mode

try running the command:

adb reverse tcp:8081 tcp:8081
Enter fullscreen mode Exit fullscreen mode

5. How to fix error “React Native android build failed. SDK location not found”?

Answer:

  • Go to the android/ directory of your react-native project
  • Create a file called local.properties with this line: 
sdk.dir = /Users/USERNAME/Library/Android/sdk
Enter fullscreen mode Exit fullscreen mode

Where USERNAME is your macOS username.

Alternative Answer:

  • Go to your React-native Project -> Android
  • Create a file local.properties
  • Open the file
  • paste your Android SDK path like below
    • In Windows sdk.dir = C:\\Users\\USERNAME\\AppData\\Local\\Android\\sdk
    • In macOS sdk.dir = /Users/USERNAME/Library/Android/sdk
    • In Linux sdk.dir = /home/USERNAME/Android/Sdk

Replace USERNAME with your user name.

Now, Run the react-native run-android in your terminal.

6. How to hide keyboard in React Native?

Answer:

The problem with keyboard not dismissing gets more severe if you have keyboardType='numeric', as there is no way to dismiss it.

Replacing View with ScrollView is not a correct solution, as if you have multiple textInputs or buttons, tapping on them while the keyboard is up will only dismiss the keyboard.

The correct way is to encapsulate View with TouchableWithoutFeedback and calling Keyboard.dismiss().

You can now use ScrollView with keyboardShouldPersistTaps='handled' to only dismiss the keyboard when the tap is not handled by the children (ie. tapping on other textInputs or buttons) If you have

<View style={{flex: 1}}>
    <TextInput keyboardType='numeric'/>
</View>
Enter fullscreen mode Exit fullscreen mode

Change it to

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>
Enter fullscreen mode Exit fullscreen mode

or

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>
Enter fullscreen mode Exit fullscreen mode

You can also create a Higher Order Component to dismiss the keyboard.

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)
Enter fullscreen mode Exit fullscreen mode

Simply use it like this

...
render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}
Enter fullscreen mode Exit fullscreen mode

Note: The accessible={false} is required to make the input form continue to be accessible through VoiceOver.

Alternative Answer:

This got updated and documented. No more hidden tricks.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()
Enter fullscreen mode Exit fullscreen mode

https://github.com/facebook/react-native/pull/9925

7. How to fix error “Application has not been registered”?

Answer:

It is an error caused by not matching the 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.

Alternative Answer:

Most of the time 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

8. How to add icons to the React Native app?

Answer:

iOS Icons

  • Set AppIcon in Images.xcassets.
  • Add 9 different size icons:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

Images.xcassets will look like this:
Alt Text

Android Icons

  • Put ic_launcher.png in folders [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
    • 72*72 ic_launcher.png in mipmap-hdpi.
    • 48*48 ic_launcher.png in mipmap-mdpi.
    • 96*96 ic_launcher.png in mipmap-xhdpi.
    • 144*144 ic_launcher.png in mipmap-xxhdpi.
    • 192*192 ic_launcher.png in mipmap-xxxhdpi.

Update 2019 Android

The latest versions of React Native also supports the round icon. For this particular case, you have two choices:

a. Add round icons: In each mipmap folder, add additionally to the ic_launcher.png file also a round version called ic_launcher_round.png with the same size.

b. Remove round icons: Inside yourProjectFolder/android/app/src/main/AndroidManifest.xml remove the line android:roundIcon="@mipmap/ic_launcher_round"and save it.

Otherwise, the build throws an error.

9. How to combine multiple inline style objects?

Answer:

If you’re using React Native, you can use the array notation:

<View style={[styles.base, styles.background]} />
Enter fullscreen mode Exit fullscreen mode

Check out blog post about this in detail.

Alternative Answer:

You can use the spread operator:

<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button
Enter fullscreen mode Exit fullscreen mode

10. How to change the default iOS simulator device?

Answer:

Specify a simulator using the --simulator flag.

These are the available devices for iOS 12.0:

react-native run-ios --simulator="iPhone 5s"
react-native run-ios --simulator="iPhone 6"
react-native run-ios --simulator="iPhone 6 Plus"
react-native run-ios --simulator="iPhone 6s"
react-native run-ios --simulator="iPhone 6s Plus"
react-native run-ios --simulator="iPhone 7"
react-native run-ios --simulator="iPhone 7 Plus"
react-native run-ios --simulator="iPhone 8"
react-native run-ios --simulator="iPhone 8 Plus"
react-native run-ios --simulator="iPhone SE"
react-native run-ios --simulator="iPhone X"
react-native run-ios --simulator="iPhone XR"
react-native run-ios --simulator="iPhone Xs"
react-native run-ios --simulator="iPhone Xs Max"
react-native run-ios --simulator="iPad Air"
react-native run-ios --simulator="iPad Air 2"
react-native run-ios --simulator="iPad"
react-native run-ios --simulator="iPad Pro"
react-native run-ios --simulator="iPad Pro"
react-native run-ios --simulator="iPad Pro"
react-native run-ios --simulator="iPad Pro"
react-native run-ios --simulator="iPad"
Enter fullscreen mode Exit fullscreen mode

List all available iOS devices:

xcrun simctl list devices
Enter fullscreen mode Exit fullscreen mode

There is currently no way to set a default.

React Native Docs: Running On Simulator

Alternative Answer:

You can also use npm for this by adding an entry to the scripts element of your package.json file.

E.g.

"launch-ios": "react-native run-ios --simulator \"iPad Air 2\""
Enter fullscreen mode Exit fullscreen mode

Then to use this: npm run launch-ios

11. How to do logging in React Native?

Answer:

console.log works.

By default on iOS, it logs to the debug pane inside Xcode.

From the IOS simulator press (⌘+D) and press Remote JS Debugging. This will open a resource, http://localhost:8081/debugger-ui on the localhost. From there use Chrome Developer tools javascript console to view console.log.

Alternative Answer:

Use console.log, console.warn etc.

As of React Native 0.29, you can simply run the following to see logs in the console:

$ react-native log-ios
$ react-native log-android
Enter fullscreen mode Exit fullscreen mode

12. How to insert a line break into a component in React Native?

Answer:

This should do it:

<Text>
Hi~{"\n"}
this is a test message.
</Text>
Enter fullscreen mode Exit fullscreen mode

Alternative Answer:

You can also do:

<Text>{`
Hi~
this is a test message.
`}</Text>
Enter fullscreen mode Exit fullscreen mode

By doing this, you don’t have to insert stuff within the string; just wrap it once and it keeps all your line-breaks.

13. What is the difference between react-native-firebase and react-redux-firebase?

Answer:

Main difference:

  • react-redux-firebase – for using Firebase with Redux
  • react-native-firebase – for using Firebase JS API with react-native

react-redux-firebase actually supports using react-native-firebase. react-native-firebase provides the Firebase JS API while using native-modules under the hood, meaning you can provide that as your Firebase instance to react-redux-firebase like so:

import { compose, createStore } from 'redux';
import RNFirebase from 'react-native-firebase';
import { getFirebase, reactReduxFirebase } from 'react-redux-firebase';
import thunk from 'redux-thunk';
import makeRootReducer from './reducers';

const reactNativeFirebaseConfig = {
  debug: true
};

const reduxFirebaseConfig = {
  userProfile: 'users', // save users profiles to 'users' collection
};

export default (initialState = { firebase: {} }) => {
  // initialize firebase
  const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig);

  const store = createStore(
    makeRootReducer(),
    initialState,
    compose(
      reactReduxFirebase(firebase, reduxFirebaseConfig), // pass initialized react-native-firebase app instance
     // applyMiddleware can be placed here
    )
  );

  return store;
};
Enter fullscreen mode Exit fullscreen mode

This setup and more are covered in the react-native recipes section of the docs.

In Conclusion

These are the 13 most commonly asked React Native questions. If you have any suggestions or any confusion, please comment below. If you need any help, we will be glad to help you.

We, at Truemark, provide services like web and mobile app development, digital marketing, and website development. So, if you need any help and want to work with us, please feel free to contact us.

Hope this article helped you.

Original Source: DevPostbyTruemark

Top comments (0)

Read next

mdarifulhaque profile image

3123. Find Edges in Shortest Paths

MD ARIFUL HAQUE -

rksalo88 profile image

Learning AWS Day by Day — Day 60 — Amazon Elastic Kubernetes Service (EKS)

Saloni Singh -

mdarifulhaque profile image

2530. Maximal Score After Applying K Operations

MD ARIFUL HAQUE -

daffydanni__ profile image

Navigating the Rapids: A Junior Developer's Journey Through Challenges and Growth

Becon Daniel -