Update scrollview when keyboard is open with React Native - javascript

I would like to know how can I update scrollview when keyboard is open with React Native ?
I try with "onContentSizeChange" in "ScrollView", it's okay, but when I open the keyboard, the scroll view isn't update (bottom)
When I click on my input to send tape the text (1), the scrollview isn't update when the keyboard is open (2). I would like to update my scrollview (3).
MessageList.js
export default class MessageList extends React.Component {
render() {
return (
<View style={MessageListStyles.container}>
<ScrollView
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'space-between'
}}>
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
</ScrollView>
</View>
);
}
}

Do you aim to move the scrollview out of the way when the keyboard appears? In that case you use a KeyboardAvoidingView. It adds bottom or top padding depending on your needs.
Alternatively, you could add a listener that is triggered once the keyboard is opened, and put your scrollToEnd code there: keyboardDidShowListener

Related

React Native ScrollView dynamic footer

How to make React native scrollview footer. if the content is smaller than the screen, there should be a button at the very bottom of the screen; if it is larger, then the button should go to the very bottom after the content
I did this, but if there is not enough content, then the button goes up
<ScrollView>
<Text>asdasd</Text>
<Button text="Next" />
</ScrollView>
if so, then always sit below the scroll under the button goes, but I need the button to go too
<View>
<ScrollView>
<Text>asdasd</Text>
</ScrollView>
<Button text="Next" />
</View>
Try setting the scrollview to flex available space, and button to position at bottom
<ScrollView style={{flex: 1}}>
<Text>asdasd</Text>
<Button text="Next" style={{bottom: 0}}/>
</ScrollView>
here is my solution which i found
<ScrollView>
<View style={{ minHeight: height - buttonHeight - safeAreaView }}>
<Text>Content</Text>
</View>
<Button text="Next" />
</ScrollView>

pinch scroll view zoom inside touchable

I am having issues implementing a scroll view pinch zoom inside a touchable opacity. The scroll view must be a child of the touchable for this use case. any suggestions. The code for this is currently:
Image Component:
return (
<ScrollView
maximumZoomScale={2}
onStartShouldSetResponder={() => true}
key={node.key}
style={{
width: "100%",
}}
>
<FitImage {...imageProps} />
</ScrollView>
);
Then parent is roughly:
<TouchableOpacity
ref={this.accordian}
style={styles.row}
onPress={() => this.toggleExpand()}
>
<ImageComponent/>
</TouchableOpacity>
Mainly focussing on the child image component. It now doesn't allow me to use zoom
Any Suggestions?
Thanks

Android keyboard overlapping inputs

Using KeyboardAvoidingView I have a basic example where I would like the keyboard to push the inputs upwards so it is not overlapping on Android. The inputs do not move when the keyboard is in focus. Any ideas?
The inputs stay in a fixed position, do I need to place everything in a scroll view?
UPDATE: I use nested navigators, could a style on a parent component prevent this working?
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<TextInput placeholder="input1" />
<TextInput placeholder="input2" />
<TextInput placeholder="input3" />
<TextInput placeholder="input4" />
<TextInput placeholder="input5" />
<TextInput placeholder="input6" />
<TextInput placeholder="input7" />
<TextInput placeholder="input8" />
<TextInput placeholder="input9" />
<TextInput placeholder="input10" />
<TextInput placeholder="input11" />
<TextInput placeholder="input12" />
</KeyboardAvoidingView>
try to change the behavior to height for android as described on keyboardavoidingview
import { KeyboardAvoidingView, Platform } from 'react-native';
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }} >

react native unfocus TextInput

I want to make a search bar in react-native like that :
If I click on icon, I focus on textInput, but if I click on other part of screen, unfocus the textInput.
The focus part is working with the ref, but I don't know if it's possible to unfocus the textinput when I click in other part of the screen.
<TextInput
multiline={false}
onChangeText={(text) => onChangeText(text)}
placeholder="search"
style={styles.textInput}
value={value}
ref={research}
></TextInput>
<TouchableOpacity onPress={()=>research.current.focus()}>
<Ionicons name="md-search" size={24} ></Ionicons>
</TouchableOpacity>
You could just dismiss the keyboard
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{flex: 1}}>
[your code in here]
</View>
</TouchableWithoutFeedback>

React Natvie buttons and textInput not working

Since the <Modal> in React Native is kinda iffy, I've made my own with a <View> that renders when this.state.display is true. But the text input and button doesn't do anything when clicked / interacted with.
I've tried using a regular <Modal> but prefer my way. As well as changing the actual style of the modal. I've added different onPresses and a few other minor code adjustments that haven't worked.
shouldRender() {
if (this.state.display) {
return (
<View style={styles.modal}>
<TextInput
placeholder="Event Title"
onChangeText={title => this.setState({title})}
value={this.state.title}
style={styles.textInput}
/>
<TextInput />
<Button />
<Button /> //the other buttons and textinput has similar things
</View>
);
} else {
return <View></View>;
}
}
In the render method:
return(
<TouchableOpacity
onPress={this.addReminder}
style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)
And the addReminder method just sets this.state.display to true
I'm looking for the buttons to submit / close the modal and the text input to change the title and text state. Right now, the buttons don't animate on press and the text inputs can't be clicked.
Also, prior to the modal, when the textinputs where just on screen, everything worked fine.
Your description sounds like an issue with zIndex - something is being rendered over top of your modal if the button opacity and input focus are not working.
I would try moving the <View>{this.shouldRender()}</View> to be the final child in the containing <View> in your render method and if that doesn't work then up the zIndex.
You can do something like this inside your render()
render(){
return(
<Modal visible={this.state.display} style={styles.modal}>
<TextInput
placeholder="Event Title"
onChangeText={title => this.setState({title})}
value={this.state.title}
style={styles.textInput}
/>
<TextInput />
<Button />
<Button /> //the other buttons and textinput has similar things
</Modal>
<TouchableOpacity
onPress={this.setState({display: true})}
style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)
}
this modal will only display if this.state.disaply == true

Categories