Trying to figure out the syntax for inserting a variable in a function.
var SlidesArray = ['Slide0', 'Slide1'];
var Slides = SlidesArray[Math.floor(Math.random() * SlidesArray.length)];
<Text>{Slides}</Text>
<TouchableHighlight style={styles.button} onPress={() => { this.props.navigation.navigate('{Slides}'); }}>
<Text style={{ color: '#FFFFFF', fontSize: 18 }}>Get New Activity {Slides}</Text>
</TouchableHighlight>
When this renders, I see the value of {Slides} on the screen.
How to do I get that to work inside of
<TouchableHighlight style={styles.button} onPress={() => { this.props.navigation.navigate('{Slides}'); }}>
The goal here is to navigate to a random View from an array of Views.
onPress={() => { this.props.navigation.navigate({Slides}); }} did not work.
Try remove brackets and single quotes on both sides of Slides.
this.props.navigation.navigate(Slides);
Related
I want to avoid the onPress={() => onRequestClose()} function working inside the inner View in my react-native project.
While user click on the screen the (whatever the area) onPress={() => onRequestClose()} works, to avoid that I use View inside the 1st TouchableWithoutFeedback and inside the View component I added another TouchableWithoutFeedback. But this is not working.
I'm struggling to find the solution, Is there any method to resolve this matter.
My code as follows
<View style={styles.videoOverlayWrapper}>
<TouchableWithoutFeedback onPress={() => onRequestClose()} style={{width: '100%', height: '100%'}}>
<View><TouchableWithoutFeedback onPress={()=>{}}>{props.children}</TouchableWithoutFeedback></View>
</TouchableWithoutFeedback>
</View>
you can pass null in any onPress, as onPress={() => null} or onPress={null}
<View style={styles.videoOverlayWrapper}>
<TouchableWithoutFeedback onPress={() => null} style={{width: '100%', height: '100%'}}>
</View>
Displaying more than 200+ images in the flatlist and make the user to select or deselect by clicking an image. So, when the user is clicks a image, Need to show the check-circle icon on the image. Similarly, when the user is deselect the selected image, need to remove the icon. I got two arrays images[] and selectedImagesId[]. Whenever the user selects an image, the image id will be pushed into selectedImagesId array. By the way, Iam showing the icon if the rendered image id avaliable in the selectedImagesId. The problem here is, it takes so long to display or remove the icon.
<FlatList
data={props.images}
extraData={selectedImagesId}
initialNumToRender={10}
refreshing={true}
removeClippedSubviews={true}
maxToRenderPerBatch={1}
windowSize={7}
showsVerticalScrollIndicator={false}
numColumns={3}
keyExtractor={(item) => item.id.toString()}
renderItem={(itemData) => <RenderData itemData={itemData} />}
>
const RenderData = ({ itemData }) => (
<View>
<TouchableOpacity
activeOpacity={0.8}
style={{
width: width / 3.5,
height: height / 7,
padding: 2,
}}
onPress={() => {
console.log('pressed');
if (props.selectedImages.includes(itemData.item.uri)) {
const index = props.selectedImages.indexOf(itemData.item.uri);
if (index > -1) {
props.removeImageandId(index, itemData.item.id);
}
} else {
props.selectImageandId(itemData.item.uri, itemData.item.id);
}
}}>
<Image
style={{ width: '100%', height: '100%' }}
source={{
uri: itemData.item.uri,
}}
/>
{selectedImagesId.includes(itemData.item.id) && (
<AntDesign
name='checkcircle'
size={24}
color='white'
style={{ position: 'absolute', bottom: 5, right: 15 }}
/>
)}
</TouchableOpacity>
<Text style={{ backgroundColor: 'red', fontSize: 25 }}>
{render.current++}
</Text>
</View>
);
You can Refer This article
It will guide you on how to render Only particular selected components that change.
not the Whole flatList components.
so, that based Only selected particular component you can remove the icon. not whole flatList Re-render.
I use flipcard(show front - back) to show value but when I change value to show the new one,Flipcard don't back to the front. It still on same page(but value changed)
Example
data1:Front is "A" ,Back is "B"
data2:Front is "X" ,Back is "Y"
I flip A >> B ,Now on flipcard show "B" after that,I update value. Flipcard show "Y" it's not show "X",I have to flip again to "X" . But, I want to show the front of flipcard every new data. How can I do it?
Nextword() {
this.setState({ count: this.state.count + 1 });
}
render() {
return <View>
<View>
<CardFlip ref={(card) => this.card = card} >
<TouchableOpacity onPress={() => this.card.flip()}>
<Text>{this.state.info[this.state.count].item1}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.card.flip()} >
<Text>{this.state.info[this.state.count].item2}</Text>
</TouchableOpacity>
</CardFlip>
</View >
<View>
<Button title="PRESS1" onPress={this.Nextword.bind(this)}></Button>
</View>
According to the documentation example of react-native-card-flip I just give a style like this to CardFlip component:
style={{
width: 320,
height: 470,
}}
and fix the issue and card flipped.
below the entire code I try:
<View>
<CardFlip
style={{
width: 320,
height: 470,
}}
ref={(card) => (this.card = card)}>
<TouchableOpacity
onPress={() => this.card.flip()}
style={{height: 100, width: 100, backgroundColor: 'green'}}>
<Text>{this.state.info[this.state.count].item1}</Text>
</TouchableOpacity>
<TouchableOpacity
style={{height: 100, width: 100, backgroundColor: 'green'}}
onPress={() => this.card.flip()}>
<Text>{this.state.info[this.state.count].item2}</Text>
</TouchableOpacity>
</CardFlip>
</View>
see the documentation example here: https://github.com/lhandel/react-native-card-flip/blob/master/Example/App.js
I have an array arr of dictionary whose elements go like:
{url: 'https://stackoverflow.com/', picUrl: 'link to pic', ...}
I want to open the i-th link when the i-th image is clicked. My code goes as:
arr = this.example[key];
var arrayLength = arr.length;
for(var i = 0; i < arrayLength; i++) {
console.log(arr[i]);
console.log(arr[i].url);
var x = arr[i].url;
views.push(
<View>
<ImageBackground
source={{uri: arr[i].picUrl}}
style={{ width: '100%',aspectRatio: 1, height: undefined }}>
<TouchableOpacity
onPress={() => Linking.openURL(x)}
// or onPress={() => Linking.openURL(arr[i].url)}
style={{flex: 1}}>
</TouchableOpacity>
</ImageBackground>
.....
When I click the image, I get this error:
undefined is not an object (evaluating 'arr[i].url')
I then verified that arr[i] etc. aren't undefined by:
console.log(arr[i])
console.log(arr[i].url)
and got correct values ('https://stackoverflow.com/' for this example).
When I hardcode the value to 'https://stackoverflow.com/', everything seems to work fine, which means there is an issue with the line Linking.openURL(arr[i].url) only. What exactly? I don't know :(
I've been stuck at this issue for quite some time, saw a few posts related to this, but nothing help. Can someone help me resolve this issue? Thanks...
Update:
I changed onPress={() => Linking.openURL(arr[i].url)} to:
onPress={() => Alert.alert(arr[i])}
and I got a completely blank alert!
Then, I did:
var x = arr[i].url
and changed the earlier line to:
onPress={() => Linking.openURL(x)}
Now, for all of the images, the link is set to arr[length-1].url, that is, its equal to the value of the url of the very last image in the array!
You can first check if app can handle this URL using canOpenURL
<TouchableOpacity
onPress={() => Linking.canOpenURL(arr[i].url)
.then((supported) => {
if (!supported) {
console.log("Can't handle url: " + arr[i].url);
} else {
return Linking.openURL(arr[i].url);
}
})
.catch((err) => console.error('An error occurred', err));
}
style={{flex: 1}}>
<ImageBackground
source={{uri: arr[i].picUrl}}
style={{ width: '100%',aspectRatio: 1, height: undefined }}>
</ImageBackground>
</TouchableOpacity>
Update
Instead of for loop you can use map,
let views = arr.map(data => <View>
<ImageBackground
source={{uri: data.picUrl}}
style={{ width: '100%',aspectRatio: 1, height: undefined }}>
<TouchableOpacity
onPress={() => Linking.openURL(data.url)}
style={{flex: 1}}>
</TouchableOpacity>
</ImageBackground>
</View>
)
I put TouchableOpacity for onPress because View can not make it. When i gave TouchableOpacity onPress with navigation it stopped working. Why is not working? Help me please.
Code:
<TouchableOpacity style={{flex:2}}
activeOpacity={.7}
onPress={() => navigate('Articles', {
otherParam: rowData.article_title
})}>
<Image
source = {{ uri: rowData.mobile_image }}
style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4,
borderWidth:1,
borderColor:'#dddddd'}}
/>
<Text
style={styles.textOfArticle}
>
{rowData.article_title}
</Text>
</TouchableOpacity>
Firstly, TouchableOpacity must have only one child component. You are adding Image and Text components separately. They must be wrapped in a View.
Change it like this,
<TouchableOpacity style={{flex:2}}
activeOpacity={.7}
onPress={() => navigate('Articles', {
otherParam: rowData.article_title
})}>
<View>
<Image
source = {{ uri: rowData.mobile_image }}
style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4,
borderWidth:1,
borderColor:'#dddddd'}}
/>
<Text
style={styles.textOfArticle}
>
{rowData.article_title}
</Text>
</View>
</TouchableOpacity>