Losing TextInput's focus when Keyboard closes - react-native

I have some TextInput components inside a ScrollView. The problem si that if I am closing the keyboard with return or android back button, the TextInput selected is still focused and I have to tap two times to focus another TextInput.
Here are the components I am using:
<ScrollView style = {styles.scroll}>
<KeyboardAvoidingView styles={styles.container} behavior = 'padding' enabled>
<View style={styles.header1}><Text style={styles.title}>Blue Line Notes</Text></View>
<View style={styles.headerDesign}></View>
<View style={styles.header2}></View>
<View style = {styles.items}>
<TextInput
style = {styles.subject}
onChangeText={(noteTitle)=> this.setState({noteTitle})}
value={this.state.noteTitle}
placeholder='Raport Number/Note Indentifier'
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style = {styles.items}>
<TextInput
style = {styles.calltype}
multiline = {true}
numberOfLines = {3}
onChangeText={(callType)=> this.setState({callType})}
value={this.state.callType}
placeholder='Call Type/Other Information'
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style = {styles.items}>
<TextInput
multiline = {true}
numberOfLines = {8}
style={styles.textInput}
placeholder='Notes'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style = {styles.items}>
<TouchableOpacity onPress = { this.saveNote.bind(this)} style={styles.addButton}>
<Text style={styles.addButtonText}>SAVE</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>
What I think I need to do is to lose the focus of the TextInput when the keyboard closes. That is something I am struggling with. Can someone show me how to do it properly?

Try keyboardShouldPersistTaps="handled" as ScrollView attribute. I tried the same on your given code and it worked. You can look more into the property details here.
Hope this will help!

Related

View lowers itself when typing in TextInput React Native (Expo)

In general the lay-out seems fine, the content is wrapped up inside a KeyboardAvoidingView as followed:
<KeyboardAvoidingView
keyboardVerticalOffset={-useHeaderHeight()}
behavior={"padding"}
style={styles.container}>
<View style={styles.conversationContainer}>
<ScrollView
ref={scrollViewRef}
onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })}
overScrollMode='never'
showsVerticalScrollIndicator={false}
enableOnAndroid={true}
style={styles.conversation}>
{messagesView}
</ScrollView>
<View
style={styles.send}>
<TextInput
value={text}
textAlignVertical='center'
placeholder='Write your message'
style={styles.textInput}
blurOnSubmit={true}
onChangeText={(value) => setText(value)}
>
</TextInput>
<TouchableOpacity
style={[styles.button]}
activeOpacity={.6}
onPress={() => addMessage()}>
<IonIcon
name={"arrow-forward-circle-outline"}
size={30}
color={'#00966E'}
style={styles.icon} />
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
With the keyboard open, the TextInput is placed above the keyboard as intended.
Keyboard Picture
But whenever I press a single keystroke, the entire view (including the TextInput), lowers down, covering half of the TextInput.
Image of keyboard covering the TextInput
I have already tried changing the KeyboardVerticalOffset to different values as well as the changing the behavior to "heigth", "position" or none. None of these happened to change anything.
Had the same issue. This syntax helped me: <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>

react native passing data to other screen

I am new to react native .what I want is that in my app there is many images in each menu .when I click on the image I want to view the image in the screen size .the thing is when I click on every image I want it to Direct to a single page and call the image from there ..how is it possible to pass image variable from different pages to a single page..the so far did image view single page render is like below:,when the image component is did so it only views the first image not the other .what is the solution?
render() {
this.state.incident = this.props.navigation.getParam('incidents','hi!!');
this.state.tenantattachedagreement = this.props.navigation.getParam('tenantattach','hi!!!')
// this.state.residents = this.props.navigation.getParam('residents','');
// this.state.tenantattachedagreement = this.props.navigation.getParam('attachedagreement','');
// console.log("attached agreement",this.state.tenantattachedagreement);
// incidents = this.props.navigation.getParam('incidents,'');
// console.log("hello",attached);
// console.log("l&f pic",this.state.lostfound);
console.log("incidentpic",this.state.incident);
console.log("tenantattach",this.state.tenantattachedagreement);
// console.log("residents",this.state.residents);
return (
<View style={{flex:1}}>
<StatusBar
barStyle = "light-content"
hidden = {false}
backgroundColor = "#32ACFD"
translucent = {false}
networkActivityIndicatorVisible = {true}
/>
<View style={{flexDirection:'row',height:50,width:'100%',justifyContent:'center',alignItems:'center',backgroundColor:'#32ACFD',elevation:5,borderBottomWidth:1,borderColor:'#5b9bd5'}}>
<TouchableOpacity onPress={()=>{this.props.navigation.goBack()}} style={{height:'100%',width:'12%',justifyContent:'center',alignItems:'center'}}>
<Icon name="angle-left" style={{fontSize:25,color:'white'}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('DashBoard')}} style={{width:'33%',height:'100%',justifyContent:'center'}}>
<Text style={{color:'white',fontSize:18,textShadowColor: 'grey',paddingLeft:'5%',fontWeight:'500',fontStyle:'normal',textShadowRadius:5,textShadowOffset: {width: -1, height: 1}}}>Smart Vitae</Text>
</TouchableOpacity>
<View style={{width:'35%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'white'}}>Unit: {this.state.unitname}</Text>
</View>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Notification')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="bell-o" style={{color:'white',fontSize:22}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Settings')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="cog" style={{color:'white',fontSize:24}}/>
</TouchableOpacity>
</View>
<View>
<View style={{height:'100%',width:'100%',justifyContent:'center',alignItems:'center',borderColor:'#2E4053'}}>
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.lostfound}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.tenantattachedagreement}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.incident}} style={{height:'100%',width:'100%'}}></Image>
</View>
</View>
</View>
);
}
}
I believe this is a styling issue, you have multiple images all trying to fill 100%
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
Try using flex or updating your height, like this:
<Image source={{uri:this.state.residents}} style={{height:'25%',width:'100%'}}></Image>

