I'm trying to figure out, how can i create a custom navigation header component, which will look like this:
I have a few questions. How should i go about making these icons from a png file clickable? Should i extract them one by one from that file and make them clickable somehow? Assuming i have a clean layout of this header how can i set this to be my background of this header? How can i deliver this component to other people working on the same thing such that it will be easy for them to implement its navigations functions?
Assuming our stack navigator is in App.js file and it looks like that:
import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from "#react-navigation/stack";
import Home from "./screens/Home";
import Report from './screens/Report';
export default function App() {
const Stack = createStackNavigator();
return (
/* Nawigacja podstawowa, w stylu Stosu */
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home"
component={Home}
options={{title:'Strona Główna'}}
/>
<Stack.Screen name="Report" component={Report} />
</Stack.Navigator>
</NavigationContainer>
);
}
You can create this custom header as a component, say HeaderBar.js and then add this customer header to the screen/navigator in its options
Eg:
<Stack.Screen
name="Home"
component={Home}
title="Home"
options={{
title:'Strona Główna',
header: () => <HeaderBar />,
}}
/>
or add header in Stack.Navigator.
Eg:
<Stack.Navigator initialRouteName="Home" screenOptions={{header: () => <HeaderBar />}}>
Related
So I had a navigation system in place already, and wanted to add a Drawer menu for specific navigations starting on the main shopping page once the user had logged in. The issue I am having is after following some directions online on how to have multiple navigations of different types the drawer buttons just simply don't do anything when clicked on. any insight or help is much appreciated.
I have the NavigationContainer on the app.js file, containing the DrawerMenu file, through which I imported the main StackNavigator file.
Main StackNavigator file
// Main Nav
import PasswordVerify from '../screens/PasswordVerify';
import HomeShopping from '../screens/HomeShopping';
import StorePage from '../screens/StorePage';
// Drawer Screens
import ProfileScreen from '../screens/DrawerScreens/ProfileScreen';
import MyListingsScreen from '../screens/DrawerScreens/MyListingsScreen';
import SellerDashBoardScreen from '../screens/DrawerScreens/SellerDashBoardScreen';
const Stack = createNativeStackNavigator();
const Navigation = () => {
return (
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
{/* Drawer Screens */}
<Stack.Screen name="ProfileIndex" component={ProfileScreen} />
<Stack.Screen name="MyListingsIndex" component={MyListingsScreen} />
<Stack.Screen name="SellerDashboardIndex" component={SellerDashBoardScreen} />
</Stack.Navigator>
DrawerMenu file
import { createDrawerNavigator } from '#react-navigation/drawer';
import Navigation from './StackNavigator';
const Drawer = createDrawerNavigator();
const DrawerMenu = () => {
return (
<Drawer.Navigator screenOptions={{headerShown: false}}>
<Drawer.Screen name="Profile" component={Navigation} />
<Drawer.Screen name="MyListings" component={Navigation} />
<Drawer.Screen name="SellerDashboard" component={Navigation} />
This is just what I interpreted from the guide I read and followed the best I could, and they had working examples, everything matches up except for the fact that when I pull out the Drawer menu, clicking the names there does nothing.
Thank you again for your time and help.
Tried implementing drawer navigation to my react-native app while I had another main navigation in place already for all non-drawer links. the result was the links on the drawer not responding at all.
I would understand your idea as follows:
You have 3 screens: PasswordVerify, HomeShopping, StorePage.
You have a Drawer with 3 screens: ProfileScreen, MyListingsScreen, SellerDashBoardScreen.
You want from PasswordVerify(or HomeShopping or StorePage) redirect to Drawer.
You want after redirect, you can see your drawer and can press(or slide) to display drawer menu.
And i have an idea for your case:
Define Drawer.
Use Drawer(defined) like a Stack.
Import Drawer in Stack.Navigator.
This is code:
const Drawer = createDrawerNavigator();
const DrawerNav = () => {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="ProfileScreen" component={ProfileScreen} />
<Drawer.Screen name="MyListingsScreen" component={MyListingsScreen} />
<Drawer.Screen name="SellerDashBoardScreen" component={SellerDashBoardScreen} />
</Drawer.Navigator>
);
};
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
<Stack.Screen name="DrawerNav" component={DrawerNav} />
</Stack.Navigator>
</NavigationContainer>
);
}
I'm currently using the material-bottom-tabs to implement navigation in my mobile app.
For some odd reason, it isn't displayed correctly but cut off at the bottom of my screen.
This happens regardless of whether I activate gesture control (so the Android built-in navigation bar disappears) or not.
If I add padding to the style of my Tabs.Navigator, then the Tab-Navigation-Bar is still cut off, now by a white padding.
I tried to wrap my Tab.Navigator inside a SafeAreaView (from react-native-safe-area-context) but if I do this, I just get a plain white screen back.
This is my code:
import React, { Component } from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import DrawerHome from './DrawerHome';
import Bookmarks from './Bookmarks';
const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();
//const insets = useSafeArea();
class App extends Component {
constructor(props) {
super(props);
this.state = {
userToken: 1, // set to 'null' in production state
};
}
render() {
return this.userToken === null ? (
<Stack.Screen name="LogIn" component={LoginScreen} />
) : (
<SafeAreaProvider>
<NavigationContainer>
<SafeAreaView>
<Tab.Navigator style={{ paddingBottom: '10%' }}>
<Tab.Screen
name="Current Schedule"
component={CarouselPage}
options={{
tabBarLabel: 'Current\nSchedule',
tabBarIcon: <Ionicons name="ios-calendar" size={20} />,
}}
/>
<Tab.Screen name="Resources" component={ResourceScreen} />
<Tab.Screen
name="Schedule Selection"
component={ScheduleSelectionScreen}
/>
<Tab.Screen name="About" component={AboutScreen} />
</Tab.Navigator>
</SafeAreaView>
</NavigationContainer>
</SafeAreaProvider>
);
}
}
export default App;
A screenshot of the display issue
Try this:
// ...
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Current Schedule"
component={CarouselPage}
options={{
tabBarLabel: 'Schedule',
tabBarIcon: ({}) => (
<Ionicons name="ios-calendar" size={20} />
),
}}
/>
// ...
</Tab.Navigator>
</NavigationContainer>
// ...
The bar isn't cut off. The reason the text was cut off was, because you put a newline in the tabBarLabel text. I recommend to choose shorter words for your tab labels.
The documentation does not seem to provide an option to increase the padding for the label to allow for longer text.
I am new in react native, making a basic app that will find no of cases of corona in every country
so i have made 2 component both on separate file. how to switch from child to child component ?
Now i want to switch between them when i click on a button using stack navigator
App.js
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Splash from './scenes/splash';
import Corona from './scenes/corona';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Corona" component={Corona} />
</Stack.Navigator>
</NavigationContainer>
);
}
splash.js
import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';
export default function splash({navigation}) {
return (
<View style={styles.container}>
<Image
source={require('../assets/corona.jpg')}
resizeMode="cover" style={styles.img} />
<Text style={styles.txt}>
Track the current status {"\n"}
of the COVID-19 and{"\n"}
stay up to date.</Text>
<Text
style={styles.btn}
onPress={() => this.props.navigation.navigate('Corona')}
>Continue</Text>
</View>
)
}
corona.js (navigate to here)
import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';
export default function corona({navigation}) {
return (
<div>
<View>
<Text>Hello next screen</Text>
</View>
</div>
)
}
In splash.js
change
<Text style={styles.btn}
onPress={() => this.props.navigation.navigate('Corona')}>Continue</Text>
to
<Text style={styles.btn}
onPress={() => navigation.navigate('Corona')}>Continue</Text>
And in corona.js
Remove <div> tags in return, react-native doesn't support div tags
Hope this helps!
For my react-native application I implement navigations with react-native-router-flux. I have a Drawer menu which is accessible through several different pages. On IOS everything is fine. Whereas, not all but on some android devices redirecting links on the drawer menu does not work. Is there someone faced this problem before? And how did you solve it? I used react-native-router-flux on all pages of my application. So, I do not want to use another navigation component in Drawer menu.
Here is my drawer menu code.
import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux';
import {Text,View,Container} from 'react-native';
import {Button,Icon} from 'native-base';
export default class SideBarContent extends Component{
constructor() {
super();
}
render()
{
const css = {
"Button": {color: '#E5DDCB',fontFamily: 'SourceSansPro-Regular'}
}
return(
<View style={{top: 80}} >
<Button transparent onPress={()=>Actions.ordersMain()}><Icon style={{color: "#FFF",margin: 10}} name="md-card"/><Text style={css.Button}>Order History</Text></Button>
<Button transparent onPress={()=>Actions.account()}><Icon style={{color: "#FFF",margin: 10}} name="md-person-add"/><Text style={css.Button}>Profile</Text></Button>
<Button transparent onPress={()=>Actions.addresses()}><Icon style={{color: "#FFF",margin: 10}} name="md-navigate"/><Text style={css.Button}>Addresses</Text></Button>
<Button transparent><Icon style={{color: "#FFF",margin: 10}} name="md-information-circle"/><Text style={css.Button}>Account</Text></Button>
<Button transparent onPress={()=>Actions.category()}><Icon style={{color: "#FFF",margin: 10}} name="md-archive"/><Text style={css.Button}>Categories</Text></Button>
</View>
);
}
}
Here is how I implement menu on pages.
return (
<Drawer
tapToClose={true}
open={false}
type="displace"
content={<SideBarContent />}
ref = {(ref) => this._drawer = ref}
openDrawerOffset={width/3}
closedDrawerOffset={0}
styles={drawerStyles}
tweenHandler={Drawer.tweenPresets.parallax}
elevation={0}
onClose={()=>this.onClose()}
>
<Container style={{backgroundColor: '#FFF'}}>
//....Page Code...
</Container>
</Drawer>
);
Here is image of my drawer.
I have a requirement where I want to hide the refresh indicator completely of Refresh Control for Android. I already set most of the color properties to transparent by still see gray circular indicator. Is there any way to completely hide this circular indicator. Link to gif about what is hapenning: http://imgur.com/dkAmkC6
This is my code:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
FlatList,
Dimensions,
RefreshControl,
ToastAndroid,
} from 'react-native';
import Constants from './Constants';
export default class TestList extends Component {
constructor(props) {
super(props);
this.rows =[{id: 1},{id: 2},{id: 3},{id: 4}];
this.state = {
refreshing: false,
}
}
renderItem(row) {
return (
<Text style={{fontSize: 20, borderBottomWidth: 1, borderColor: 'red', color: 'blue', height:80}}>{row.item.id}</Text>
)
}
render() {
return (
<View style={[styles.container]}>
<FlatList
data={this.rows}
renderItem={this.renderItem.bind(this)}
overScrollMode='always'
style={{flex: 1}}
keyExtractor={(item) => item.id}
removeClippedSubviews={false}
keyboardShouldPersistTaps='always'
refreshControl={
<RefreshControl
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
progressBackgroundColor='transparent'
refreshing={this.state.refreshing}
onRefresh={() =>
ToastAndroid.show('Refresh completed with short duration', ToastAndroid.SHORT)}/>}
ref="FlatList"/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
})
[1]: http://imgur.com/dkAmkC6
You can use Platform api from react native.
import { Platform } from 'react-native'
<Flatlist
...other props
refreshControl={
Platform.select({
ios: (
<RefreshControl
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
progressBackgroundColor='transparent'
refreshing={this.state.refreshing}
onRefresh={() =>
ToastAndroid.show(
'Refresh completed with short duration',
ToastAndroid.SHORT
)
}
/>
)
})
}
/>
You could conditionally render the RefreshControl component so that it only renders when you want it to.
The react docs discuss some techniques here: https://facebook.github.io/react/docs/conditional-rendering.html
But for simplicity's sake, I prefer to use the https://github.com/ajwhite/render-if npm module to conditionally render the component based on a flag in your component's state or in a redux store.
I had the same issue and wanted the same thing, but did not get it for android, so I tried the prop. progressViewOffset={number}, up-to such that the pull to refresh worked as well as the loading icon was hidden(was above the view). This is not proper solution but it worked for me.
This works for me on iOS (have not tested on Android):
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={this.onRefreshHandler.bind(this)}
title='Pull to refresh'
tintColor='transparent'
/>
}