React Native ScrollView dynamic footer - javascript

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>

Related

How to load a ScrollView from the bottom

I have the following ScrollView. I would like it to initially load content from the bottom, showing the last elements first so that you first scroll from bottom upwards :
<ScrollView
vertical
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}>
{chatMsgs.map(ChatMsg => (
<ChatMsg key={Math.random()} />
))}
</ScrollView>
How can I go about implementing this scenario?
I have tried display: 'flex', flexDirection: 'column', alignItems: 'flex-end', but to no success. I did not expect it to work anyway.
Thank you all in advance.
You can use contentOffset props and set arbitrary y value.
<ScrollView
vertical
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
contentOffset={{x: 0, y: 9999}} />
))}>
{chatMsgs.map(ChatMsg => (
<ChatMsg key={Math.random()} />
))}
</ScrollView>

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>

Update scrollview when keyboard is open with React Native

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

Can't style my checkbox as `alignSelf: 'flex-end'` or `right: 0`

I can't style my checkbox as alignSelf: 'flex-end' or right: 0.
I want to put the checkbox top and right but there is weird padding on the photo. I tried many different styles but none of them works. :(
This is FlatList's renderItem()
<TouchableWithoutFeedback
style={{flex:1}}
onPress={() => this._handleImagePress(item.id, item.outfit_img)}>
<View style={{flex: 1}}>
<Image
key={item.id}
source={{uri: item.outfit_img}}
style={styles.rowImage}
resizeMode="cover"
/>
<CheckBox checked={isSelected} style={{marginLeft:2, marginTop:2, position:'absolute', alignSelf: 'flex-end'}}/>
</View>
</TouchableWithoutFeedback>
Here is FlatList function
render() {
return (
<View style={styles.root}>
<FlatList
data={this.props.outfits}
extraData={this.state.selectedStyles}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
numColumns={3}
renderHeader={this._renderHeader}/>
</View>
);
}
UPDATE FIX I guess Native-Base Checkbox is terrible on styling. This is working version. Any optimization? or better option?
<TouchableWithoutFeedback
style={{flex:1}}
onPress={() => this._handleImagePress(item.id, item.outfit_img)}>
<View style={styles.rowImage}>
<Image
key={item.id}
source={{uri: item.outfit_img}}
style={styles.rowImage}
resizeMode="cover"
/>
<View style={{height:32, width:32, position:'absolute', top:0, right:0, marginTop:4, paddingRight:12}}>
<CheckBox checked={isSelected} color="#f64e59"/>
</View>
</View>
</TouchableWithoutFeedback>
I have created a snack here https://snack.expo.io/HJYNoAEAW , hopefully you are expecting this behaviour.
Absolutely positioned children of the flex container are not flex items anymore and therefore don't obey flex alignment properties (align-* and justify-*). They do obey offset keywords (left, right, etc.), but these offsets are calculated relatively to the closest positioned ancestor (or, if there is none, to the root element). Try adding position:'relative' to your TouchableWithoutFeedback element's style attribute to make it the nearest positioned ancestor of the checkbox, so it could be positioned relatively to it.
Remove position: absolute from the CheckBox instead add justify-content: space-between to the parent of the element.

Categories