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,673
questions
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
151
votes
4
answers
228k
views
Open Url in default web browser
I am new in react-native and i want to open url in default browser like Chrome in Android and iPhone both.
We open url via intent in Android same like functionality i want to achieve.
I have search ...
- 9,205
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
13
answers
68k
views
CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker":
I just updated to RN v0.62 and running app on iOS gives me following error
!] CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker":
In snapshot (Podfile.lock):
...
- 151
148
votes
26
answers
111k
views
`react-native run-ios` returns Error: Could not find iPhone X simulator
whenever I run react-native run-ios, I get
Could not find iPhone X simulator
Error: Could not find iPhone X simulator
at resolve (calendarPractice/node_modules/react-native/local-cli/runIOS/...
- 1,683
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
147
votes
40
answers
106k
views
Resource linking fails on lStar
I'm working on a React Native application. My Android builds began to fail in the CI environment (and locally) without any changes.
Execution failed for task ':app:processDevelopmentDebugResources'.
&...
- 1,343
147
votes
15
answers
193k
views
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle
I am receiving this warning message in my chrome console for my react-native project. Do you have any idea why I am getting this?
This is the complete message:
Require cycle: node_modules/react-...
- 7,808
146
votes
16
answers
197k
views
Screen width in React Native
How do I get screen width in React native?
I need it because I use some absolute components that overlap and their position on screen changes with different devices.
- 7,059
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
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
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
5
answers
85k
views
xcrun: error: SDK "iphoneos" cannot be located
I'm not experienced so I can't really pinpoint what is the problem. Thanks for the help.
I cloned this repo: https://github.com/flatlogic/react-native-starter.git
And was trying to follow the steps ...
- 5,769
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
142
votes
8
answers
22k
views
React Native - What is the benefit of using StyleSheet vs a plain object?
What exactly is the benefit of using StyleSheet.create() vs a plain object?
const styles = StyleSheet.create({
container: {
flex: 1
}
}
Vs.
const styles = {
container: {
flex: 1
}
}
- 2,714
141
votes
8
answers
217k
views
How to fetch data from local JSON file on react native?
How can I store local files such as JSON and then fetch the data from controller?
- 5,054
140
votes
47
answers
292k
views
Error:(23, 17) Failed to resolve: junit:junit:4.12
Why is it that every time I create a new project in Android Studio, it always comes up with:
Error:(23, 17) Failed to resolve: junit:junit:4.12?
When I remove testCompile 'junit:junit:4.12' in ...
- 1,486
139
votes
16
answers
231k
views
Failed to find Build Tools revision 23.0.1
I am trying to build my first app with react-native.
I am following these 2 tutorial:
https://facebook.github.io/react-native/docs/getting-started.html#content
https://facebook.github.io/react-...
- 1,659
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
139
votes
29
answers
274k
views
Module AppRegistry is not registered callable module (calling runApplication)
I am using native base for making app in react-native. I am new to both things. When I run the app It gives me this error:
Here is my code:
export default class Point extends Component {
render(...
- 3,130
138
votes
18
answers
211k
views
Getting "Cannot read property 'pickAlgorithm' of null" error in react native
I get an error when running npm install.
The error is:
npm ERR! Cannot read property 'pickAlgorithm' of null
npm ERR! A complete log of this run can be found in:
npm ERR! npm-cache\_logs\2021-10-...
- 1,831
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
9
answers
240k
views
How can I clean (reset cache) of React Native using Expo. Not sure if it is cache issue
I am building a simple React Native app with create-react-native-app using only react-navigation and base-64(base 64 encode/decode) as dependencies. Over time starting the app became slower and now ...
- 4,861
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
136
votes
18
answers
187k
views
How to navigate between different nested stacks in react navigation
The Goal
Using react navigation, navigate from a screen in a navigator to a screen in a different navigator.
More Detail
If I have the following Navigator structure:
Parent Navigator
Nested ...
- 1,833
134
votes
12
answers
171k
views
How to make phone call in React Native?
I want to call to the value of Text component when I press it. But, actually, I haven't enough knowledge for that.
Can you, please, tell me, which library or component should I use?
- 2,447
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
134
votes
4
answers
199k
views
Does 'position: absolute' conflict with Flexbox?
I want to make a div stick on the top of the screen without any influence to other elements, and its child element in the center.
.parent {
display: flex;
justify-content: center;
...
- 3,819
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
133
votes
14
answers
153k
views
How to launch and open email client React-native?
I do not want to compose an email. I just want to be able to launch the main email app on a user's device (iOS& Android) from a react-native app.
Scenario: I will send a verification email to ...
- 12.5k
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
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
129
votes
25
answers
88k
views
React-Native :java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so
I have just updated my project to use react-native version 0.60.2 . But when I am trying to run an application on Android device it gets crashed after launch screen. I got the following error logs :
...
- 7,318
128
votes
26
answers
84k
views
"RCTBundleURLProvider.h" file not found - AppDelegate.m
I am trying to run my React Native app in XCode and I keep getting this error. I cannot figure out how to resolve the issue. Any suggestions?
Screen Shot of Error in XCode:
- 1,283
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
126
votes
7
answers
422k
views
React Native: Possible unhandled promise rejection
I'm getting the following error:
Possible unhandled promise rejection (id:0: Network request failed)`
Here's the promise code, I don't see what's wrong here, any ideas?
return fetch(url)
....
- 4,510
125
votes
20
answers
122k
views
Unable to resolve module `@babel/runtime/helpers/interopRequireDefault`
When creating a new React Native project using the standard react-native init MyApp and running react-native run-ios for the first time, I'm seeing the following error :
error: bundling failed: Error: ...
- 3,107
125
votes
9
answers
260k
views
Does React Native styles support gradients?
I see that someone made this for it: https://github.com/brentvatne/react-native-linear-gradient
But is there support for it in RN itself? Something like
style = StyleSheet.create({
...
- 13.3k
124
votes
17
answers
169k
views
React Native Android Fetch failing on connection to local API
I'm using the fetch API in my react-native Android app to make requests to a local API. I usually query said API from react web apps at http://localhost:8163.
I'm testing my app on my physical device ...
- 1,395
123
votes
9
answers
113k
views
How to enable live reload in react native on android?
How can I enable live reload in the android emulator?
The documentation for android wasn't very helpful for a android noob.
- 15.6k
122
votes
36
answers
266k
views
How to get current route name in react-navigation?
I want the name of the current route or screen in react-navigation which I want to use inside if condition to make some changes.
- 1,585
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
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