Develop Reference

Why do I have so many problems refreshing code in Android emulator

So I have just started learning app development with React Native this past week and so I've been getting into using Android studio emulators to run my apps. I've noticed that when I run the apps on the emulator, it doesn't seem to refresh the code properly. For example I made this very simple app while following a tutorial:
import React from 'react';
import { Text, View, Platform } from 'react-native';
import {Button} from 'native-base';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><text>Hello World!</text></Button>
</View>
)
}
}
const styles = {
container: {
flex: 1,
marginTop: 24
}
}
But when I first created it, in the tutorial the instructor forgot to put the Text tag within the button, so when I ran the app I got an error of:
Text strings must be rendered within a <Text> component.
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4137:14 in <anonymous>
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4134:2 in createTextInstance
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15909:12 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
and it keeps going. Then in the tutorial the instructor noticed the mistake and fixed it by adding the tag in the button, but then when he does that, the app refreshed properly and displayed the button but for me I still get this same error. I've noticed this happening quite often with the Emulator, it doesnt like to refresh properly when opening a new app or altering one. I have deleted and recreated the emulator like 5 or more times now to test out different apps. Does anyone have a suggestion of how to fix this? Thanks in advance!

Change your <text> to <Text> as below.
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><Text>Hello World!</Text></Button>
</View>
Feel free for doubts.

I need to loop through a set of images and show them one after the other from react native

I am new to React native.
I have a set of images (1.png, 2.png, 3.png .... 20.png). I want to show these images from one after the other in a loop, so it will look like a video at the front end. I have tried some coding but failed. Can some body help me with this.
I wanted to create something like this:
class BasicStructure extends Component{
render(){
return()=>{
for (let i = 1; i < 20; i++) {
<Image source={require(`./assets/imageLoop/${i}.png`)}>
</Image>
}
}
}
}
But this is not working.

React Native does not allow dynamic paths to static image resources. See https://facebook.github.io/react-native/docs/images#static-image-resources
So you will need to require all of your images first.
Secondly you must return a single jsx element or a fragment from your render function, so if you want several image tags, wrap them in a <> </> fragment.
something like:
const images = [
require('./assets/imageLoop/1.png'),
require('./assets/imageLoop/2.png'),
...
require('./assets/imageLoop/19.png'),
];
class BasicStructure extends Component{
render(){
return (
<>
{images.map(img => <Image source={img} />)}
</>
);
}
}
This should get you close to your original code, but will not animate the images like a video. I would suggest opening another question for that if this solves the problem of at least rendering all of the images.

Follow the below link If you want to use multiple images in a single view.
https://www.npmjs.com/package/react-native-image-sequence
This may help you.

undefined is not an object (evaluating function) in React Native

Hi I'm new in react native and I'm working on a sample chat app.Currently I'm facing a basic problem of navigation. Any help is appreciated.
I need to navigate from chat list to chat screen on click. Im using android emulator using Android studio. For this I wrote the script. But Im getting error when I click on a right_arrow having onPress function defined in the following code,
onContactPress = (item) =>{
Alert.alert();
}
renderFlatListItem({item}) {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this.onContactPress(item)} >
<Image style={styles.rightArrow}
source={require('../../images/right_arrow.png')}/>
</TouchableOpacity>
</View>
)
}
and the the error is
undefined is not an object (evaluating '_this3.onContactPress()')
What I'm doing wrong here? Is there a way to pass the contact details of the selected person to the next screen? Please help me out.

This is in a React Class o functional component ?
In case of the 2nd call simply onContactPress without this, if your case is the first maybe you have a babel issue.

ok try this solution
change your onContactPress
from
onContactPress = (item) =>{
Alert.alert();
}
to
onContactPress({item}) {
Alert.alert();
}
because fat arrow functions should be defined outside the class

