I have a notes input that is multilined. Currently when I press return it goes to the next line and when I tap on a part of the screen that isn't a keyboard nothing happens. So it's just stuck right now and i have to reload the app. I have tried the keyboard dismissal and it still isn't working. This is a child component so maybe that is the issue?
My code:
render() {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss()}> //also tried () => Keyboard.dismiss()
<Modal transparent animationType='fade' visible={this.props.createHomeworkModalVisible}>
<View style={styles.containerStyle}>
<View style={styles.modalContainer}>
<Formik
initialValues={{
assignmentName: '',
dueDate: null,
notes: '',
pictures: []
}}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log(values);
}}
>
{formikProps => (
<View>
<View style={{ padding: 5 }}>
<TextInput
placeholder={'Add notes'}
placeholderTextColor='#cdd2c9'
value={formikProps.values.notes}
multiline
style={styles.notesInput}
onChangeText={formikProps.handleChange('notes')}
onBlur={formikProps.handleBlur('notes')}
/>
</View>
</View>
)}
</Formik>
</View>
</View>
</Modal>
</TouchableWithoutFeedback>
);
}
}
You can try something like,
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View>
<View style={{ padding: 5 }}>
<TextInput
placeholder={'Add notes'}
placeholderTextColor='#cdd2c9'
value={formikProps.values.notes}
multiline
style={styles.notesInput}
onChangeText={formikProps.handleChange('notes')}
onBlur={formikProps.handleBlur('notes')}
/>
</View>
</View>
</TouchableWithoutFeedback>
hope it helps. feel free for doubts
import Keyboard from 'react-native'
Call this function : Keyboard.dismiss()
Related
I make check box list on Model Pop up by using react native multiple select checkbox list listed but it take full screen height i am not able to fix this issue please Any body help me
below is my Model Pop up Code
[![<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.ModalcenteredView}>
<View style={styles.ModalView}>
<View style={{height:'30%'}}>
<SelectMultiple
items={this.state.ParticipantCheckBox}
// renderLabel={renderLabel}
selectedItems={this.state.selectedFamilyMembers}
onSelectionsChange={this.SelectFamilyMembers} />
</View>
<View style={{flex:1, flexDirection:'row', flex:1,height:'1%'}}>
<TouchableHighlight style={{height:'5%'},\[styles.ModalCloseButton\] }
onPress={() => {
this.HideShowFamilyMemberModel(false);
}}
>
<Text style={styles.ModalCloseButtonTextStyle}>Close</Text>
</TouchableHighlight>
<TouchableHighlight style={{height:'5%'},\[styles.ModalSaveButton\] }
onPress={() => {
this.SaveFamilyMemberModel(false);
}}
>
<Text style={styles.ModalSaveButtonTextStyle}>Save</Text>
</TouchableHighlight>
</View>
</View>
</View>
</Modal>][1]][1]
You can make your modal like this
<Modal>
//this is parent view
<View>
//set this vide at the center of parent view and set height 40% or 30%
<View>
<ScrollView>
…
...
</ScrollView>
</View>
</View>
</Modal>
I am trying to implement the modal component in this app and for some reasons, I cant make it work. I have done it in another app and even though everything looks as it should in this one, it still doesn't work, it just doesn't toggle!
Here is my code (i call toogleModal() here ):
<TouchableOpacity
activeOpacity={1}
style={styles.slideInnerContainer}
//onPress={() => { alert(`You've clicked '${rest_name}'`); }}
onPress={() => this.toggleModal(rest_name)}
>
<View style={styles.shadow} />
<View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
{this.image}
<View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
</View>
<View style={[styles.textContainer, even ? styles.textContainerEven : {}]}>
<View style={{ flexDirection: 'row' }}>
{uppercaseTitle}
{ratings}
</View>
<Text
style={[styles.subtitle, even ? styles.subtitleEven : {}]}
numberOfLines={2}
>
{rest_location}
</Text>
</View>
</TouchableOpacity>
Now here is the toggleModal() which should set the state and then call the onPressItem() :
toggleModal = (item) => {
this.setState({ isModalVisible: !this.state.isModalVisible });
this.onPressItem(item);
};
and onPressItem() :
onPressItem = (item) => {
return (
<ThemeProvider theme={theme}>
<Modal animationIn="rubberBand" animationOut={"bounceOut"}
isVisible={this.state.isModalVisible}
onBackdropPress={() => this.setState({ isModalVisible: false })}
>
<View style={{ flex: 1 }}>
{item}
</View>
<View style={{ flex: 1 }}>
<Button title="Hide modal" onPress={this.toggleModal} />
</View>
</Modal>
</ThemeProvider>
)
};
Now, remember this code is taken from another app where modal is working perfectly!
Most probably your issue with click option is connected with incorrect import TouchableOpacity from correct module. Check if you are importing from react-native:
import { TouchableOpacity } from 'react-native';
change this line
onPress={() => this.toggleModal(rest_name)}
to this:
onPress={() => {this.toggleModal(rest_name)}}
you only need to put the function call in brackets
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 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 want to change value of textInput but it change all value of textinput , i know because of the state, but what the right way to handle this textInput or what i use is numericInput from react-native-numeric-input, thanks for helping.
<ScrollView>
{this.state.display.map((info)=>{
return
<View style={{paddingBottom:5,alignSelf:'center'}} key={info.id}>
<View style={{ ... }}>
<View style={{flexDirection:'row'}}>
...
<View style={{justifyContent:'center',marginLeft:'auto',marginRight:10}}>
<NumericInput
totalWidth={70}
totalHeight={30}
iconSize={10}
initValue={this.state.v6}
value={this.state.v6}
onChange={(v6) => this.setState({ v6 })}
rounded
textColor='#59656F'
iconStyle={{ color: 'white' }}
rightButtonBackgroundColor='#AC9FBB'
leftButtonBackgroundColor='#DDBDD5'
/>
</View>
</View>
</View>
</View>
})}
</ScrollView>
and this my state code
state={
v6:0
}
Try changing the onChange to this:
onChange={(value) => this.setState({ v6: value })}