We Keep Coding

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>

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>

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

How can I center the title in Appbar.Header in react-native-paper?

As you can see in the docs, the default positioning for the title in react-native-paper is left-aligned. I've seen multiple questions and answers about how to implement a centered title both for Android Native as well as React Native's StackNavigator, but I am having no luck pulling off the same effect with react-native-paper.
So far I have tried using the style parameter in Appbar.Header to pass in { textAlign: 'center' } or { flexDirection: 'row', justifyContent: 'space-between' }, but nothing seems to work. I'm not very impressed with react-native-paper's lack of documentation on overrides, but I still hope there's a way to do what I'm looking for.
const styles = { header: { textAlign: 'center' }}
<Appbar.Header style={styles.header}>
<Appbar.Action icon="close" onPress={() => this.close()} />
<Appbar.Content title={title} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
Considering title accept a node, it can be used to display a react component.
How can I force center the title on all devices?

react-navigation allows passing a component for title instead of a string, so we can do the same thing here:
I wrote an example that accepts a custom title component and can be used wherever we want:
import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';
const ContentTitle = ({ title, style }) => (
<Appbar.Content
title={<Text style={style}> {title} </Text>}
style={{ alignItems: 'center' }}
/>
);
const App = () => (
<Appbar.Header>
<Appbar.Action icon="close" onPress={() => this.close()} />
<ContentTitle title={'Title'} style={{color:'white'}} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
);
export default App;
You can check: https://snack.expo.io/r1VyfH1WL

There is 2 approach for this.
First,
The Appbar.Content has marginLeft applied to it. So, you just need to set the marginLeft to 0.
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
// Put empty action here or any action you would like to have
<Appbar.Action/>
</Appbar.Header>
Sadly, this approach only allowed one menu action on the right. (or have an equal amount of actions both left and right, but I think only one menu action will be on the left side, that is back button)
Second, make the Appbar.Content has an absolute position. And yes, keep the marginLeft to 0.
<Appbar.Content title='Title'
style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }}
titleStyle={{ alignSelf: 'center' }} />
We need to set the zIndex to -1 (or lower) so the button/menu action is clickable. This way, you can have more than one menu actions.
The first way is simple but limited, while the second way is powerful but more code to write.

You have to use titleStyle instead of style to center the text. The below code is working for me.
<Appbar.Header>
<Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>
There is also a similar subtitleStyle for styling the subtitle. Check the docs for more info.

For 'react-native-paper', this snippet worked for me:
<Button
style = {{justifyContent: 'center'}}
>
Press
</Button>

This should align both text/node title:
<Appbar.Content
title={<Text>title</Text>}
style={{ alignItems: 'center' }}
/>
See https://snack.expo.io/rJUBIR6lU

<Appbar>
<Appbar.Content titleStyle={{alignSelf: 'center'}} title='something' />
</Appbar>

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.