All Questions
Tagged with react-native reactjs
40,227
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
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
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
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
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
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
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
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
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
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
208
votes
9
answers
141k
views
Is using async componentDidMount() good?
Is using componentDidMount() as an async function good practice in React Native or should I avoid it?
I need to get some info from AsyncStorage when the component mounts, but the only way I know to ...
- 4,989
195
votes
15
answers
240k
views
React-Query: How to useQuery when button is clicked
I am new to this react-query library.
I know that when I want to fetch data, with this library I can do something like this:
const fetchData = async()=>{...}
// it starts fetching data from ...
- 42k
193
votes
29
answers
267k
views
Package signatures do not match the previously installed version
This my project: https://github.com/kenpeter/my_hak_news, which is a direct copy of https://github.com/grigio/HAgnostic-News.
Git clone https://github.com/kenpeter/my_hak_news, then run react-native ...
- 7,940
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
181
votes
7
answers
218k
views
How to create helper file full of functions in react native?
Though there is a similar question I am failing to create a file with multiple functions. Not sure if the method is already outdated or not as RN is evolving very fast. How to create global helper ...
- 7,190
180
votes
23
answers
191k
views
How to resolve the error on 'react-native start'
I just installed node.js & cli
installed node.js
installed react-native-cli
npm -g react-native-cli
And created a 'new project'.
react-native init new_project
and inside that 'new_project' ...
- 1,801
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
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
167
votes
22
answers
230k
views
Can I make dynamic styles in React Native?
Say I have a component with a render like this:
<View style={jewelStyle}></View>
Where jewelStyle =
{
borderRadius: 10,
backgroundColor: '#FFEFCC',
width: 20,
height: ...
- 2,756
167
votes
3
answers
231k
views
how to change jest mock function return value in each test?
I have a mock module like this in my component test file
jest.mock('../../../magic/index', () => ({
navigationEnabled: () => true,
guidanceEnabled: () => true
}));
these ...
- 3,676
166
votes
12
answers
293k
views
Get current scroll position of ScrollView in React Native
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native?
So something like:
<ScrollView
horizontal={true}
pagingEnabled={true}
...
- 1,685
162
votes
17
answers
293k
views
React Native Responsive Font Size
I would like to ask how react native handle or do the responsive font. For example in iphone 4s i Have fontSize: 14, while in iphone 6 I have fontSize: 18.
- 10.4k
161
votes
18
answers
137k
views
Unable to connect with remote debugger
I'm using React.JS and when I do react-native run-android (with my device plugged in) I see a blank page. When I shake the device and select Debug JS Remotely from the option list I see the following ...
- 6,667
161
votes
14
answers
59k
views
Can I build Android apps with react native?
The recently launched react native features just iOS app example and docs.
- 2,305
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
153
votes
12
answers
302k
views
How to make a rest post call from ReactJS code?
I am new to ReactJS and UI and I wanted to know how to make a simple REST based POST call from ReactJS code.
If there is any example present it would be really helpful.
- 1,637
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
149
votes
25
answers
196k
views
`React/RCTBridgeModule.h` file not found
Getting this error while building a react-native iOS app on xcode.
Started getting this error after npm install and rpm linking react-native-fs library. But after searching online for a solution, I ...
- 2,505
148
votes
7
answers
116k
views
Cannot add task 'wrapper' as a task with that name already exists
When installing 'react-native init AwesomeProject' I get this error when I run react-native run-android:
Could not determine java version from '11.0.1'.
A quick google suggests I need to update the ...
- 1,511
144
votes
5
answers
131k
views
When to use useImperativeHandle, useLayoutEffect, and useDebugValue
I cannot understand why the following useImperativeHandle, useLayoutEffect, and useDebugValue hooks are needed, can you give examples when they can be used, but not examples from the documentation ...
user11749073
139
votes
45
answers
154k
views
Print: Entry, ":CFBundleIdentifier", Does Not Exist
When I run react-native run-ios the build succeeds but I get the error below. I've checked all over the place but nothing seems to be working. Using sudo in front of the command does not help either. ...
- 2,038
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
134
votes
19
answers
360k
views
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
I built an app with ReactNative both for iOS and android with a ListView. When populating the listview with a valid datasource, the following warning is printed at the bottom of the screen:
Warning:...
- 18.9k
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
12
answers
147k
views
VirtualizedList: You have a large list that is slow to update
I use FlatList with large number of items. I get following alert from Expo XDE.
VirtualizedList: You have a large list that is slow to update - make
sure your renderItem function renders ...
- 1,663
128
votes
10
answers
83k
views
Invariant Violation: The navigation prop is missing for this navigator
I am receiving this message when I tried starting my react native app. Usually this kind of format works on other multi screen navigation yet somehow does not work in this case.
Here is the error:
...
- 1,464
126
votes
18
answers
377k
views
React Native Error - yarn' is not recognized as an internal or external command
I am not able to run the sample react Native AwesomeProject project.
Can anyone help? Below is the details.
C:\Users\dip\AwesomeProject>react-native run-android
'yarn' is not recognized as an ...
- 4,480
121
votes
31
answers
217k
views
Disable back button in react navigation
I'm using react native navigation (react-navigation) StackNavigator.
it starts from the Login page throughout the whole lifecycle of the app. I don't want to have a back option, returning to the ...
- 1,640
121
votes
8
answers
172k
views
What is the quickest way to convert a React app to React Native? [closed]
This may be a naive question, but I couldn't find too much information on this topic.
I have a fully functional react-redux application and I would now like to port it to iOS and Android. I have no ...
- 1,581
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