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.
140,966
questions
925
votes
45
answers
419k
views
What is the difference between React Native and React?
I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. React and React Native seems ...
- 11.4k
714
votes
8
answers
232k
views
What is the difference between using constructor vs getInitialState in React / React Native?
I've seen both used interchangeably.
What are the main use cases for both? Are there advantages / disadvantages? Is one a better practice?
- 53.1k
699
votes
38
answers
443k
views
Hide keyboard in react-native
If I tap onto a textinput, I want to be able to tap somewhere else in order to dismiss the keyboard again (not the return key though). I haven't found the slightest piece of information concerning ...
- 7,959
643
votes
40
answers
1.0m
views
How can I insert a line break into a <Text> component in React Native?
I want to insert a new line (like \r\n, <br />) in a Text component in React Native.
If I have:
<text>
<br />
Hi~<br />
this is a test message.<br />
</text>
Then ...
- 6,442
611
votes
35
answers
552k
views
React Native Error: ENOSPC: System limit for number of file watchers reached
I have setup a new blank react native app.
After installing few node modules I got this error.
Running application on PGN518.
internal/fs/watchers.js:173
throw error;
^
Error: ENOSPC: System ...
- 14.6k
593
votes
35
answers
565k
views
React Native android build failed. SDK location not found
I have error when i start running android
What went wrong:
A problem occurred evaluating project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or ...
- 5,931
476
votes
37
answers
519k
views
How to do logging in React Native
How can I log a variable in React Native, like using console.log when developing for web?
- 16.4k
469
votes
17
answers
141k
views
Error Running React Native App From Terminal (iOS)
I am following the tutorial on the official React Native website.
Using the following to build my project:
react-native run-ios
I get the error:
Found Xcode project TestProject.xcodeproj
xcrun: ...
- 5,331
424
votes
53
answers
434k
views
Unable to load script from assets index.android.bundle on windows
I'm trying to run my first React Native project for first time on my device (Android 4.2.2).
And I get:
unable to load script from assets index.android.bundle
Commands that I used:
cd (project ...
- 4,385
397
votes
10
answers
110k
views
What is the difference between Hot Reloading and Live Reloading in React Native?
I'm a bit confused here. When I'm debugging a React Native Application, I usually enable both Hot Reloading and Live Reloading. I want to know what is the difference between them?
- 4,343
367
votes
16
answers
343k
views
How to use comments in React
How can I use comments inside the render method in a React component?
I have the following component:
'use strict';
var React = require('react'),
Button = require('./button'),
UnorderedList = ...
user1177440
363
votes
6
answers
197k
views
What are my options for storing data when using React Native? (iOS and Android) [closed]
I am still new in the React Native world, and generally in the mobile/native world as well, and I am finding the documentation a bit lacking when it comes to data persistence.
What are my options for ...
- 9,074
359
votes
17
answers
235k
views
How to add icons to React Native app
I am making a React Native app. I would like to customize the app icon (meaning the icon that you click on to start the app). I have Googled this, but I keep finding different types of icons that ...
- 7,105
357
votes
38
answers
484k
views
Hide header in stack navigator React navigation
I'm trying to switch screens using both stack and tab navigator.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
...
- 3,801
350
votes
12
answers
179k
views
What is the difference between Expo and React Native?
From the Expo website
Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript.
Isn't this what React Native does? What's the ...
- 3,533
342
votes
22
answers
510k
views
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:
...
- 12.1k
342
votes
50
answers
329k
views
How do you debug React Native?
How does one debug their React code with React Native while the app is running in app simulator?
- 4,909
336
votes
70
answers
307k
views
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 ...
- 3,401
325
votes
25
answers
372k
views
React Native: How to select the next TextInput after pressing the "next" keyboard button?
I defined two TextInput fields as follows:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {...
- 3,481
322
votes
22
answers
545k
views
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 ...
- 7,603
320
votes
25
answers
464k
views
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,
...
- 22.2k
309
votes
75
answers
243k
views
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.
- 3,183
306
votes
10
answers
300k
views
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
- 3,347
302
votes
20
answers
283k
views
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 ...
- 8,504
295
votes
14
answers
542k
views
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 ...
- 3,257
293
votes
14
answers
182k
views
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 ...
- 6,449
289
votes
11
answers
354k
views
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:
<View style={styles.container}>
<Text ...
- 3,145
287
votes
30
answers
263k
views
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 ...
- 17.2k
276
votes
49
answers
215k
views
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 ...
- 4,481
253
votes
12
answers
549k
views
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 ...
- 4,440
249
votes
4
answers
437k
views
Axios get in url works but with second parameter as object it doesn't
I'm trying to send GET request as second parameter but it doesn't work while it does as url.
This works, $_GET['naam'] returns test:
export function saveScore(naam, score) {
return function (...
- 6,592
249
votes
9
answers
345k
views
Get size of a View in React Native
Is it possible to get the size (width and height) of a certain view? For example, I have a view showing the progress:
<View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}...
- 5,045
243
votes
24
answers
280k
views
Setting environment variable in react-native?
I am using react-native to build a cross-platform app, but I do not know how to set the environment variable so that I can have different constants for different environments.
Example:
development:
...
- 3,723
232
votes
41
answers
454k
views
React Native fetch() Network Request Failed
When I create a brand new project using react-native init (RN version 0.29.1) and put a fetch in the render method to the public facebook demo movie API, it throws a Network Request Failed. There is a ...
- 4,735
232
votes
14
answers
344k
views
What is useState() in React?
I am currently learning hooks concept in React and trying to understand below example.
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call &...
- 33.3k
231
votes
10
answers
368k
views
How can you float: right in React Native?
I have an element that I want to float right, for example
<View style={{width: 300}}>
<Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>
How can the Text be ...
- 13.2k
227
votes
5
answers
620k
views
Using an authorization header with Fetch in React Native
I'm trying to use fetch in React Native to grab information from the Product Hunt API. I've obtained the proper Access Token and have saved it to State, but don't seem to be able to pass it along ...
- 5,246
222
votes
20
answers
426k
views
How can I force a component to re-render with hooks in React?
Considering below hooks example
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<...
- 33.3k
219
votes
19
answers
280k
views
Build and Install unsigned apk on device without the development server?
As I am new in react-native so if there is anything wrong in steps let me know.
I have build a react native android app using the command as per documentation
react-native android
while running ...
- 2,471
217
votes
15
answers
316k
views
How do you style a TextInput in react native for password input
I have a TextInput. Instead of showing the actual text entered, when the user enters text I want it to show the password dots / asterisks (****) you typically see in apps when typing a password. How ...
- 6,390
215
votes
15
answers
280k
views
Disabling buttons on react native
I'm making an android app using react native and I've used TouchableOpacity component to create buttons.
I use a text input component to accept text from the user and the button should only be enabled ...
- 4,998
214
votes
22
answers
428k
views
react-native: command not found
I am getting -bash: react-native: command not found error while creating a react-native project.
Below are the additional info
1. brew --version
homebrew 0.9.9
2 brew info watchman
watchman `...
- 20.4k
214
votes
28
answers
244k
views
React Native: another VirtualizedList-backed container
After upgrading to React Native 0.61, I get a lot of warnings like this:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed ...
- 2,640
212
votes
12
answers
243k
views
NSPhotoLibraryUsageDescription key must be present in Info.plist to use camera roll
Recently I started to get this error:
NSPhotoLibraryUsageDescription key must be present in Info.plist to
use camera roll.
I am using React Native to build my app (I am not familiar with ios ...
- 11.5k
212
votes
39
answers
178k
views
error "Could not get BatchedBridge, make sure your bundle is packaged properly" on start of app
Trying to create a react-native project on Android 4.4.2 I get this error screen
and couldn't find any way to resolve it. I tried restarting packager, reconnecting device, even reinstalling react ...
- 7,019
211
votes
30
answers
187k
views
React-Native: Application has not been registered error
I am currently going through the React-Native tutorials. I began with the Getting Started tutorial, where I made a new react native project and successfully managed to run the project on my device.
I ...
- 2,477
211
votes
15
answers
249k
views
How does one Display a Hyperlink in React Native App?
How do I display a hyperlink in a React Native app?
e.g.
<a href="https://google.com>Google</a>
- 2,163
210
votes
21
answers
226k
views
How do you hide the warnings in React Native iOS simulator?
I just upgraded my React Native and now the iOS simulator has a bunch of warnings. Besides fixing them, how do I hide these warnings so that I can see what's underneath?
- 13.2k