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
141,760
questions
925
votes
45
answers
424k
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
715
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.3k
709
votes
38
answers
454k
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 ...
- 8,089
652
votes
40
answers
1.1m
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,532
617
votes
37
answers
572k
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.7k
596
votes
35
answers
580k
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,961
478
votes
37
answers
529k
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.5k
472
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,361
426
votes
56
answers
439k
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,405
399
votes
10
answers
114k
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,363
373
votes
16
answers
353k
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
365
votes
6
answers
202k
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,144
358
votes
38
answers
493k
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,811
358
votes
17
answers
239k
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 ...
- 6,915
351
votes
12
answers
183k
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,543
347
votes
51
answers
333k
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,959
346
votes
71
answers
316k
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,501
344
votes
22
answers
517k
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.2k
329
votes
25
answers
378k
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,521
328
votes
22
answers
561k
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,722
324
votes
28
answers
478k
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.5k
313
votes
76
answers
256k
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,223
307
votes
10
answers
310k
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,357
304
votes
20
answers
291k
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,594
298
votes
14
answers
554k
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,287
296
votes
14
answers
187k
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,519
290
votes
12
answers
358k
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,155
286
votes
31
answers
270k
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
50
answers
218k
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
257
votes
12
answers
564k
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,500
255
votes
4
answers
450k
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,682
251
votes
10
answers
351k
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,065
244
votes
24
answers
287k
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,743
238
votes
42
answers
466k
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,815
233
votes
10
answers
372k
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.3k
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.7k
227
votes
20
answers
434k
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.7k
227
votes
5
answers
634k
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,256
219
votes
15
answers
325k
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,450
219
votes
19
answers
284k
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
215
votes
12
answers
249k
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.6k
215
votes
15
answers
285k
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 ...
- 5,008
215
votes
28
answers
252k
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,660
214
votes
22
answers
436k
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.5k
214
votes
16
answers
253k
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,193
213
votes
27
answers
428k
views
How to show SVG file on React Native?
I want to show svg files (I have bunch of svg images) but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I ...
- 3,314
212
votes
21
answers
234k
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.3k
212
votes
30
answers
426k
views
Hide/Show components in react native
I'm really new to React Native and I'm wondering how can I hide/show a component.
Here's my test case:
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input:...
- 8,098