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>
Related
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>
I want to add a button to material-table toolbar. it doesnt do anything relevant to the table. it just opens a modal with some information
I want to add a button called "quotations" to the left side of the "add item" button.
Sandbox code: https://codesandbox.io/embed/charming-yalow-4pnk4?fontsize=14&hidenavigation=1&theme=dark
As Will Evers mentioned, it's possible to add whatever is necessary to Toolbar of the MaterialTable component by using Toolbar prop :
Toolbar: (props) => (
<div
style={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center"
}}
>
<Button
style={{ height: "fit-content" }}
color="primary"
variant="contained"
>
Quotations
</Button>
<div style={{ width: "13rem" }}>
<MTableToolbar {...props} />
</div>
</div>
),
Working Demo
Per the docs, it looks like you need to override the Toolbar component of your table and you should be able to add what ever you want above the column headers:
https://material-table.com/#/docs/features/component-overriding
https://i.stack.imgur.com/J0mqf.png
Use this prop in the component tag
renderTopToolbarCustomActions={() => (
<Button
variant="contained"
color="primary"
size="large"
onClick={() => console.log('something')}
>
Quotations
</Button>
)}
I am trying to make KeyboardAvoidingView consistent for Android devices. The problem I am experiencing is that, by default, Android seems to resize the screen when the keyboard shows/hide.
This is really confusing to me, why is there a default padding on Android? For example, if you have this simple screen:
<View style={{flex: 1}} >
<View style={{ height: 100, backgroundColor: "red" }} />
<View style={{ flex: 1, backgroundColor: "lime" }} />
<View style={{ height: 125, backgroundColor: "orange" }}>
<TextInput />
</View>
</View>
on iOS, keyboard will cover the screen, as expected, beause I am not using KeyboardAvoidingView here... but on Android, the view is resized, giving a paddingBottom to the view equals to the Keyboard height.
Then, if I use KeyboardAvoidingView like this:
<View style={{ flex: 1 }} >
<KeyboardAvoidingView> { /* <--- Can be my custom or the default RN component... the result is the same */ }
<View style={{ height: 100, backgroundColor: "red" }} />
<View style={{ flex: 1, backgroundColor: "lime" }} />
<View style={{ height: 125, backgroundColor: "orange" }}>
<TextInput />
</View>
</KeyboardAvoidingView>
</View>
all works as expected for iOS... but on Android, two paddings are given (the defaults one, and the one which comes from KeyboardAvoidingView).
Does anyone knows how to disable the default resize on Android (Expo)? I have seen people using
"softwareKeyboardLayoutMode": "pan"
for the android map, on app.json, but nothings happens when using it.
Pd: In my case, I have implemented my own KeyboardAvoidingView (just listening the keyboard height and giving a paddingBottom to the container) to manipulate the layout, because on android, the component which is provided by the standard library "react-native" doesn't shows any smoothy transition on Android when pushing up the screen. I have tested both components, mine and the default one from RN, and the behaviour is the same.
I want to use the fontAwesome + icon such that it is in the middle of a circle. I want to use it as one icon item. I read that we can use it along with the circle icon and place it inside that but I couldn't make it work.
import IconFA from 'react-native-vector-icons/FontAwesome';
<IconFA
name="plus"
size={moderateScale(30)}
color="black"
style={styles.thumbnail}
/>
{/* <IconFA
name="circle-thin"
size={moderateScale(67)}
color="white"
/> */}
thumbnail: {
height: 68,
width: 68,
position: 'relative',
},
Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.
Reference: https://jsfiddle.net/1d7fvLy5/1/
Snack Expo:
https://snack.expo.io/9Ild0Q1zG
I want to make something like this:
I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.
The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number. Percentage strings do work at runtime).
You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.
const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
<CircleBorder
size={circleSize}
borderWidth={borderWidth}
borderColor={borderColor}
>
<IconFA {...props} />
</CircleBorder>
);
const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
<View
style={{
width: size,
height: size,
borderRadius: 0.5 * size,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor,
borderWidth,
}}>
{children}
</View>
);
The IconInCircle component takes three props specific to the border: circleSize, borderWidth, and borderColor. All other props are passed through into the IconFA child component.
Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.
Now we can use it like so:
<IconInCircle
name="plus"
size={30}
color="black"
style={styles.thumbnail}
borderWidth={1}
circleSize={50}
/>
Expo Link
Try this, just adjust according to your needs, and also don't forget to support other browsers for flex.
const styles = StyleSheet.create({
thumbnail: {
height: 68,
width: 68,
position: 'relative',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #333',
borderRadius: '50%'
},
});
import IconFA from 'react-native-vector-icons/FontAwesome';
<View style={{
position:'relative',
justifyContent:'center',
alignItems:'center',
width:40,
height:40,
backgroundColor:'black'
}}>
<IconFA name='circle-thin' size={40} color='grey'/>
<IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />
</View>
I am new to ReactNative, but above snippet should work in your case
Snack Expo
I am working on a [Tooltip][1] the users can click for an explanation. it looks like this
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(255, 179, 16)'}>
<Text>?</Text>
</Tooltip>
The problem with this is that the user needs to click on top of the exact text to work, I wanted to create something like an invisible box around it that the user can click anywhere inside of it to trigger it.
<TouchableHighlight>
<View style={{height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3'}}>
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
<Text>?</Text>
</Tooltip>
</View>
</TouchableHighlight>
and also tried this
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
<Icon.Button name="help-circle"
backgroundColor="##3b5998"
borderColor="##3b5998"
color="##3b5998">
</Icon.Button>
</Tooltip>
but none of these two works. anyone can advise on what's wrong with my code and how I can fix it.
also, any recommendation on how I should deal with text in the future when I need them to be clickable and I want to extend the clickable area to a larger area than just the text itself.
thanks
Try this
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
<View style={{ height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3' }}>
<Text>?</Text>
</View>
</Tooltip>
Basically you have to wrap the element inside tooltip
Also look at hitslop property of View to increase touchable area of view , its an alternative to increase touchable area by height and padding