How Can I reslove this issue Keyboard overlapped when i entered text input - react-native

How can i solve this issue .
keyboard overlapping like this below
Code Here
<View style={styles.container}>
<View style={styles.Subcontainer}>
<ScrollView contentContainerStyle={styles.scrolViewFlex} ref='scrollView' automaticallyAdjustContentInsets={true} showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true}>
<View style={styles.logoView}>
<Image source={require('#images/Icon_K.png')} style={styles.imageStyles} />
</View>
<View style={styles.textInputView}>
<ActivityIndicator
animating = {this.state.animating}
color = '#494949'
size = "large"
style = {styles.activityIndicator}
/>
<View style={styles.namesContainer}>
{/*<View style={styles.exploreContainerDirection}> */}
<View style={styles.pincodeContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
style={[styles.firstnameTextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" First Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'FirstName')}
value={this.state.updateAccountValues.FirstName}
onFocus={this.inputFocused.bind(this,'FirstName')}
onSubmitEditing={(event)=>{
this.refs.SecondInput.focus();
}}/>
</View>
<View style={styles.spaceview}/>
<View style={styles.mobileNoContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
ref="SecondInput"
style={[styles.lastnametextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" Last Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'LastName')}
onFocus={this.inputFocused.bind(this,'LastName')}
value={this.state.updateAccountValues.LastName}
onSubmitEditing={(event)=>{
this.refs.ThirdInput.focus();
}}/>
</View>
{/* </View>*/}
</View>
</ScrollView>
</View>
</View>
So this is my Screen short when i enter in textinput keyboard appers some times like this below screen
So, Please check it once and find Our my Issue

I followed this: Set
android:windowSoftInputMode="adjustPan" in MainfestFile.xml file
React-native: How to control what keyboard pushes up

Related

if I focus on input my keyboard cover up and I dont see my modal

Why my keyboard covers up my modal when I am focusing on my textinput ?
Code:
<BottomSheetModal
ref={ref}
index={1}
snapPoints={snapPoints}
handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
backdropComponent={BottomSheetBackdrop}
>
<KeyboardAwareScrollView keyboardShouldPersistTaps='handled' contentContainerStyle={{flexGrow: 1}}>
<View style={s.centered}>
<Text style={s.title}>Rabatt-Code</Text>
<Text style={s.subtitle}>Füge ein Rabatt-Code für dein Produkt ein</Text>
<Text style={s.stepText}>{`Schritt ${step}/3`}</Text>
</View>
<Text style={[s.text, s.bold]}>Nur Buchstaben & Zahlen!</Text>
<View style={s.content}>
<View style={s.inputContainer}>
<Input
placeholder='Name (exp. Max50)'
value={coupon.name}
onChangeText={handleChangeName}
style={[InputStyles.full_icon]}
icon={<Ionicons name="md-newspaper-outline" size={24} style={s.icon} color="#333" />}
/>
</View>
<View style={s.containerInner}>
<Pressable onPress={handleChangeStage} style={[ButtonStyles.full]}>
<Text style={s.btnText}NEXT</Text>
</Pressable>
</View>
</View>
</KeyboardAwareScrollView>
</BottomSheetModal>
Anyone can explain me what I am doing wrong ? On Android its fine, this is only on iOS.
if you are using react-native-bottom-sheet look at this page https://gorhom.github.io/react-native-bottom-sheet/keyboard-handling/
Try wrapping BottomSheetModal in KeyboardAvoidingView and remove KeyboardAwareScrollView
You may need to use keyboardVerticalOffset to adjust
<KeyboardAvoidingView behavior={'height'} style={{flex:1}}>
<BottomSheetModal
ref={ref}
index={1}
snapPoints={snapPoints}
handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
backdropComponent={BottomSheetBackdrop}
>
.....
<BottomSheetModal />
</KeyboardAvoidingView>

How to resolve the Virtualized Lists warning with multiple Flatlists within a scroll

I have been working my way through legacy views within an app - resolving the issues of FlatLists within a ScrollView component casuing the resulting Virtualised Lists error that is displayed.
I have 5 affected pages - first 3 only had 1 flatlist in the view - so was easy enough to split the urrounding code into flatlist header and footer assets. However I'm not sure what to do in terms of having 2 or more flatlists - how do i apprach the layout in thsi scenario - so there is only 1 scroll?
I may be missing something very simple but need a nudge please!
here is the view code:
<View style={[PRStyles.IRContainer]} >
<StatusBar barStyle="light-content" />
<View style={PRStyles.header}>
<FixedHeader backButton={true} navScreen='HomeViewContainer' />
</View>
<View style={PRStyles.IRBody}>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh} />}>
<KeyboardAvoidingView>
<TitleHeader sectionLocaleTxt='Duty Record' sectionTxt='' sectionDesc='End of shift duty Record.' sectionHyphen={false} />
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowTitle}>{this.props.auth.checkedInVenueName}</Text>
<Text style={FormStyles.PrRowDate}>{this.getCurrentDate()}</Text>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>General Manager / Licence Holder:</Text>
<View style={FormStyles.PrTable}>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >{this.state.licenceHolder}</Text></View>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Door Staff (<Text style={FormStyles.PrRowCount}>{this.state.doorStaffCount}</Text> total)</Text>
<View style={FormStyles.PrTable}>
<FlatList
scrollEnabled={true}
data={this.state.rotaRecords}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={this._listStaffEmptyComponent}
renderItem={this._renderDoorStaffItem}
/>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Numbers:</Text>
<View style={FormStyles.PrTable}>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total In <Text style={ FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalIn}</Text></Text></View>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total Out<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalOut}</Text></Text></View>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Overall Difference<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalDifference}</Text></Text></View>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Door Counts:</Text>
<FlatList
scrollEnabled={true}
data={this.state.countRecords}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={this._listDoorCountEmptyComponent}
ListHeaderComponent={this._listDoorCountHeaderComponent}
renderItem={this._renderDoorCountItem}
/>
</View>
<View style={[FormStyles.form, FormStyles.PrRow, {marginTop:15, paddingTop:0, borderBottomWidth:0} ]}>
<Text style={ModalStyles.formTop}><Text style={[ModalStyles.required, ]}>*</Text>Required Field</Text>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>1. Customer Comments:</Text>
<View style={FormStyles.textInputBlock}>
<TextInput
placeholder="Enter Comments"
numberOfLines={4}
onChangeText={val => this.setState({ comments: val})}
value={this.state.comments}
multiline
style={{minHeight: 280, height: 'auto', textAlignVertical: 'top'}}
/>
</View>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>2. Duty Manager Name<Text style={ModalStyles.required}>*</Text> :</Text>
<View style={FormStyles.textInputBlock}>
<TextInput
ref='signatureName'
placeholder="Please Print Name"
style={FormStyles.textInputText}
autoCorrect={false}
returnKeyType='done'
value={this.state.signatureName}
onChangeText={(text) => this.setState({signatureName:text})}
/>
</View>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>3. Duty Manager Signature: <Text style={ModalStyles.required}>*</Text></Text>
<Text style={[FormStyles.formLabelSub, FormStyles.formLabelSubHigh, FormStyles.superHighLight ]}>Note: PRESS BLUE SAVE BUTTON after applying Signature</Text>
<View style={[FormStyles.textInputBlock, this.isSignatureAdded() && FormStyles.signatureBlock ]}>
{this.signatureBlock()}
</View>
</View>
{submitButton}
</KeyboardAvoidingView>
</ScrollView>
</View>
</View>
This is the most common error when working with scroll view and flat list.
To prevent the error cause, we have to manage our views inside a single flat list and put other components in the list header component and list footer component in an efficient way as we desire.
<FlatList
data={this.state.countRecords}
renderItem={(item) => {
return (
// Your flat list item goes here..
)
}}
ListHeaderComponent={
// Content above the list goes here..
}
ListFooterComponent={
// Content below the list should goes here..
}
/>
You can still check the below link for more understanding.
FlatList Example with Custom Header and Custom Footer

container doesn't want to display full screen

my container doesn't want to display full width.. even though I have written the code as below, is there something wrong?
all my style code was here, I gave the background color to show there is a space at the end, and how to remove this until the color become fullscreen
this the code from name.txs
render() {
return (
<Container style = {styles.container}>
<VStack alignItems="center" alignContent="center">
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Please Input your Name
</Text>
<TextInput
style={styles.input}
placeholder='Enter Your Name Here'
onChangeText={ (name) => this.props.authStore.setName(name)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Month of Your Born
</Text>
<TextInput
style={styles.input}
placeholder='January, February, etc.'
onChangeText={ (month) => this.props.authStore.setMonth(month)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Day of Your Born
</Text>
<TextInput
keyboardType="numeric"
placeholder='1-31'
onChangeText={ (day) => this.props.authStore.setDay(day)}
/>
</View>
<View style = {styles.view}>
<Button
title="Submit"
onPress={() => this.props.navigation.push('Zodiac')}/>
</View>
</VStack>
</Container>
);
}
Replace <Container> with <Center flex={1}> from NativeBase

React native Model popup with Check box list style Issue

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>

React Native - Scrollview vertical with scrollview horizontal in it?

I'm creating an APP to show points of interest of monuments. Right now I'm rendering the information on a ScrollView (vertical way). The output is like this:
I edited the image, it continues, but I think you get the point.
Here is my code:
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<ScrollView>
{monumento.pois.map((poi, index) => (
<View key={index} style={{marginBottom: 15}} >
<Tile
imageSrc = {{uri:poi.image}}
contentContainerStyle = {{marginBottom: -30}}
/>
<View style={styles.map}>
<Icon
raised
reverse
name='location-on'
color='#075e54'
size={36}
onPress={() => navigate('Mapa', {monumento: monumento})} />
</View>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>{poi.name}</Text>
</View>
<View style={styles.bodyContent}>
<Text style={styles.bodyText}>{poi.description}</Text>
</View>
</View>
))}
</ScrollView>
</View>
</View>
);
What I want is to scroll normally for one Point of Interest (PoI), but the next PoI I want him to appear by scrooling horizontal (swiping left)...like this:
sample
How can I accomplish that? Thanks!