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,761
questions
212
votes
39
answers
179k
views
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 ...
- 7,059
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
26
answers
138k
views
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. ...
- 5,065
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
203
votes
13
answers
268k
views
Run react-native application on iOS device directly from command line?
Is it possible to run react-native application on an iOS device directly from the command line like we do on simulator with react-native run ios --simulator "iPhone 5s"?
- 9,260
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
196
votes
10
answers
221k
views
How do I add an element to array in reducer of React native redux?
How do I add elements in my array arr[] of redux state in reducer?
I am doing this-
import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
arr:[]
}
export default function ...
- 2,625
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
194
votes
33
answers
434k
views
Generate SHA-1 for Flutter/React-Native/Android-Native app
I'm trying to generate a SHA-1 for a Flutter app, for Android studio to support Google Sign in, but I don't know how to do that, I saw some posts that indicate to run a command, but there I need a jks ...
- 13.2k
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
190
votes
14
answers
222k
views
React Native add bold or italics to single words in <Text> field
How do I make a single word in a Text field bold or italics? Kind of like this:
<Text>This is a sentence <b>with</b> one word in bold</Text>
If I create a new text field for ...
- 12.2k
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
187
votes
24
answers
358k
views
React Native TextInput that only accepts numeric characters
I need to have a React Native TextInput component that will only allow numeric characters (0 - 9) to be entered. I can set the keyboardType to numeric which almost gets me there for input except for ...
- 2,009
185
votes
10
answers
104k
views
spawnSync ./gradlew EACCES error when running react native project on emulator
I am trying to use
react-native run-android
to install my react-native application on an android studio emulator.
I have checked with abd-devices that the emulator is available, and I have ran ...
- 1,867
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
185
votes
35
answers
382k
views
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65
I've build a react-native application and suddenly I get this error message on my terminal during run of the command react-native run-ios.
The same code work fine 10 minutes ago and suddenly I get ...
- 1,993
184
votes
24
answers
164k
views
Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':react-native-linear-gradient:compileDebugJavaWithJavac'.
> Could not find tools.jar. Please check that /...
- 1,843
183
votes
25
answers
303k
views
Draw horizontal rule in React Native
I've tried react-native-hr package - doesn't work for me nor on Android nor on iOS.
Following code is also not suitable because it renders three dots at the end
<Text numberOfLines={1}}> ...
- 10.4k
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
22
answers
229k
views
Change App Name In React Native
I'm trying to figure out how to change a ReactNative app name.
The installed APK on my device is simply "App", with the Android icon.
How can I change this?
I've tried changing package.json and re-...
- 5,364
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
174
votes
13
answers
89k
views
React-Native, Android, Genymotion: ADB server didn't ACK
I am working with React-Native, Android, and Genymotion on Mac. When I run react-native run-android I get this lines at the end of the launch operation:
...
04:54:40 E/adb: error: could not install *...
- 7,167
170
votes
12
answers
154k
views
how to disable rotation in React Native?
I would like to support only portrait view. How can I make a React Native app not to autorotate?
I tried searching documentation and Github issues, but I didn't find anything helpful.
- 6,536
169
votes
32
answers
179k
views
React Native on Android: Cannot run program "node": error=2, No such file or directory
EDIT: I am uncertain which steps I took to resolve this problem, and am no longer seeing this error message so I cannot test the solutions below. Please try them individually as different answers seem ...
- 1,746
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
42
answers
308k
views
Could not connect to React Native development server on Android
When I run react-native run-android, it gives me the following error:
Could not connect to development server
Package server is running and I can access it directly from browser
on my mobile ...
- 2,581
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
166
votes
23
answers
456k
views
How to check the installed version of React-Native
I'm going to upgrade react-native but before I do, I need to know which version I'm upgrading from to see if there are any special notes about upgrading from my version.
How do I find the version of ...
- 2,775
163
votes
13
answers
85k
views
Basic FlatList code throws Warning - React Native
FlatList does not seem to be working. I get this warning.
VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.
Code:
<...
- 4,610
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
9
answers
222k
views
React Native absolute positioning horizontal centre
It seems that with position:absolute in use an element cannot be centred using justifyContent or alignItems. There's a workaround to use marginLeft but does not display the same for all devices even ...
- 12.2k
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
157k
views
React Native: View onPress does not work
I'm facing a weird problem. In my react native app, if I set onPress event to View it is not triggered but if I set the same to Text inside View, it fires. What am I missing here?
<View style={{...
- 16.3k
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
6
answers
192k
views
How can I make text vertical (rotated 90 deg) in react native?
How can I make <Text /> vertical (rotated 90 deg) in react native? I want to have some text on the right side of the page along the edge of the screen.
- 13.9k
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
160
votes
30
answers
298k
views
React-Native: Module AppRegistry is not a registered callable module
I'm currently trying to get the ES6 react-native-webpack-server running
on an Android emulator. The difference is I've upgraded my package.json and build.grade to use react 0.18.0, and am getting this ...
- 6,307
157
votes
9
answers
164k
views
How to update version number of react native app
I am using React native with Android. How can I update version number in the app? As I am getting this error.
I am generating file as per this url
https://facebook.github.io/react-native/docs/signed-...
- 1,953
156
votes
7
answers
78k
views
ES6, how can you export an imported module in a single line?
I'd like to the following but with a single line, if possible:
import Module from './Module/Module;'
export Module;
I tried the following but it doesn't seem to work:
export Module from './Module/...
- 3,720
155
votes
8
answers
195k
views
Hide scrollbar in FlatList (React Native) in Android
I am trying to use FlatList (React-native) in my app. I am using it horizontally and can see the scrollbar. There is an option in ScrollView to hide the scrollbar but not in FlatList. Has anyone been ...
- 1,994
154
votes
5
answers
100k
views
React-Native cannot write first letter with noncapital
I have some trouble with react-native. I have an Input component(like textfield) for user to enter his email address, but the thing is that, first letter always comes as capital letter default and it ...
- 2,967
154
votes
6
answers
285k
views
How do I make text bold, italic, or underline in React Native?
Surprisingly there isn't one question that groups these all together yet on Stack Overflow; there hasn't been an answer on SO for italics or underline, in fact, only this question for bold. I self-...
- 33.9k
154
votes
16
answers
254k
views
How to set default font family in React Native?
Is there an equivalent to this CSS in React Native, so that the app uses the same font everywhere ?
body {
font-family: 'Open Sans';
}
Applying it manually on every Text node seems overly ...
- 2,108
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
19
answers
166k
views
Is it possible to keep a ScrollView scrolled to the bottom?
For a chat-like app, I want to keep a ScrollView component scrolled to the bottom, because newest messages appear under the older ones. Can we adjust the scroll position of a ScrollView?
- 1,634