You probably have solved the issue by now. I'm new to React-Native myself and I came across your question after facing the same issue and I realized that the answer was in front of me all along.
Error Prone Script
I have a component with a state that contains an array of names created using the constructor method.
Ideally, when rendered this is the layout I was expecting on my Android device A list of User names and from there since I have assigned a key attribute and the value of the name's array index, when a user name is clicked I wanted to console.log(i), (i) being the index provided as a argument to the getValue() function in the onPress={} event listener.
But instead this is what I was getting the TypeError: undefined is not an object (evaluating 'this.getValues') error.
I tried reading docs, I googled, I looked at previously working codes, I did everything and nothing worked.
Nothing worked until I changed my renderName method from this
getValues(i){
console.log(i);
}
renderName(){
return this.state.names.map(function(name,i){
return (
<View>
<TouchableHighlight
key={i}
style={styles.viewName}
onPress={() => this.getValues(i)}>
<Text style={styles.name}>{name}</Text>
</TouchableHighlight>
</View>
)
})
}
To this
getValues(i){
console.log(i);
}
renderName(){
return this.state.names.map((name,i) => {
return (
<View>
<TouchableHighlight
key={i}
style={styles.viewName}
onPress={() => this.getValues(i)}>
<Text style={styles.name}>{name}</Text>
</TouchableHighlight>
</View>
)
})
}
The only difference is that I used a fat arrow function this.state.names.map((name,i) => { instead of the normal one this.state.names.map(function(name,i){
After making that change the results are what I was expecting Clicking a user name output the index associated with the name in the array
This may not solve your problem but I'll state it anyway through the following points
I caused my problem by trying to be too familiar with a Library I've basically just started learning.
Not every new error should make us panic, that's when we start asking bunch of questions rather than being calm enough to realize that the cause of the error is in front of us.
Experimenting with code is a good thing while you are learning but make sure that the code works as the tutorial instructs and that you fully understand it before you start making changes and playing around with it.

According to me you might be using Functional Component and in functional component you can call methods directly without using this. Just add const keyword outside the method and call without this keyword.

OnPress takes a function, instead, you're sending an encapsulated function.
Try this
onContactPress = (item) =>{
Alert.alert();
}
renderFlatListItem({item}) {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.onContactPress(item)} >
<Image style={styles.rightArrow}
source={require('../../images/right_arrow.png')}/>
</TouchableOpacity>
</View>
)
}

ReactNative TextInput in Android is not editable

Below is the simple code I have.
change(text) {
this.setState({text});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome, what is your name?
</Text>
<TextInput
style={{height: 40, width: 200}}
onChangeText={this.change.bind(this)}
value={this.state.text}
/>
</View>
);
}
It works as expected in iOS. In Android, it shows the Text and TextInput field. However anything I type in TextInput does not show up.
I have two questions basically.
First one is, what might be going wrong here?
Second and more important question is, how do I debug a problem like this? I used ReactNative debugger and put a breakpoint in change function, it doesn't get called.
I also checked the generated native code in anticipation to debug using Android Studio. Didn't see anything in the code there where I can possibly put a breakpoint.

If in case it helps someone - here is what I found.
I was running Android emulator with API level 25 (Nougat).
When I switched to API level 23 (Marshmallow) it started working.

When removing a View from render, it's background continues there on Android

I'm having a serious problem with React Native on Android.
Let's say I have the following render method:
render() {
let stuff = this.state.showStuff ? <Text style={styles.stuff}>Stuff</Text> : null
return (
<View>
{ stuff }
</View>
)
}
Really simple. If I want to hide the "Stuff", I just call:
this.setState({ showStuff: false })
This works fine on iOS, but on Android, if styles.stuff define a backgroundColor, the component will be re-rendered without the "stuff" content, but with it's background!
Now I have no idea on how to remove elements from my component, since this weird behavior broke how I used to think react native works.

I found out that react-native-searchbar was causing the issue on non-related views. Removing that component solved this and other non-related issues on my project.