I use the react-navigation to set the header and headerRight.
but my headerRight icon button cannot be centered on the right.
following is my code
Activate_qrscan: {
screen: Activate_qrscan,
navigationOptions: ({navigation}) => ({
title: '123',
headerRight: (
<Button
transparent
onPress={ () => navigation.dispatch(navigateAction) }>
<Icon
name='close'
style={ { color: 'white' } } />
</Button>
),
headerStyle: {
backgroundColor: '#3b5998',
},
headerRightContainerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'normal',
},
}),
},
I have added the headerRightContainerStyle but it still not work!
Can anyone help me?
Don't use the button from react-native-elements, it adds bloat, and some stylish that you may not even need, remove your headerRightContainerStyle and switch button for this code, be aware that you need the Icon class from react-native-elements.
headerRight: (
<View style={{flexDirection: "row",justifyContent: "flex-end",paddingRight:10,width: 120}}>
<TouchableOpacity
onPress={() => console.log('Hey im centered')}
>
<Icon type="font-awesome" name="cog" color="white" />
</TouchableOpacity>
</View>
)
Related
I have a custom DrawerContent component and I am unable to navigate to a screen from it using navigator.navigate('DrawerHelp').
I am still getting this error and I really have no idea how to fix it.
I am trying to navigate from the Help button to its own component called DrawerHelp.
issue The action 'NAVIGATE' with payload {"name":"DrawerHelp"} was not handled by any navigator
This is my code below.
function DrawerComponent() {
return (
<Drawer.Navigator
drawerContentOptions={{activeBackgroundColor: '#efefef', activeTintColor: '#000000'}}
initialRouteName="Tabs"
drawerStyle={{ backgroundColor:'#ffffff', width:'85%', paddingBottom: 50 }}
drawerContent={
props => ( <CustomDrawerContent {...props} /> )
}>
<Drawer.Screen name="Dashboard" component={Tabs} options={{
drawerIcon: config => <Ionicons name={'ios-home'} size={18} color={'#444'} headerTitle="AAA" />,
}} />
<Drawer.Screen name="Help" component={DrawerHelp}
options={{
drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>,
}}
/>
</Drawer.Navigator>
);
}
export function CustomDrawerContent (props) {
const [ tabs, setTabs ] = useState([
{
name: 'Help',
icon: 'ios-call',
borderColor: '#e7c53f',
backgroundColor: '#fff',
color: '#e7c53f',
fontWeight: '500'
},{
name: 'Share',
icon: 'ios-megaphone',
borderColor: '#e7c53f',
backgroundColor: '#fff',
color: '#e7c53f',
fontWeight: '500'
},{
name: 'Logout',
icon: 'ios-log-out',
borderColor: '#e7c53f',
backgroundColor: '#fff',
color: '#e7c53f',
fontWeight: '500'
}
]);
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<View style={{ padding: 15 }}>
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
height: 50,
alignItems: 'center'
}}>
{
tabs.map((tab) => {
return (
<TouchableOpacity
key={tab.name}
style={{
height: '100%',
flex: .32,
alignItems: 'center',
borderWidth: .5,
borderColor: tab.borderColor,
backgroundColor: tab.backgroundColor,
borderRadius: 10,
flexDirection: 'row',
justifyContent: 'space-evenly'
}}
onPress={() => {
if(tab.name == 'Logout') {
// navigation.toggleDrawer();
}
if(tab.name == 'Share') {
// onShare();
}
if(tab.name == 'Help') {
props.navigation.navigate('DrawerHelp');
}
}}>
<Ionicons name={tab.icon} size={18} style={{ color: tab.color }} />
<Text style={{ color: tab.color, fontWeight: tab.fontWeight }}>{trans(tab.name, cntx.lang)}</Text>
</TouchableOpacity>
)
})
}
</View>
</View>
</DrawerContentScrollView>
);
}
It is not working because you have defined DrawerComponent with name 'Help'
<Drawer.Screen name="Help" component={DrawerHelp}
options={{drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>
if(tab.name == 'Help') {
props.navigation.navigate('DrawerHelp'); <== Change here to Help not DrawerHelp
}
Will be providing images in the bottom to show what I mean
I was hoping to get some advice on what might be going wrong on my end. I keep trying to find different packages but am unable to get what I want. When I tried using react-native-floating-action it gave me the right size I was looking for except I can't control how the closing is done. Like I don't want it to close when an item gets pressed.
I also tried using react-native-paper but the icons are so tiny. If I try to resize it, they start to get cut off so was hoping some advice in regards to one of the two or something else if there is.
CODE
// react-native-paper
<Provider>
<Portal>
<FAB.Group
style={{
backgroundColor: 'transparent',
height: '100%',
width: '100%'
}}
open={isOpen}
fabStyle={{
marginBottom: 200,
backgroundColor: 'red'
}}
icon={(props) => (
<MaterialIcons
{...props}
name="add-circle-outline"
size={30}
color="white"
style={{
backgroundColor: 'blue',
position: 'absolute',
left: 0,
fontSize: 50,
width: 200
}}
/>
)}
actions={[
{
icon: (props) => {
console.log(props);
return (
<Avatar
containerStyle={{
backgroundColor: 'blue'
}}
size={30}
rounded
source={{
uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'
}}
>
<AntDesign
style={{ position: 'absolute', left: 10, top: 15, color: 'red' }}
name="pluscircle"
size={15}
color="white"
/>
</Avatar>
);
},
onPress: () => console.log('Pressed star'),
style: {
backgroundColor: 'transparent',
size: 50,
backgroundColor: 'white'
}
},
{
icon: (props) => {
console.log(props);
return <AntDesign name="heart" size={props.size} color={props.color} />;
},
onPress: (e) => console.log(e)
},
{
icon: (props) => {
console.log(props);
return (
<AntDesign
{...props}
name="message1"
color={props.color}
style={{ width: props.size, height: props.size }}
/>
);
},
onPress: () => console.log('Pressed notifications')
}
]}
onStateChange={onStateChange}
onPress={() => {
setIsOpen((prev) => !prev);
if (isOpen) {
// do something if the speed dial is open
}
}}
/>
</Portal>
</Provider>
// react-native-floating-action
<FloatingAction
onPressMain={(e) => console.log(e)}
animated={false}
color={'transparent'}
showBackground={false}
distanceToEdge={{ vertical: 100, horizontal: 20 }}
floatingIcon={
<View
style={{
height: '100%',
width: '100%',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<MaterialIcons name="add-circle-outline" size={50} color="white" />
</View>
}
position={'right'}
actions={actions}
onPressBackdrop={(s) => console.log(s)}
onPressItem={(name) => {
console.log('PRESSING');
// console.log(floatB);
// floatB.animateButton();
if (name === 'bt_language') {
navigation.navigate('Language');
}
}}
/>
In the image below. It shows what happens when i try to increase the side of the icon while using react-native-paper.
The next image below is the react-native-floating-action. The icons are much better but the issue I'm having is mostly I'm unable to prevent the actions from collapsing after clicking on an item. I'm hoping to only open and close when the main button is pressed.
Thank you for all the help and advice about this one.
I have this component that contains a list that is covered on the bottom side by the TabNavigator. Any ideas how to fix it? Is there only a styling way?
render() {
return (
<Container style={{ paddingBottom: 5 }}>
<Header
backgroundColor={'#1E6EC7'}
placement="left"
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'Programul Zilei', style: { color: '#fff', fontWeight: 'bold', fontSize: 22 } }}
rightComponent={<Icon name="ios-add" style={{ color: 'white' }} onPress={() => {
const {students}=this.props;
this.props.navigation.navigate('AddClass', {students})}} />}
/>
<List>
<FlatList
data={this.props.classes}
keyExtractor={(item, index) => `${index}`}
extraData={this.state}
renderItem={({ item }) => {
<ListItem
leftIcon={<View style={{ flexDirection: 'row' }}><Icon1 name="times" size={24} style={{ paddingRight: 10, color: 'red' }} onPress={() => {
this.setState({ currentStudent: wantedEmployee })
this.setState({ currentClass: item })
this.props.classDeleteModalShowUp();
}} />
}
/>
</List>
</Container>
You can hide the tab navigator for that specific screen setting
tabBarVisible as false in navigationOptions.
But I think the issue is because of the header, you can try using the react navigation header bar.
Otherwise you could add to the container a paddingBottom of the same height as the header
I have a project in which I want to add a button with the icon "+", but the touchable opacity is not working as a button, I click on it, and doesn't makes the opacity, and I console.log(), to see if the button is working and only the opacity feedback is the issue, but is not working as well.
This is my render:
render() {
if (this.props.onNetwork)
return (<Loader />);
const navigate = this.props.navigation.navigate;
const { solicitacoes } = this.props.solicitacoesStore;
return (
<View style={styles.container}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<H2 style={styles.header2}>PROJETOS</H2>
<TouchableOpacity onPress={() => { console.log('puff') }}>
<Icon style={styles.icon} name='add' />
</TouchableOpacity>
</View>
<Divider color='black'/>
<ListaItens solicitacoes={solicitacoes} onPress={ this.goToDescritivo }/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
paddingHorizontal: metrics.width * 0.05,
paddingTop: metrics.height * 0.03
},
icon: {
fontSize: fonts.superbig * 1.5,
flex:1
},
divider: {
paddingHorizontal: 10
},
header2: {
fontWeight: 'bold',
marginVertical: 5,
flex: 1
},
});
How to add a third button to the header? I want to create something like this
I added the the left and the right components with this code:
const AppNavigator = StackNavigator({
Home: {
screen: AppDrawer,
navigationOptions: ({navigation}) => ({
headerLeft: <Icon name="menu" size={35}
onPress={ () => navigation.navigate('DrawerOpen') } />,
headerRight: <HeaderUserInformation />,
})
},
How can I add the eath component in the shown position? I tried this but I got an error
headerRight:
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<HeaderUserInformation />
<earthComponent />
</View>