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

ReactJS is a JavaScript library, supporting both front end web and being run on the 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 (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

Both are open sourced by Facebook.

2. How do you debug React Native?

Debugging React Native Apps

To debug the javascript code of your react app do the following:

  1. Run your application in the iOS simulator.
  2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture
  3. Enable Pause On Caught Exceptions for a better debugging experience.
  4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
  5. You should now be able to debug as you normally would.

Optional

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React tab when the developer tools are open.

Live Reload

To activate Live Reload do the following:

  1. Run your application in the iOS simulator.
  2. Press Control + Command + Z.
  3. You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debuggingoptions.

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

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 */ };
  }
}

is equivalent to

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

4. Can I build Android apps with react native?

Yes.

React Native for Android was released September 14th, 2015.

Docs: http://facebook.github.io/react-native/

5. React Native fixed footer

Off the top of my head you could do this with a ScrollView. Your top-level container could be a flex container, inside that have a ScrollView at the top and your footer at the bottom. Then inside the ScrollView just put the rest of your app as normal.

6. React-Native, Android, Genymotion: ADB server didn’t ACK

After more research I’ve realized that Genymotion uses by default its own adb.

I switched to my main adb (the same used by react-native) and it solved the issue. I guess that because Genymotion’s adb was launched first I got the Address already in use error message.

7. iOS Launch screen in React Native

I was be able to solve the issue, with the help of this thread: Launch Image not showing up in iOS application (using Images.xcassets)

So I’m gonna explain it deeply in case it can help someone else.

First, you need to create certain images. What I used for that was this template and this webpage with an automatic generator: TiCons

When I downloaded my images, I took the ones inside assets/iphone folder, I only took those ones:

  • Default@2x.png (640×960)
  • Default-568h@2x.png (640×1136)
  • Default-667h@2x.png (750×1334)
  • Default-Portrait-736h@3x.png (1242×2208)
  • Default-Landscape-736h@3x.png (2208×1242)

Also you need this Contents.json file in the same folder, I got it from a friend:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

So, at this point I created a folder called LaunchImage.launchimage inside Images.xcassetsfolder in my React Native project and save the images and the Contents.json file inside it:

Second, you have to open your project in Xcode and in “General” settings, below “App icons and Launch Images” we have to leave the option “Launch Screen File” empty (also we can delete the LaunchScreen.xib file inside our project), and click in “Use Asset Catalog” after that. A modal will open, we choose to Migrate the catalog Images

Now, in the “Launch Images Source” selector, we can choose the folder we created before, LaunchImage (the one with our images):

We pick this instead of Brand Assets and we can delete Brand Assets folder.

At this point, we’ll be able to run our React Native application with our custom launch images:

I know it seems a little bit complex for an supposedly easy task, but after reading a lot about it this was the only way I could get my splash images working, so I wanted to share with the community.

Source:

https://stackoverflow.com/a/34641772

https://stackoverflow.com/q/29289304

https://stackoverflow.com/q/30668326

https://stackoverflow.com/q/35959350

https://stackoverflow.com/q/34027270

https://stackoverflow.com/q/29447715

https://stackoverflow.com/q/29287934