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';
Related
I am using your react-native Snap carousel, It works great, But I am trying to get data from API, It worked but It shows me total data in one card. How can i show it separately?
Here is the code:
List.js
mainExample () {
const { slider1ActiveSlide } = this.state;
return (
<View>
<Carousel
data={data}
/>
<Pagination
dotsLength={length}
/>
</View>
);
}
SliderEntry.js
return (
<TouchableOpacity
activeOpacity={1}
onPress={() => { alert(`You've clicked`); }}
>
<View>
{Title}
<Text
>
{available}
</Text>
</View>
</TouchableOpacity>
);
It's showing all fetched data in one card. Anyone Please help me!
This has absolutely nothing to do with the plugin itself.
Since you're already passing responseMsg._embedded.items to the Carousel, you should just leverage the prop data of your SliderEntry component instead of referencing it again and mapping it.
const { name, available } = data;
return (
<TouchableOpacity>
<Text>{ name }</Text>
<Text>{ available }</Text>
</<TouchableOpacity>
);
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.
Disclaimers:
Only can test on iPhone emulator atm.
React-Native 0.49
Mac OSX High Sierra
I want to create a modal which gets its props from a parent component.
As below:
const Modal = ({ showModal, closeModal }) => (
<Modal
animationType="slide"
transparent={false}
visible={showModal}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<View style={{marginTop: 22}}>
<Text>Hello World!</Text>
<TouchableHighlight onPress={() => closeModal() }>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</Modal>
);
This is the parent example:
<View>
<Modal
showModal={this.state.showModal}
closeModal={() => this.setState({ showModal: false })}
/>
<ScrollView>
{elements.map(element => {
return (
<Card key={element.id}>
<Badge onPress={() => this.setState({ showModal: true })>
<Text>Show</Text>
</Badge>
</Card>
);
})}
</ScrollView>
</View>
When I click the show modal button the modal pops-up as expected but when I click closeModal then the modal disappears and reappears again but this time I cannot interact with it, the UI seems as if it is frozen, I have to then restart the emulator.
If I copy and paste the code straight from the React-Native docs:
https://facebook.github.io/react-native/docs/modal.html
The modal works fine. It is a self-contained component though.
Any help/advice would be much appreciated.
Regards,
Emir
After painfully rebuilding the component from scratch I see there was a unsuspected culprit:
componentWillUpdate() {
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
LayoutAnimation.easeInEaseOut();
}
When I removed this code the modal worked fine but when I added it back it froze when I tried to close. This seems to be some animation conflict in iOS cant confirm for Android.
When I added a timeout of 1000ms the screen revealed a little more before it froze again.
So for now if someone has the same issue look for multiple animations being called.
Hope this helps someone, and if you have a better way of solving it please do let me know.
Regards,
Emir
This is a know issue and nothing to do with your code.
See here: https://github.com/facebook/react-native/issues/16895
Make sure that your <Modal/> is wrapped in a <View/>.
Very late, but issue still exist in latest version, And only solution i found is make different views in render method.
one for modal and one for other component.
render() {
if (showErrorModal) {
return (
<ModalError message={message} visible={showErrorModal} handleBack={this.handleBack} />
);
}
return (
<ScrollView style={{ flex: 1 }}>
<View style={{ padding: 10, paddingVertical: 20 }}>
{!active ? this.fieldlabel() : this.fieldSelect()}
</View>
// remove this one, do not use here. it will block the UI
{* <ModalError message={message} visible={showErrorModal} handleBack={this.handleBack} /> *}
</ScrollView>
);
}
}
Inside your Parent component, create a function will set showModal to false.
Parent
closeModal = () => {
this.setState({
showModal: false
});
}
Then you need to pass it down to your Modal, via props.
<Modal showModal={this.state.showModal} closeModal={this.closeModal} />
Inside of your Modal, change:
<TouchableHighlight onPress={() => this.closeModal() }>
To:
<TouchableHighlight onPress={closeModal}>
Why do u use this.closeModal()? Use the one u are getting from the props,i.e just closeModal().
<TouchableHighlight onPress={() => closeModal() }>
Given below code, react native complains
Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install".
But the same code works fine if I hardcode the image source path in require call.
Code not working: has a method call to determine icon name. Notice the require('../../images/'+imageIconNameFor(prediction.type) line.
const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
<View style={styles.predictionItem}>
<Image style={styles.predictionIcon} source={require('../../images/'+imageIconNameFor(prediction.type))}></Image>
</View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
return "Foo.png";
}
Code working: Instead of calling a method to determine icon name, if I hardcode the icon name in require call, it works fine. Notice the require('../../images/Foo.png') line.
const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
<View style={styles.predictionItem}>
<Image style={styles.predictionIcon} source={require('../../images/Foo.png')}></Image>
</View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
return "Foo.png";
}
Why is there a different behavior when I concatenate strings to build image source?
Why require('../../images/'+imageIconNameFor(prediction.type) fails to render image but require('../../images/Foo.png') works fine? Note that method call was not a problem. Error message contains the complete path of the image computed using the method call. In spite of the complete path, react native complained about missing module with require.
React native version is 0.37.0. I tested this on ios-simulator.
Unfortunately, this is how react-native packager works, the image name in require has to be known statically. Here is example from official docs:
// GOOD
<Image source={require('./my-icon.png')} />
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
make sure give some style like this
<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
style={{width: 400, height: 400}} />
EDIT: The image issue has been resolved, but still not sure about Linking.
Okay so I'm having two weird questions. And apologies ahead of time for the code.
First thing's first, some images will simply not display even though they're valid. When running this in my IOS simulator, the very first image will not display. But some images always work.
The second thing, and let me know if this should be two separate questions, is linking to an external site. It doesn't appear to be able to do the Linking.open in IOS. So I wondered what is the easiest way, through linking or otherwise, of simply opening an external URL in both android and IOS?
Thanks a lot!
openUrl(url) {
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.open(url);
} else {
console.log('nope :: ' + url);
}
}).catch(err => console.error('An error occurred', err));
// browser.open(url);
},
renderImage(event, index) {
if (this.state.showBox && this.state.boxIndex == index) {
return (
<View>
<TouchableHighlight onPress={()=>this._clickImage(event, index)}>
<Image source={{ uri: event.image }} style={[styles.image, this.calculatedSize(), this.getImageStyles(event.featured), { height: 100 }]} />
</TouchableHighlight>
<View style={{ flexDirection:'row', padding: 15 }}>
<Text style={styles.price}>{event.price}</Text>
<Text style={styles.time}>{event.time}</Text>
<TouchableHighlight onPress={()=>this.openUrl(event.website)}>
<Text style={styles.btn}>Website</Text>
</TouchableHighlight>
</View>
{renderif(event.venue)(
<TouchableHighlight onPress={()=>this.openUrl(event.venue)}>
<Text style={styles.btn}>Venue</Text>
</TouchableHighlight>
)}
</View>
)
} else {
return (
<View>
<TouchableHighlight onPress={()=>this._clickImage(event, index)}>
<Image source={{ uri: event.image }} style={[styles.image, this.calculatedSize(), this.getImageStyles(event.featured)]} />
</TouchableHighlight>
</View>
)
}
},
That's because some of your images are trying to load image from http connection.IOS apps require you to use https for images.
For example in this
{
title: 'test',
image: 'http://www.piedmontpark.org/images/bird_pine_warbler_330.jpg',
featured: true,
category: 'Music',
price: '$8.00',
time: '7:00 PM-11:00 PM',
venue: '',
website: 'http://google.com'
}
Your 'image' is trying to load a jpg from http.
Check this out on how to configure your info.plist to accept http