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>
)
}
Related
I am doing a dictionary app with lists of items like this:
acceptable, benevolent, big, charitable, considerate
fair, good, helpful, honest, hospitable
lavish, reasonable, thoughtful, tolerant, unselfish
Each item in the list is a link which leads to the similar list related to the word clicked.
I have two questions:
How to do it in React Native w/o falling into caring hands of React Native WebView? It's required to support styling (as in picture) and handling targeted clicks somehow.
Alternative solutions are welcome, including those built upon the WebView component. Just to consider performance side in here.
P.S. I have spotted alike functionality in the M.-W. dictionary app:
According to doc:
Text supports nesting, styling, and touch handling.
So I think the best solution is to properly nest your texts and pass them a function to handle the onPress action.
I will give an example code, not styled at all but completely stylable:
onPress = (text) => {
// do stuff
return
}
render() {
return (
<View style={styles.container}>
<Card>
<Text>
Synonyms:
{this.state.synonyms.map(synonym => {
return <Text onPress={() => this.onPress(synonym)}> {synonym} </Text>
})}
</Text>
</Card>
</View>
);
}
And here is a snack if you wanna take a look
This one's an interesting one.
I created a TextInput that takes a value, then lower cases it, adds it to state, and sets it as the default value. On my android physical device, if you force a capital letter ( autocapitalize is set to none), and then quickly tap other letters, it will duplicate and add extra text.
Is there a way to avoid this?
Here's a snack https://snack.expo.io/Hk1reKHJ4
Run it on your android or on the simulator, tap the upper case button on the keyboard, tap a few other letters, tap the upper case again, tap a few other letters, and you should set this error.
Thanks!
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
text: ''
}
}
render() {
return (
<View style={styles.container}>
<TextInput
style={ styles.inputContainer }
defaultValue={ this.state.text }
autoCapitalize="none"
onChangeText={ value => this.setState({
text: value.trim().toLowerCase()
})}
/>
</View>
);
}
}
add these three lines inside TextInput, it should fix the problem, original answer source
autoCapitalize="none"
secureTextEntry={true}
keyboardType={"visible-password"}
see my this answer for example
Unfortunately this is an issue that has been open for a couple of years with no solution, you can check this thread, no one found a solution. There is a temporary workaround until the React Native team fixes this bug as it seems to be taking too long, check it out here.
The autoCapitalize prop worked for me.
autoCapitalize="none"
I do not agree with the selected answer. The link provided in it worked for me.
secureTextEntry={Platform.OS === 'ios' ? false : true}
keyboardType={Platform.OS === 'ios' ? null : 'visible-password'}
autoCapitalize="characters"
https://github.com/facebook/react-native/issues/11068#issuecomment-586346549
I made this hack:
https://snack.expo.dev/#bzozoo/duplications-at-upper-or-lowercase-async-problem-solution
Unfortunately, it is quite a compromise solution.
Input is apparently slower due to the asynchronous function
I found a solution for this issue
add toLowercase() when you posting data
axios.post("api/login", { emailid: emailid.trim().toLowerCase()})
I am trying to navigate my first page to the second page by tapping a button.
Once we are at the second page, we will never go back by pressing back button.
Just tap, switch, and never go back.
Is there any simple way to do this?
I mean, I just don't want to use the component Navigation or Navigator. They are too complex.
I'm using React Navigation from guide of Facebook.
You can read more about this library from:
https://facebook.github.io/react-native/docs/navigation.html
Or react navigation's website:
https://reactnavigation.org/docs/intro/
Use this library to avoid the navigator. This is awesome
https://github.com/aksonov/react-native-router-flux
Once your scene keys are defined, you can navigate to them simply by calling Actions.keyname() on any screen
I don't know how complex your app is, but if it's really simple you can do it this way:
const setScreen = (screen) => {
setState({screen: screen})
}
render() {
<View>
{
switch(this.state.screen) {
case 'firstScreen': (
<View>
<Text>First Screen</Text>
<TouchableHighlight onPress={this.setScreen('secondScreen')}>
<Text>Go to second screen</Text>
</TouchableHighlight>
</View>
)
case 'secondScreen': (
<View>
<Text>Second Screen</Text>
<TouchableHighlight onPress={this.setScreen('firstScreen')}>
<Text>Go to first screen</Text>
</TouchableHighlight>
</View>
)
}
}
</View>
}
This mainly happens when we try to install a new package in our project and it does not get installed properly. I resolved this by
Delete android/app/build/intermediates/signing_config/debug/out/signing-config.json file.
Run yarn in the project root path.
i am using the React Native Picker and I am having problems on loading the picker values on Android.
This is my component code:
render() {
return (
<View style={styles.pickerContainer}>
<Picker
style={{width: 100}}
selectedValue={"10"}
mode="dialog">
{this._renderPickItems()}
</Picker>
</View>
)
}
_renderPickItems() {
const PickerItem = Picker.Item
return this.state.minutesList.map((value) => (
<PickerItem label={`${value} min`} value={value} key={`minutes_${value}`} />
))
}
When I run my app on Android, the elements of the Picker are not being shown on the screen for some reason (minutesList is an Array of numbers), in the other hand if I ran the same code on iOS, the items are being shown correctly.
Another thing is if I add Picker.Item directly into the Picker (like the Picker doc example) it works like expected, but i do not want to add 99 lines for each element.
Why the function returing the Picker.Items works on iOS and not Android? Maybe there is something basic missing and I do not know what it is.
Some images on the problem:
iOS works like expected
Thanks for the help.
this issue is older, but i'll aswner to help someone that have this same problem and see this question.
I my case, inside the function _renderPickItems() i created a array and for each Picker.Item i create, i put inside of array and the last i returned array.
Works fine to me.
I am trying to implement the solution proposed here for setting the focus on the next TextInput. The solution is proposed for iOS but I think it should also work for Android.
However I am getting the following exception:
undefined is not a function (evaluating '_this3.refs.Second.focus()')
I am using this Floating Label as my Text Input component. Here is my code:
<FloatingLabel
label='First'
ref='First'
validationRegex={/[A-Za-z0-9 ]+/}
value={this.props.First}
style={commonStyles.formInput}
onSubmitEditing={(event) => {this.refs.Second.focus()}}
onChangeText={(text) => this.onUpdate('First', text)}>
First</FloatingLabel>
<FloatingLabel
label='Second'
ref='Second'
style={commonStyles.formInput}
value={this.props.Second}
validationRegex={/(^([a-zA-Z]{5})([0-9]{4})([a-zA-Z]{1})$)/}
onChangeText={(text) => this.onUpdate('Second', text)}>
Second</FloatingLabel>
Can somebody help me in solving the exception? (RN 0.29, Android)
onSubmitEditing={(event) => {console.log(this.refs.Second)}} //works fine
Why am I unable to call the focus method?
this.refs.Second is a FloatingLabel object which don't have a method named "focus".
You can add a focus function to FloatingLabel component like below:
focus() {
this.refs.textInput.focus();
},
and add a ref to the TextInput in render
<View style={elementStyles}>
{this._renderLabel()}
<TextInput
ref={'textInput'}
{...props}
>
</TextInput>
</View>