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>
Related
So I try to navigate between 2 screens. I created a button on the tab bar(right)
but the problem is that it always says that is undefined.
Here is the code:
static navigationOptions = {
headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
backgroundColor: '#BA272A',
},
headerRight: (
<View style={{paddingRight:11}}>
<Button
color="#ff5c5c" title="Tombola"
onPress={() => this.props.navigation( 'Post', { name: 'Jane'} )}
/>
</View>
),
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
}
You can use react-native-router-flux (npm install --save react-native-router-flux)
just make one Navigator.js file and define each page you wanted to navigate.
import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';
const Navigator = () => {
return (
<Router>
<Scene key="root">
<Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial />
<Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
</Scene>
</Router>
);
};
export default Navigator;
now in your App.js file add this:
import Navigator from './src/Navigator.js';
export default class App extends Component<Props> {
render() {
return (
<Navigator />
);
}
}
now in your login.js when you click on login button write this:
import { Actions } from 'react-native-router-flux';
onLoginClick() {
Actions.feedscreen();
}
Thats it.. happy coding.
Looking at https://reactnavigation.org/docs/4.x/redux-integration/#setparams-from-your-screen, probably you should do:
static navigationOptions = ({navigation}) => ({
headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
backgroundColor: '#BA272A',
},
headerRight: (
<View style={{paddingRight:11}}>
<Button
color="#ff5c5c" title="Tombola"
onPress={() => navigation( 'Post', { name: 'Jane'} )}
/>
</View>
),
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
When using this inside a static property or method it will refer to the class itself and not the instance of the component.
using react-navigation v5 component base api :
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button title="navigate" onPress={()=> props.navigate("home")} />
</View>
);
}
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button title="navigate" onPress={()=> props.navigate("details")} />
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
or with old v4 api:
// Other code for HomeScreen here...
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
// Other code for App component here...
Inside these components you can asses navigation prop, which consists of helper functions for navigating.Some frequently used one are
naviagtion.navigate("screenName") //navigates to new screen
navigation.goBack() // go backs to previous screen
navigation.push("screen name") // navigates to new screen with stack animation . this only works for stackNavigator
navigation.pop()// navigates to previous screen with stack animation . this only works for stackNavigator
I am new to react native. I have been using createStackNavigator to be able to navigator throughout my app.
I have created a number of different stacks. Within each stack I have my header code. I have a button in each header that I want to be able to press in order to navigate to another screen, however this screen is within another stack. How would I get access to it?
Here is my code.
export const SearchStack = createStackNavigator({
Search: {
screen: SearchScreen
});
export const HomeStack = createStackNavigator({
Home:
{
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Home',
headerRight: (
<Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
onPress={() => navigation.navigate('SearchStack', {}, NavigationActions.navigate({ routeName: 'Search'}))} />
),
headerTitleStyle:{
color: "white",
alignSelf: "center",
fontSize: 20
},
headerStyle:{
backgroundColor: "#404042"
}
}),
},
Listen: {
screen: MainScreen,
navigationOptions: {
headerTitle: 'Listen',
headerRight: (
<Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
onPress={() => navigation.navigate('Search')} />
),
headerTitleStyle:{
color: "white",
alignSelf: "center",
fontSize: 20
},
headerStyle:{
backgroundColor: "#404042"
}
}
},
},
});
Normally you can call any screen you want as long it is in one of the stacks.
I am using react navigation, and I want to update some text whenever user change the data.
const AppDrawNavigator = createDrawerNavigator({
Home: {screen: HomeStackNavigator},
Rewards: {screen: RewardsStackNavigator},
Flavours: {screen: FlavoursTabNavigatorClass}
}, {
contentComponent: CustomeDrawer
})
const CustomeDrawer = (props) => {
return(
<SafeAreaView style={{flex:1}}
forceInset={{ top: 'always', horizontal: 'never' }}>
<View style={{height: 150, backgroundColor:'white'}}>
<Text style={{color: 'black', fontSize: 18, fontWeight: 'bold'}}>customDrawer</Text>
<Text> {/* Here i want to display updated text */} </Text>
</View>
<ScrollView>
<DrawerNavigatorItems {...props} />
</ScrollView>
</SafeAreaView>
)
}
I got the answer. I don't know whether this is correct approach or not.? But this seems to working for me.
const CustomeDrawer = (props) => {
return(
<SafeAreaView style={{flex:1}}
forceInset={{ top: 'always', horizontal: 'never' }}>
<View style={{height: 150, backgroundColor:'white'}}>
<Text style={{color: 'black', fontSize: 18, fontWeight: 'bold'}}>My customeDrawer Text</Text>
</View>
<ScrollView>
**<CustomDrawer />**
<DrawerNavigatorItems {...props}/>
</ScrollView>
</SafeAreaView>
)
}
{/* Here we will define the main screen of drawer navigator */}
const AppDrawNavigator = createDrawerNavigator({
Home: {screen: HomeStackNavigator},
Rewards: {screen: RewardsStackNavigator},
Flavours: {screen: FlavoursTabNavigatorClass}
}, {
contentComponent: CustomeDrawer
})
In my custom Drawer component:
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, SafeAreaView, AsyncStorage} from 'react-native';
export default class CustomDrawer extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
}
}
componentDidMount = () => {
AsyncStorage.getItem('name').then((name) => this.setState({name}))
}
render() {
return (
<SafeAreaView style={{flex:1, width: '100%', alignItems:'center', justifyContent:'center'}}>
<Text style={{width:'100%'}}>
{this.state.name}
</Text>
</SafeAreaView>
);
}
}
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>
)
I am overlapping a StackNavigator on a DrawerNavigator. This is my code
const AppNavigator = StackNavigator({
Home: {
screen: WelcomeContainer,
navigationOptions: ({navigation}) => ({
headerLeft:
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center'}}>
<Icon name="menu" color='#5c72b0' size={35} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center',
paddingLeft:10,
paddingRight:80 }} onPress={ () => navigation.navigate('DrawerOpen') } />
<ChangeLanguage style={{ margin: 30 , padding: 30}} />
</View>,
headerRight:
<HeaderUserInformation />,
})
},
Settings: {
screen: SettingsContainer,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.title
})
},
About: {
screen: About,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.title
})
}
})
const AppDrawer = DrawerNavigator({
Home: {
screen:StackNavigator({
Home: {
screen: WelcomeContainer,
navigationOptions: {
}
}
})
},
Settings: {
screen: StackNavigator({
Category: {
screen: SettingsContainer,
navigationOptions: {
title: "Settings"
}
}
})
}
})
The drawer works properly but there is a problem with the header. This was not the case before I embed the StackNavigator on the DrawerNavigator. The problem is that I customized the header by adding buttons and I am not seeing them anymore on the header. And When I navigate to a new Screen I am not seeing the back button on the header anymore. Do you have an idea what could the problem be?