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>
Related
I've been trying to make a simple app, and I want some comment section that I create with flatlist, but after I create some component below my flatlist it won't appear, but the height of it appears, it just the component itself won't appear, after I'm trying to comment my flatlist, the component below it showed up.
Can you give me solution for this problem? so stuck with it
<View
style={{
alignItems: 'center',
flex: 1,
}}>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
</View>
<View>
<Timeline data={data} />
</View>
</View>
<!-- end snippet -->
Try this way
<View style={{ flex: 1 }}>
<View
style={{
alignItems: "center",
flex: 1,
}}
>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
<View>
<Timeline data={data} />
</View>
</View>
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>
I have child View inside a Parent View component. I set Parent's border but child View's border override parent's one.
Here is the screen
Here is my code
<View style={{flexDirection: 'row',marginLeft: 20, marginRight: 20, height: height/20,
width: width-40, borderWidth: 2, borderRadius: 4, borderColor: '#D3D3D3'}}>
<View style={{backgroundColor: '#D3D3D3',flexDirection: 'row',
height: height/20, alignItems: 'center'}}>
<Thumbnail style={{marginLeft: 5,width: 20, height: 20}} square source={require('../assets/Turkey.png')}/>
<Picker mode="dropdown" selectedValue={this.state.selectedCountry}
onValueChange={(value)=>this.onCodeChanged(value)}
>
<Picker.Item label="+44" value="England"></Picker.Item>
<Picker.Item label="+90" value="Turkey"></Picker.Item>
</Picker>
</View>
<View style={{height: height/20, width: 250}}>
<Input placeholder="Phone" placeholderTextColor='#D3D3D3'/>
</View>
</View>
I tried to set borderBottomWidth props of child view to 0, but it did not work. Anyone know how can I fix this issue?
Is not the border. You are putting the height of everything (height/20) but you are not taking into account the border you just added, which counts towards the height.
Try something like (height/20 - 4)
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.
I am using List from NativeBase to render data.
I have tried to setup it like this:
body = <List
dataArray={data}
renderRow={(rowData) =>
<Person
key={rowData.ID}
searchText={searchText}
person={rowData}
onSelect={this.onSelect}
/>}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
contentContainerStyle={{
flex: 1,
justifyContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start'}}
/>
to simply display "Persons" in gird. Person is simply Card from NativeBase:
<Card style={{width: deviceWidth>320 ? 320 : deviceWidth,flexGrow: 1}}>
...
</Card>
However this does not work as I expected and flexWrap is not doing anything. Everything is rendered in one row instead of wrapping into grid.
This worked for me:
Wrap the Card with a View:
<View style={ styles.itemStyle} >
<Card>
<CardItem>
.....
</CardItem>
</Card>
<View>
const styles = {
itemStyle:
width: 150,
height: 100
}