I am passing parameters from one page to another page. I am also passing a link (http://wwww.yahoo.com) to the resulting page along with other parameters. Below is the code of my source page:
<View style={styles.searchButton}>
<Button style={styles.searchButton}
title="Go to Details"
onPress={() => {
this.props.navigation.navigate('SearchSer', {
itemId: services[0].ser,
otherParam: services[0],
In the below code, I am trying to put the link in TouchableOpacity by reading the parameter. When I tried to open the link, I get an error saying "JSON parse error". Below is my code and screen shot of the error:
<View>
<Text style={styles.Address1}> {JSON.stringify(otherParam["Phone"])}</Text>
<TouchableOpacity onPress={() => Linking.openURL(JSON.parse(JSON.stringify(otherParam["destURL"]))) }>
<Text style={styles.underLineText}>Distance and Directions</Text>
</TouchableOpacity>
</View>
destURL is http://www.yahoo.com and it is coming from my JSON file.
any help will be highly appreciated.
Related
Can you explain the technical difference between the 2 following implementations and why one breaks and the other one works? Here's the target function:
loginWithEmail(){
this.props.navigation.navigate('LoginWithEmail');
}
The following onPress implementation will successfully call the loginWithEmail() function, but the following error is thrown within the loginWithEmail() function:
"this.props.navigation is undefined"
<View>
<TouchableOpacity onPress={this.loginWithEmail}>
<Text>
Log in with Email
</Text>
</TouchableOpacity>
</View>
However, if I wire up the onPress event handler function with an arrow function format like the following example, the loginWithEmail() function executes successfully without error:
<View>
<TouchableOpacity onPress={() => this.loginWithEmail()}>
<Text>
Log in with Email
</Text>
</TouchableOpacity>
</View>
Can you explain the technical difference between the 2 following implementations and why one breaks and the other one works? Does this have something to do with "closures"?
I am creating my first React-Native project and I intend to add a link in my views.
<TouchableOpacity
style={redditMain} >
<Image
source={ this.image }
style={img} />
<Text style={RedditList}>{this.text}</Text>
</TouchableOpacity>
I went through the React-Native docs which I am thinking talks about how we can achieve this and In that they have wrote this in their documentation
To start the corresponding activity for a link (web URL, email, contact etc.), call
Linking.openURL(url).catch(err => console.error('An error occurred', err));
So I changed my code accordingly to this
<TouchableOpacity
onPress={() => {Linking.openURL('http://www.google.com/')}}
style={redditMain} >
<Image
source={ this.image }
style={img}
/>
<Text style={RedditList}>{this.text}</Text>
</TouchableOpacity>
So whenever I click it starts throwing the following error
Linking is not defined
[Question:] How I can fix it?
import { Linking } from 'react-native';
I am parsing data from API, I want some part to show only when I click on the main part. I am first trying to alert it but it is showing null, however all other data is working, I am sure that item.description
is available but it is not working with onPress.
What I want to do is to that description only in last <Text> when someone press the item itself.
<FlatList
data={this.state.data.articles}
renderItem={
({item}) =>
<TouchableWithoutFeedback onPress={ () => { alert( item.description ) } }>
<View>
<Text style={styles.item}>{item.title}</Text>
<Text style={styles.source}> {item.source.name} </Text>
<Text> Description should be here and only showed when item clicked </Text>
</View>
</TouchableWithoutFeedback>
}
/>
I need help in displaying components like action button and search bar while fetching data from database. The components appear only after the data as been fetched successfully.
Is there a way to keep displaying the search and action component while fetching the data? And keep them visible after the data is fetched either successfully or not?
render() {
return (
<View style={styles.mainContent}>
<Item>
<Input style={styles.searchinput} placeholder="Search Deals" value={this.state.search} onChangeText={this.browse} />
</Item>
<ScrollView>
{deals.map(deal => (
<View style={styles.dealsContent} key={deal.id}>
....
</View>
))}
</ScrollView>
<View>
<TouchableHighlight style={styles.addButton}
underlayColor='#ff7043' onPress={() => { console.log('pressed') }}>
<Text style={{ fontSize: 50, color: 'white' }}>+</Text>
</TouchableHighlight>
</View>
</View>
);
}
U can use Threading. Create new thread where you will fetch data, and on main thread you can show buttons and other controls while fetching data. You can find more on google about threads and how to use them.
Simple question, I'm trying to get a link to open whenever the user presses a button, the relevant bits of code are:
_linkPressed: function(url){
LinkingIOS.openURL(url);
},
<View style={styles.contactBox}>
<TouchableHighlight
onPress = {()=> this._linkPressed('www.google.com')}
>
<View style={styles.contactRow}>
<Image
source={{uri: 'email.png'}}
resizeMode='contain'
style={styles.contactIcon} />
<Text style={styles.contactText}> Write with your questions </Text>
</View>
</TouchableHighlight>
</View>
But for some reason the link won't open in the simulator I tried changing the _linkPressed function to just log "google.com" to the console and that worked. But I can't seem to grok the LinkingIOS procedure.
Thanks!
You need to add http:// before the link url.
<TouchableHighlight onPress={()=> this._linkPressed('http://www.google.com')} >
Check out this example.