All Questions
Tagged with react-native javascript
34,111
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
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
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
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
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
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
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
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
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
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
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
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
210
votes
30
answers
191k
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,467
201
votes
16
answers
219k
views
How can I view network requests (for debugging) in React Native?
I'd like to view my network requests in React Native to help me debug - ideally in the 'Network' tab of Chrome's devtools.
There are some closed issues about this on GitHub (https://github.com/...
- 150k
189
votes
52
answers
244k
views
"Text strings must be rendered within a <Text> component"
I've upgraded from React Native 0.54 to 0.57 and my application has fallen over, due to using React Native elements.
I used the error functionality of TextInput components, which enabled props that ...
user5283119
188
votes
10
answers
248k
views
React-native view auto width by text inside
As far as I know, react-native stylesheet doesn't supports min-width/max-width property.
I have a view and text inside. The view in auto width doesn't resize by inherit text element.
How to fix that ...
- 4,499
185
votes
23
answers
337k
views
React Native fixed footer
I'm trying to create a react native app that looks like an existing web app. I have a fixed footer at bottom of the window. Does anyone have an idea how this can be achieved with react native?
In the ...
- 2,092
177
votes
26
answers
661k
views
How to clear react-native cache?
In react-native development, there are multiple caches used when the app is built:
React-native packager cache
Emulator cache
Java side cache (.gradle) folder (only in android)
npm cache (if relevant?...
- 20.2k
177
votes
29
answers
336k
views
What's the best way to add a full screen background image in React Native
I wanted to add a full-screen image to the View so I write this code
return (
<View style={styles.container}>
<Image source={require('image!egg')} style={styles.backgroundImage}/&...
- 1,996
169
votes
4
answers
27k
views
Custom navigation with Navigator component in React-Native
I’m exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator component.
The main app class renders navigator and inside ...
- 21.1k
160
votes
10
answers
224k
views
How to register event with useEffect hooks?
I am following a Udemy course on how to register events with hooks, the instructor gave the below code:
const [userText, setUserText] = useState('');
const handleUserKeyPress = event => {
...
- 12.7k
151
votes
17
answers
393k
views
if-else statement inside jsx: ReactJS
I need to change render function and run some sub render function when a specific state given,
For example:
render() {
return (
<View style={styles.container}>
if (...
- 1,999
150
votes
9
answers
245k
views
How to specify (optional) default props with TypeScript for stateless, functional React components?
I'm trying to create a stateless React component with optional props and defaultProps in Typescript (for a React Native project). This is trivial with vanilla JS, but I'm stumped as to how to achieve ...
- 6,291
145
votes
14
answers
280k
views
Getting all documents from one collection in Firestore
Hi I'm starting with javascript and react-native and I'm trying to figure out this problem for hours now. Can someone explain me how to get all the documents from firestore collection ?
I have been ...
- 1,881
143
votes
7
answers
330k
views
React Native Border Radius with background color
In React Native, borderRadius is working but the background color given to the button stays a square. What is going on here?
JS
<TouchableHighlight
style={styles.submit}
onPress={() => ...
- 4,771
142
votes
17
answers
201k
views
React Native - Image Require Module using Dynamic Names
I'm currently building a test app using React Native. The Image module thus far has been working fine.
For example, if I had an image named avatar, the below code snippet works fine.
<Image source={...
- 7,497
138
votes
10
answers
238k
views
"React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>
I have the following render method in my React Native code:
render() {
const {height, width} = Dimensions.get('window');
return (
<View style={styles.container}>
<Image
...
- 7,759
136
votes
10
answers
264k
views
Make view 80% width of parent in React Native
I'm creating a form in React Native and would like to make my TextInputs 80% of the screen width.
With HTML and ordinary CSS, this would be straightforward:
input {
display: block;
width: 80%...
- 150k
134
votes
24
answers
159k
views
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down
I have a component that makes use of Animated component from react native. I started writing a test case to simulate onPress of a component, which calls a function that has Animated.timing in it, and ...
- 4,884
133
votes
14
answers
113k
views
Is there a way to disable the Title and Subtitle in Highcharts?
I'm just going to hardcode it in using html that is around the graph, I don't want to use the built in.
I don't see a "disable: true" option in the API.
Can anybody help me out here.
How do ...
- 2,173
132
votes
2
answers
66k
views
import * as React from 'react'; vs import React from 'react';
I've noticed that React can be imported like this:
import * as React from 'react';
...or like this:
import React from 'react';
The first imports everything in the react module (see: Import an ...
- 45k
130
votes
16
answers
144k
views
How to align text input correctly in react native?
The Text input is center aligned, how to fix this text input so that it takes input from top left corner
Here is my css for text input:
/* The Text input is center aligned, how to fix this text ...
- 5,564
130
votes
1
answer
48k
views
How can I determine if my React Native app is a debug or release build from JavaScript code?
I'd like to add some debug-only UI to my React Native app, but I can't find any equivalent of RCT_DEBUG or RCT_DEV compile-time flags in the JavaScript environment. Is there one?
Use case: I want to ...
- 2,973
122
votes
3
answers
227k
views
Absolute and Flexbox in React Native
I would like to put a white bar which would take all of the width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters.
With the ...
- 6,009
120
votes
22
answers
333k
views
Image resizing in React Native
I am trying to resize an image (smaller to fit screen) in my react native app but am unable to do it as it is too big.
Here is the code:
'use strict';
var React = require('react-native');
var {
...
- 1,657
118
votes
14
answers
208k
views
How to set image width to be 100% and height to be auto in react native?
I am trying to display list of images in a scrollview. Width should be 100%, while height should be automatic, keeping aspect ratio.
The searches I did pointed to various solutions which give ...
- 1,393
117
votes
5
answers
155k
views
How to use border radius only for 1 corner (react-native)?
How to use border radius in React Native only for 1 corner?
I have a modal window
As you can see bottom corners not rounded, it happens when I used backgroundColor for buttons. I was trying to set ...
- 2,436
116
votes
16
answers
226k
views
Resetting the navigation stack for the home screen (React Navigation and React Native)
I've got a problem with the navigation of React Navigation and React Native. It is about resetting navigation and returning to the home screen.
I've build a StackNavigator inside of a DrawerNavigator,...
- 2,069
111
votes
9
answers
205k
views
React Native: Getting the position of an element
I am styling an Image component with flexbox to be in the center of the screen which works pretty well. Now I want a second Image component to be displayed directly on the top of the first one. The ...
- 2,051
107
votes
14
answers
257k
views
How can I put an icon inside a TextInput in React Native?
I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any ...
- 7,059
107
votes
8
answers
164k
views
How can I run background tasks in React Native?
I've built a little iOS app in React Native that does location tracking, sending the lat/lng regularly to a server of the user's choosing. However this only works when the app is in the foreground. ...
- 14.3k
106
votes
19
answers
142k
views
TypeError: cli.init is not a function for react native
While running npx react-native init appName in MacBook air M1 chip
TypeError: cli.init is not a function
at run (/opt/homebrew/lib/node_modules/react-native-cli/index.js:302:7)
at createProject (/opt/...
- 1,964
102
votes
28
answers
275k
views
Invariant Violation: "main" has not been registered
New to React Native:
I started a brand new project with Expo init and then I followed the instructions mentioned inhttps://reactnavigation.org/docs/hello-react-navigation
I run the project with expo ...
- 1,011
102
votes
7
answers
244k
views
How to use zIndex in react-native
I've want to achieve the following:
The following images are what I can do right now, but that's NOT what I want.
Sample of code I have right now:
renderA() {
return (
<View style={ ...
- 22.5k
101
votes
29
answers
166k
views
Close react native modal by clicking on overlay?
Is it possible to close react native modal by clicking on overlay when transparent option is true? Documentation doesn't provide anything about it. Is it possible?
- 2,291
97
votes
5
answers
69k
views
Storing non-state variables in functional components
Below are two React Components that do almost the same thing. One is a function; the other is a class. Each Component has an Animated.Value with an async listener that updates _foo on change. I need ...
- 1,997
96
votes
15
answers
78k
views
Setting a timer for a long period of time, i.e. multiple minutes
I want to use firebase auth with react native for Login and Signup but I got a yellow error:
Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue ...
- 8,796