How to create custom tabs in the centre of the screen in React Native

I am doing react native application. In that, One screen have custom tabs in centre of the screen.
My screen is like,
top view around 200px height with some text lines showing.
After that, Custom tabs as picture attached.
After that, I am showing for first tab on tap flat list data.
I have checked online forums and tutorials, According to tab bar, We can show either top or bottom screen with tabs.
But, How to show tabs with customisation like my requirement.
I have 4 tabs, and each tab has same top view which I mentioned in above (some text lines), And if I tap on each tab, different data bottom page should show.
Like,
First tab with some flat list,
second tab with some text lines,
likewise all tabs has different layout in bottom screen.
As I am very new to react native. How to achieve this?
Due to privacy policy, I am unable to post complete screenshot.
Here is my code.
Screen.js
onClickTelugu = () => {
alert("you clicked onClickTelugu")
}
onClickTamil = () => {
alert("you clicked onClickTamil")
}
onClickHindi = () => {
alert("you clicked onClickHindi")
}
onClickEnglish = () => {
alert("you clicked onClickEnglish");
}
render(item) {
return (
<View style={styles.container}>
<View style ={styles.Container}>
<Text style={styles.textStyle}>
Some Text
</Text>
<View style={styles.somestyles}>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.somestyles}
source={MenuImage}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.menuIcon}
source={MenuImage}
/>
</TouchableOpacity>
</View>
</View>
<View style ={styles.somestyles}>
<View style={styles.somestyles}>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles} >
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style ={styles.somestyles}>
Some Text
</Text>
</Text>
</View>
<View style={styles.somestyles}>
<Text style={styles.somestyles}>some text</Text>
<Text style={styles.somestyles} >some text</Text>
<Text style={styles.somestyles}>date</Text>
<Text style={styles.somestyles}>some other date</Text>
</View>
</View>
</View>
<View style = {styles.tabContainer}>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>
</View>
</View>
<View style = {styles.flatListContainer}>
<FlatList style = {styles.flatList}
showsVerticalScrollIndicator = {true}
data = {this.state.dataArray}
renderItem = {({item}) => (
<TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
<Image
style={styles.flatListArrowImage}
source={image}
/>
</View>
<View style={styles.flatListItemInsideSeparator}>
)
}
ItemSeparatorComponent = {() => (
<View style={{height:15, backgroundColor:'#F8F8F8'}}/>
)}
/>
</View>
</View>
);
}
}
And I have to show overlay tab images too. If 1st tab tapped, 2,3,4
tabs images should be like delighted images. Like
highlighted/delighted images.
Ok you need to give this component it's own state to keep track of what you want to show in the lower section. then you should replace all of your onClick events with just one onClick event that you pass different languages to. For Example this.onClickTelugu becomes () => this.onClick('telugu'), then your onClick event should be:
onClick = (language) => {
this.setState({selectedLanguage: language})
}
then in your renderBottomContent function, you can render different things depending on what this.state.selectedLanguage is.
something like...
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = { selectedLanguage: null}
}
onClick = (language) => {
this.setState({selectedLanguage: language})
}
renderBottomContent = () => {
const {selectedLanguge} = this.state
switch(selectedLanguage) {
case "telugu":
return <View><Text>Telugu</Text></View>
case "tamil":
return <View><Text>Tamil</Text></View>
case "hindi":
return <View><Text>Hindi</Text></View>
case "english":
return <View><Text>English</Text></View>
default:
return <View><Text>No Language Selected...</Text></View>
}
}
render() {
...
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Telugu
</Text>
</TouchableOpacity>
</View>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Tamil
</Text>
</TouchableOpacity>
</View>
...
// after all the other tab buttons, render bottom content depending on the component state
{this.renderBottomContent()}
}
}

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

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

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!