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.
124,807
questions
928votes
46answers
337kviews
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 ...
- 11k
685votes
10answers
226kviews
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?
- 49.8k
601votes
33answers
312kviews
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 ...
- 6,899
545votes
31answers
431kviews
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,451
525votes
35answers
669kviews
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 ...
- 5,262
448votes
14answers
123kviews
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,121
443votes
37answers
390kviews
How to do logging in React Native
How can I log a variable in React Native, like using console.log when developing for web?
- 15.2k
397votes
50answers
373kviews
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,115
389votes
25answers
303kviews
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 ...
- 11.5k
375votes
8answers
86kviews
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,093
331votes
14answers
188kviews
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,429
322votes
6answers
143kviews
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 ...
- 7,976
320votes
48answers
266kviews
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,679
301votes
18answers
380kviews
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....
- 10.3k
295votes
10answers
124kviews
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 ...
- 2,975
286votes
21answers
392kviews
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 ...
- 5,993
286votes
14answers
226kviews
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
280votes
23answers
288kviews
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,031
273votes
31answers
313kviews
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},
...
- 2,931
267votes
53answers
203kviews
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 ...
- 2,701
266votes
47answers
179kviews
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 ...
- 3,941
263votes
11answers
291kviews
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 ...
- 2,865
262votes
11answers
398kviews
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 ...
- 2,927
253votes
30answers
178kviews
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 ...
- 16.2k
250votes
12answers
133kviews
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 ...
- 5,095
245votes
63answers
151kviews
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.
- 2,543
239votes
23answers
294kviews
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,
...
- 17.1k
238votes
15answers
164kviews
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 ...
- 6,882
225votes
8answers
182kviews
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
- 2,537
219votes
14answers
310kviews
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 &...
- 28.5k
215votes
10answers
375kviews
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 ...
- 3,790
209votes
4answers
314kviews
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 (...
- 5,790
207votes
8answers
247kviews
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}...
- 4,567
207votes
20answers
193kviews
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,331
206votes
10answers
288kviews
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 ...
- 11.2k
206votes
26answers
128kviews
Android failed to load JS bundle
I'm trying to run AwesomeProject on my Nexus5 (android 5.1.1).
I'm able to build the project and install it on the device. But when I run it, I got a red screen saying
Unable to download JS bundle. ...
- 4,567
205votes
17answers
227kviews
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,331
201votes
27answers
154kviews
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,261
199votes
15answers
206kviews
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,538
194votes
33answers
138kviews
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 ...
- 6,069
192votes
31answers
326kviews
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,017
189votes
18answers
297kviews
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>
<...
- 28.5k
186votes
5answers
421kviews
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 ...
- 4,666