I'm trying to make those cards clickable to redirect to another screen, but I cant figure it out
let cards = this.state.items.map(item => (
<Card key={item.id} onPress={() => Actions.dogScreen()}>
<CardItem bordered>
<Left>
<Thumbnail square source={item.image ? { uri: "data:image/jpeg;base64," + item.image } : logo} />
<Body>
<Text>Name: {item.name}, Age: {item.age}</Text>
<Text note>Gender: {item.gender.name} Race: {item.race.name}</Text>
</Body>
</Left>
</CardItem>
</Card>))
You can make <Card /> clickable by wrapping the whole card by TouchableOpacity. Also don't forget to add pointerEvents="none" for each card.
import { TouchableOpacity } from 'react-native';
let cards = this.state.items.map(item => (
<TouchableOpacity key={item.id} onPress={() => Actions.dogScreen()}>
<Card pointerEvents="none">
<CardItem bordered>
<Left>
<Thumbnail square source={item.image ? { uri: "data:image/jpeg;base64," + item.image } : logo} />
<Body>
<Text>Name: {item.name}, Age: {item.age}</Text>
<Text note>Gender: {item.gender.name} Race: {item.race.name}</Text>
</Body>
</Left>
</CardItem>
</Card>
</TouchableOpacity>
))
Related
I'm not sure why TouchableOpacity is not working in a map.
Here is my code:
<Content>
<Form>
<Header>
<Title>{concernName}</Title>
</Header>
{ values.map(value => (
<TouchableOpacity
key={value.id}
onPress={() => console.log('pressed')}
style={styles.touchable}>
<ListItem>
<CheckBox />
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</ListItem>
</TouchableOpacity>
)) }
</Form>
</Content>
To confirm the placement of the TouchableOpacity I've added the style:
touchable: {
width: '100%',
backgroundColor: '#e5edf9',
margin: 10,
height: 55
},
This produces the following:
When I click on the blue area, nothing happens. I get no error just nothing happens.
Any ideas what I'm doing wrong?
I ended up getting this to work by eliminating the TouchableOpacity. For some reason the TouchableOpacity wasn't working with a nested checkbox.
{ values.map(value => (
<ListItem key={value.id} onPress={ () => console.log('pressed') }>
<CheckBox checked={ this.activateCheckBox(item) }/>
<Body>
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</Body>
</ListItem>
)) }
With the above I can check the whole row and also check the checkbox.
Please check your import statement and make sure that your TouchableOpacity is imported from react-native and not from react-native-gesture-handler because the same thing happens when you import it from react-native-gesture-handler
In such case you can use TouchableOpacity from 'react-native-gesture-handler' package instead of 'react-native' package
you missed a pair of curly braces in onPress={() => console.log('pressed')}
it should be onPress={() => {console.log('pressed')}}
what you did is to just return a meaningless value(a function), you should actually call the function with help of curly braces.
Arrow function by default return the value at right side of the arrow, and execute the codes if it's wrapped with curly braces.
CheckBox interface extends Touchableopacity props in NativeBase.
So you can call onPress in Touchableopacity as below,
<Content>
<Form>
<Header>
<Title>{concernName}</Title>
</Header>
{values.map(value => (
<TouchableOpacity
key={value.id}
onPress={() => console.log('pressed')}
style={styles.touchable}>
{/* <ListItem>
<CheckBox />
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</ListItem> */}
</TouchableOpacity>
))}
</Form>
</Content>
Or you can pass onPress as a prop to CheckBox
<Content>
<Form>
<Header>
<Title>{concernName}</Title>
</Header>
{values.map(value => (
<TouchableOpacity
key={value.id}
style={styles.touchable}>
<ListItem>
<CheckBox onPress={() => console.log('pressed')} />
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</ListItem>
</TouchableOpacity>
))}
</Form>
</Content>
I am trying design like below image with react native.If anyone have worked like this modal design over the toolbar then please help me.
1
You will need a Modal with a embedded TouchableOpacity combined with some styling for positioning.
Please refer this
https://snack.expo.io/SJrDAC8Qr
render() {
return (
<>
<View>
<Appbar.Header>
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="search" onPress={() => this.setState({displayModal: true})} />
</Appbar.Header>
<View>
<Text>Main content!</Text>
</View>
</View>
{/*Modal code*/}
<Modal transparent={true} visible={this.state.displayModal}>
{/*Container .. clicking this closes the modal*/}
<TouchableOpacity style={{flex:1}} onPress={() => this.setState({displayModal:false})}>
<View style={{backgroundColor:'blue', position:'absolute', right:0, width:200, height: 200}}>
<Text style={{color:'#ffffff'}}>Hello World!</Text>
</View>
</TouchableOpacity>
</Modal>
</>
);
}
Not very nicely styled but I guess it does what you want
I am not able to identify how to display Menu items when clicked on Icon in React Native
Expo Link
Code
_onPressItem = () => {
this.setState({ opened: true });
};
render() {
return (
<View style={styles.container}>
<ListItem
title={
<View>
<Text style={{ fontWeight: "bold" }}>Mason Laon Roah</Text>
<Text>9886012345</Text>
</View>
}
subtitle={
<View>
<Text>445 Mount Eden Road, Mount Eden, Auckland. </Text>
<Text>Contact No: 134695584</Text>
</View>
}
leftAvatar={{ title: 'MD' }}
rightContentContainerStyle={{ alignSelf: 'flex-start'}}
rightTitle={<Icon type="material" color="red" name="more-vert" />}
/>
</View>
);
}
getMenuView() {
const { opened } = this.state;
return (
<MenuProvider style={{flexDirection: 'column', padding: 30}}>
<Menu
opened={opened}
onBackdropPress={() => this.onBackdropPress()}
onSelect={value => this.onOptionSelect(value)}>
<MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />
<MenuOptions>
<MenuOption value={1} text='One' />
<MenuOption value={2}>
<Text style={{color: 'red'}}>Two</Text>
</MenuOption>
<MenuOption value={3} disabled={true} text='Three' />
</MenuOptions>
</Menu>
</MenuProvider>
);
}
Please let me know how to integrate Menu with Icon..
Basically all the items are displayed in FlatList where each item have its own Menu Item
Just Update Code below:
instead of:
rightTitle={<Icon type="material" color="red" name="more-vert" />}
update to:
rightTitle={this.getMenuView()}
Because this Method returns view not Menu popup.
and instead of:
<MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />
update to:
<MenuTrigger onPress={() => this._onPressItem()}>
<Icon type="material" color="red" name="more-vert" />
</MenuTrigger>
so that instead of printing text, it shows icon.
I tried this code on your given link, it works..
I know there are already so many queries on this topic, I have tried every step but still won't be able to fix the issue.
Here is the code :
render() {
const {sContainer, sSearchBar} = styles;
if (this.props.InviteState.objectForDeleteList){
this.updateList(this.props.InviteState.objectForDeleteList);
}
return (
<View style={styles.mainContainer}>
<CustomNavBar
onBackPress={() => this.props.navigation.goBack()}
/>
<View
style={sContainer}
>
<ScrollView keyboardShouldPersistTaps="always">
<TextInput
underlineColorAndroid={'transparent'}
placeholder={'Search'}
placeholderTextColor={'white'}
selectionColor={Color.colorPrimaryDark}
style={sSearchBar}
onChangeText={(searchTerm) => this.setState({searchTerm})}
/>
</ScrollView>
{this.renderInviteUserList()}
</View>
</View>
);
}
renderInviteUserList() {
if (this.props.InviteState.inviteUsers.length > 0) {
return (
<SearchableFlatlist
searchProperty={'fullName'}
searchTerm={this.state.searchTerm}
data={this.props.InviteState.inviteUsers}
containerStyle={styles.listStyle}
renderItem={({item}) => this.renderItem(item)}
keyExtractor={(item) => item.id}
/>
);
}
return (
<View style={styles.emptyListContainer}>
<Text style={styles.noUserFoundText}>
{this.props.InviteState.noInviteUserFound}
</Text>
</View>
);
}
renderItem(item) {
return (
this.state.userData && this.state.userData.id !== item.id
?
<TouchableOpacity
style={styles.itemContainer}
onPress={() => this.onSelectUser(item)}>
<View style={styles.itemSubContainer}>
<Avatar
medium
rounded
source={
item.imageUrl === ''
? require('../../assets/user_image.png')
: {uri: item.imageUrl}
}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
<View style={styles.userNameContainer}>
<Text style={styles.userNameText} numberOfLines={1}>
{item.fullName}
</Text>
</View>
<CustomButton
style={{
flexWrap: 'wrap',
alignSelf: 'flex-end',
marginTop: 10,
marginBottom: 10,
width: 90,
}}
showIcon={false}
btnText={'Add'}
onPress={() => this.onClickSendInvitation(item)}
/>
</View>
</TouchableOpacity> : null
);
}
**I even tried with bellow code as suggested by #Nirmalsinh **:
<ScrollView keyboardShouldPersistTaps="always" style={sContainer}>
<CustomNavBar
onBackPress={() => this.props.navigation.goBack()}
/>
<TextInput underlineColorAndroid={'transparent'}
placeholder={'Search'}
placeholderTextColor={'white'}
selectionColor={Color.colorPrimaryDark}
style={sSearchBar}
onChangeText={(searchTerm) => this.setState({searchTerm})} />
{this.renderInviteUserList()}
</ScrollView>
I have followed this article:
https://medium.com/react-native-training/todays-react-native-tip-keyboard-issues-in-scrollview-8cfbeb92995b
I have tried with keyboardShouldPersistTaps=handled also but still, I have to tap twice on my Custom Button to perform an action. Can anybody tell me what I am doing wrong inside the code?
Thanks.
You need to add give value always in keyboardShouldPersistTaps to allow user tap without closing the keyboard.
keyboardShouldPersistTaps='always'
For example:
<ScrollView keyboardShouldPersistTaps='always'>
// Put your component
</ScrollView>
NOTE: Kindly put your tappable component inside the ScrollView. Otherwise it won't work.
You can use keyboardShouldPersistTaps='handled' in a ScrollView or Scrollables like FlatList SectionList etc. and embed a TouchableWithoutFeedBack to handle the case for dismiss on outside clicks.
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<ScrollView keyboardShouldPersistTaps='handled'>
// Rest of the content.
</ScrollView/>
</TouchableWithoutFeedback>
For FlatList and SectionList you will have to handle KeyBoard.dismiss separately.
Please try this, It's working for me, it will works you also, i hope it helps...
I am using the Rating Element from the react-native-elements component. I noticed I can't choose more/less than 3 stars for my rating and I do not understand why.
Here is my code:
<Modal animationType={"slide"} transparent={false}
visible={this.state.showModal}
onDismiss={() => this.openModal()}
onRequestClose={() => this.openModal()}>
<View style={styles.modal}>
<Text style={styles.modalTitle}>Rating</Text>
<Rating
showRating
type="star"
imageSize={30}
onFinishRating={this.ratingCompleted}
style={{ paddingVertical: 10 }}
/>
<View style={styles.btnView}>
<Button
onPress={() => { this.handleFormSubmit() }}
color="#512DA8"
title="Submit"
style={styles.formBtn}
/>
<Button
onPress={() => { this.openModal();
this.resetForm(); }}
color="gray"
title="Cancel"
/>
</View>
</View>
</Modal>
What am I doing wrong?
I recommand to use AirbnbRating instead of Rating because it work for me.
Example code :
import {AirbnbRating } from 'react-native-elements';
<AirbnbRating
count={11}
reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}
defaultRating={11}
size={20}
onFinishRating={rating => console.log(rating)}
/>
According to,
https://react-native-training.github.io/react-native-elements/docs/rating.html#ratingcount
you can use the prop ratingCount to set the number of rating images to display.
Try setting this to something other than 3.
Edit
Seems I misunderstood the query, please try setting readonly to false explicitly.
I would ask what do you have in function
onFinishRating={this.ratingCompleted}
I also used this component in my project and updated the state there:
<Rating
showRating
startingValue={4}
onFinishRating={rating => this.setState({ rating: rating })}
/>
Move the rating component in a function that returns the rating:
NOTE: this is a little bit strange, but it worked for me
Change your code like the following:
const RatingView=()=>{
return (
<Rating
showRating
type="star"
imageSize={30}
onFinishRating={this.ratingCompleted}
style={{ paddingVertical: 10 }}
/>
)
}
You Modal :
<Modal animationType={"slide"} transparent={false}
visible={this.state.showModal}
onDismiss={() => this.openModal()}
onRequestClose={() => this.openModal()}>
<View style={styles.modal}>
<Text style={styles.modalTitle}>Rating</Text>
<RatingView /> // Here ...
<View style={styles.btnView}>
<Button
onPress={() => { this.handleFormSubmit() }}
color="#512DA8"
title="Submit"
style={styles.formBtn}
/>
<Button
onPress={() => { this.openModal();
this.resetForm(); }}
color="gray"
title="Cancel"
/>
</View>
</View>
</Modal>