Questions tagged [react-native]

React Native is a JavaScript library used to build native mobile apps using React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere.

React Native is an open-source framework created by Facebook that lets you build mobile apps using only and some basic and . It uses the same design as React, letting you compose a rich mobile UI from declarative components.

React Native apps are not "mobile web apps" or "hybrid apps". They are real cross-platform mobile apps that are indistinguishable from apps built using or . is often used to bring clarity in development.

The idea behind React Native can best be captured by the slogan "Learn once, write anywhere", enabling developers to use the same development approach for both desktop/browser and mobile apps.

Technically React Native runs the JavaScript code for a React app in a background thread. Updates to the virtual DOM are collected, and all changes are sent through an API into the native portion of the app. By doing this, React Native avoids slowing down the FPS rate of the app by not making the app wait for unfinished JavaScript operations.

Resources


Related tags

133828 questions
337
votes
49 answers

How do you debug React Native?

How does one debug their React code with React Native while the app is running in app simulator?
McG
  • 4,859
  • 3
  • 18
  • 13
334
votes
22 answers

ReactNative: how to center text?

How to center Text in ReactNative both in horizontal and vertical? I have an example application in rnplay.org where justifyContent="center" and alignItems="center" is not working: https://rnplay.org/apps/AoxNKQ The text should being centered. And…
itinance
  • 11,711
  • 7
  • 58
  • 98
320
votes
64 answers

Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

react-native run-android command terminates by leaving a message in android simulator. The message is as follows: Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly…
Belle Solutions
  • 3,231
  • 2
  • 7
  • 4
317
votes
24 answers

React Native: How to select the next TextInput after pressing the "next" keyboard button?

I defined two TextInput fields as follows:
andreaswienes
  • 3,401
  • 2
  • 14
  • 10
312
votes
22 answers

How can I generate an apk that can run without server with react-native?

I've built my app, I can run it on my local emulator (and also on my android device within the same network by changing debug server). However, I want to build an APK that I can send to someone without access to the development server and I want…
Gokhan Sari
  • 7,185
  • 5
  • 34
  • 32
304
votes
23 answers

React native text going off my screen, refusing to wrap. What to do?

The following code can be found in this live example I've got the following react native element: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ …
SudoPlz
  • 20,996
  • 12
  • 82
  • 123
293
votes
18 answers

React Native Change Default iOS Simulator Device

When I run this command: react-native run-ios My app runs by default in the iPhone6 simulator device: Found Xcode project RN.xcodeproj Launching iPhone 6 (9.2)... How can I have the app run in a different simulator device (like iPhone5s) by…
Wonka
  • 8,244
  • 21
  • 73
  • 121
292
votes
67 answers

What is the meaning of 'No bundle URL present' in react-native?

When I run a react-native project, I get a error no bundle URL present , but I don't know what mistakes I do, I was very confused.
Yingch Xue
  • 3,013
  • 2
  • 9
  • 11
290
votes
14 answers

How do I "shake" an Android device within the Android emulator to bring up the dev menu to debug my React Native app

I am working on a cross-platform React Native mobile app. I am writing console.log statements as I develop. I want to see these logging statements in Chrome while I'm running the Android app in the default Android emulator. According to Facebook's…
Austin
  • 6,241
  • 5
  • 17
  • 12
288
votes
9 answers

How to have Ellipsis effect on Text

I'm having a long text in my app and I need to truncate it and add three dots to the end. How can I do that in React Native Text element? Thanks
Ran Yefet
  • 3,167
  • 3
  • 15
  • 12
284
votes
14 answers

ReactJS: Maximum update depth exceeded error

I am trying to toggle the state of a component in ReactJS but I get an error stating: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the…
Maja Okholm
  • 3,147
  • 2
  • 11
  • 17
283
votes
28 answers

Change package name for Android in React Native

I used react-native init MyApp to initialise a new React Native app. This created among others an Android project with the package com.myapp. What's the best way to change this package name, for example to: com.mycompany.myapp? I tried changing it…
mllm
  • 17,068
  • 15
  • 53
  • 64
283
votes
11 answers

100% width in React Native Flexbox

I have already read several flexbox tutorial, but I still cannot make this simple task to work. How can I make the red box to 100% width? Code: Welcome to React Natives …
franfran
  • 3,085
  • 2
  • 18
  • 11
274
votes
49 answers

React Native version mismatch

Getting the following message when I init a new project and then launch the Xcode emulator: React-Native Version Mismatch Javascript Version 0.50.1 Native version: 0.50.0 Make sure you have rebuilt the native code. ... Does anyone know what is…
Sam Rao
  • 4,361
  • 5
  • 19
  • 21
245
votes
12 answers

How to set background color of view transparent in React Native

This is the style of the view that i have used backCover: { position: 'absolute', marginTop: 20, top: 0, bottom: 0, left: 0, right: 0, } Currently it has a white background. I can change the backgroundColor as i want like '#343434' but…
JEROM JOY
  • 4,300
  • 3
  • 13
  • 14