I am using the React native navigation v5
I create a header on separated file and that file use this in
stack header
make a button for open drawer navigation
header file
OpenMenu=(navigation)=>{
navigation.openDrawer();
}
export default function Header({navigation,title}) {
return (
<View style={styles.container}>
<MaterialIcons name="menu" size={28} onPress={()=> this.OpenMenu(navigation)} style={styles.icon}/>
<View style={styles.header}>
<View style={{alignItems:'center'}}>
<Text style={styles.headerText}> {title} </Text>
</View>
</View>
</View> );}
use this header
<Stack.Screen name="Dashboard" component={Dashboard}
options={{
headerTitle:(navigation)=> <Header navigation={navigation} title={"Dashboard"}/>,
headerStyle: { backgroundColor: '#88aa31', }, headerLeft: null, }} />
can any tell me how can fix this issue
Related
lets suppose we got the following:
Navigation screen:
<Drawer.Navigator
initialRouteName="Home"
drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Scroll to aboutus"/>
</DrawerContentScrollView>
)}
}>
<Drawer.Screen options={{
drawerLabel: 'Home',
title: ''
}} name="Home" component={HomeScreen} />
</Drawer.Navigator>
Home screen:
export default function Home() {
return (
<ScrollView>
<View>
<Text>One</Text>
</View>
<View style={{marginTop:100}}>
<Text>two</Text>
</View>
<View style={{marginTop:100}}>
<Text>three</Text>
</View>
<View style={{marginTop:100}}>
<Text>four</Text>
</View>
<AboutUs/>
</ScrollView>
);
}
How could I use this DrawerItem kinda like an anchor linked to about us, so when I click on it my scrollview gets scrolled to the <AboutUs/> part?
I'm trying:
export default function Navigator() {
return (<>
<Stack.Navigator screenOptions={{
headerShown: false
}} initialRouteName="Home" >
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Feed" component={FeedScreen} />
</Stack.Navigator >
<CustomTabBar />
</>
);
}
And:
export const CustomTabBar = () => {
const onHomePress = () => { }
return (
<SafeAreaView style={styles.safeAreaView}>
<View style={styles.navContainer}>
<View style={{ flex: 1 }}>
<Avatar rounded source={{ uri: 'https://source.unsplash.com/random/100x100?profile picture,smile' }} containerStyle={styles.avatar} />
</View>
<View style={{ flex: 1 }}>
<Chip
title={<View style={styles.pillContainer}>
<Ionicons name='search' color='white' />
<TouchableOpacity onPress={onHomePress}>
<Ionicons name='ios-home' color='white' />
</TouchableOpacity>
<Ionicons name='planet' color='white' />
</View>}
type="outline"
containerStyle={styles.chipContainer}
/>
</View>
<View style={{ flex: 1 }}>
<Animated.View style={styles.btnCircle}>
<TouchableOpacity
style={{
flex: 1,
justifyContent: 'center'
}}
onPress={() => Alert.alert('Click Action')}>
<Ionicons name={'paper-plane-outline'} color={'white'} size={25} />
</TouchableOpacity>
</Animated.View>
</View>
</View>
</SafeAreaView>
);
}
If I move the CustomTabBar inside the Stack.Navigator, we get an error.
but this creates the white area at the bottom:
How can I have my custom navigation element?
StackScreen at custom bottom tab bar is not bad idea.
If you want custom bottom tab bar for use custom tabbar, actually still you can use BottomTabBar but if you want use stack screens, try like this.
<>
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name={"TestScreen"} component={TestScreen} />
</Stack.Navigator>
</NavigationContainer>
{/* custom tab bar */}
<View
style={{
position: "absolute",
bottom: 0,
width: "100%",
alignItems: "center",
}}>
<Text>TEST</Text>
<Text>TEST</Text>
<Text>TEST</Text>
<Text>TEST</Text>
</View>
</>
In your case, White Space is'nt custom tab bar's background. And stack screen's height is not "100%".
So In case, you can use position: "absolute", bottom: 0 then screen get full area, and cover the deault background(whitespace).
I am using the #react-navigation/native library. I have a drawer with some screens in them. I can click on the links and navigate to the appropriate screen. I would like to place an image above the links in the drawer. I am using the property drawerContent to do this. However, when I do this it removes the links. I cant figure out how to have the links and the image above the links in the drawer. What is the correct way to do this? Here is some code for my drawer with the drawerContent.
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Screen1"
drawerContent={() => (
<View style={{height: "10%"}}>
<Image
style={{width: "90%"}}
resizeMode="contain"
source={require('../../../assets/new-logo/textSide.png')}/>
</View>
)}
screenOptions={ ({navigation}) => ({
drawerContainerStyle: {paddingTop: 100},
drawerLabelStyle: {
fontSize: KbStyles.properties.drawerLabelSize,
color: "white"
},
headerTintColor: {color: KbStyles.properties.white},
headerStyle: {
backgroundColor: KbStyles.properties.black
},
headerTitleStyle: {
fontSize: KbStyles.properties.headerSize,
color: "white"
},
headerLeft: () => (
<TouchableWithoutFeedback
onPress={() => {navigation.toggleDrawer()}}>
<Image
resizeMode="contain"
style={{height: "50%"}}
source={require("../../../assets/menu.png")}
/>
</TouchableWithoutFeedback>
),
drawerActiveBackgroundColor : KbStyles.properties.red,
drawerActiveTintColor: KbStyles.properties.white,
drawerStyle: {
backgroundColor: "black",
width: 300
}
})}
>
<Drawer.Screen name="Screen1" component={Screen1} />
<Drawer.Screen name="Screen2 component={Screen2} />
<Drawer.Screen name="Screen3" component={Screen3} />
</Drawer.Navigator>
</NavigationContainer>
Here is also an image showing what I would like to achieve.
What is the correct way to do this?
You can try this
Under the Drawer.Navigator you can use drawerContent as,
drawerContent={(props)=> {
return(
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<ImageBackground source={require("../Assets/Vrda1img2.jpg")} style={{justifyContent:"space-between",alignItems:"center",padding:20,marginBottom:20,backgroundColor:"rgb(0,0,0)",borderBottomWidth:2,borderColor:Colors.secondary}} imageStyle=
{{opacity:0.4}}>
<Image source={require("../Assets/vector.png")} style={{width:70,height:70,borderRadius:35,borderWidth:2,borderColor:Colors.white}}/>
<Text style={{fontSize:20,fontWeight:"bold",color:Colors.white}}>{userDetail?userDetail.name:"Not Available"}</Text>
<Text style={{color:Colors.light}}>{userDetail?userDetail.email:"Not Available"}</Text>
</ImageBackground>
<DrawerItemList {...props}/>
</DrawerContentScrollView>
<TouchableOpacity onPress={()=>{logout()}} style={{position:"relative",right:0,left:0,bottom:5,backgroundColor:"rgb(231,230,230)"}}>
<Text style={{backgroundColor:"rgba(162,160,160,0.29)",width:"100%",height:40,textAlign:"center",paddingTop:8}}><SimpleLineIcons name={"logout"} size={15} color={Colors.primary}/> LogOut</Text>
</TouchableOpacity>
</View>
)
}
}
I give you the reference of my code where you can add Image under the Image background you can also use Uri to add an image as a link.
Issue Description
I want to toggle two different native-base drawers on the same screen or the same class, how can we do it. if I use drawer inside another drawer, only the main drawer is toggled.
react-native version - 0.60.5, native-base version - ^2.13.8.
Expected behaviour
I want to toggle two different drawers on the same screen.
Actual behaviour
only the main drawer is toggled whether main drawer or the second drawer is toggled.
sample code which I tried is below there.
render() {
return (
<ImageBackground
source={require('#images/background.png')}
style={{ width: '100%', height: '100%' }}>
<Drawer
side="right"
openDrawerOffset={0.3}
ref={(ref) => { this.drawer = ref; }}
content={<SideMenu navigation={this.props.navigation} name={this.state.title} onItemSelected={this.onMenuItemSelected} closeDrawer={this.closeDrawer} />}
onClose={() => this.closeDrawer} >
<View style={{ flex: 1 }}>
<Header
title={"Header"}
icon='menu'
onPressMenu={this.onPressMenu}
/>
<Drawer
side="right"
openDrawerOffset={0.3}
ref={(ref) => { this.drawer = ref; }}
content={<SecondSideMenu navigation={this.props.navigation} name={this.state.title} onItemSelected={this.onMenuItemSelected2} closeDrawer={this.closeDrawer} />}
onClose={() => this.closeDrawer} >
<View style={styles.subContainer}>
<View style={styles.iconView}>
<TouchableOpacity
onPress={() => this.onPressSubMenu()}
>
<Icon name={'menu'} size={width / 8.5} color="white" />
</TouchableOpacity>
</View>
</View>
<ContactInformation navigation={this.props.navigation} />
</Drawer>
</View>
</Drawer>
</ImageBackground>
);
}
}
I am new in react native and I want to show data from server I used with below code and don't know how to use here fetch method for call api.
This is drawer navigator:
const AppDrawerNavigator = DrawerNavigator({
Logout: {
screen: Login,
navigationOptions: {
drawerLabel: 'Logout',
drawerIcon: () => (
<Icon name="sign-out" size={18} color="#fff" />
)
},
}
// Test: Test,
},
{
drawerBackgroundColor: "black",
contentComponent: CustomDrawerContentComponent,
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#fff',
activeBackgroundColor: '#f673d7',
itemStyle: {
fontSize: 18,
},
},
});
I want to use dynamic image and name in below component:
const CustomDrawerContentComponent = (props) => (
<View>
<ScrollView>
<View style={styles.profileBg}>
<ImageBackground style={{width: Platform.OS === 'ios' ? 190 : width/1.5, height: 210}} source = {require('../images/banner-2.jpg')}>
<View style={styles.profileHeader}>
<TouchableHighlight>
<View style={styles.profilepicWrap}>
<Image style={styles.profilePic}
source={require('../images/Female-Avatar.png')}
/>
</View>
</TouchableHighlight>
<Text style={styles.name}>Rahul Mishra</Text>
<Text style={styles.changePassword}><Icon name="map-marker" size={16} color="#fff" style={{paddingRight:5}} /> Miamibeach, FL</Text>
</View>
</ImageBackground>
</View>
<DrawerItems
{...props}
getLabel = {(scene) => (
<View style={{borderBottomWidth:1,borderBottomColor: "#fff",width:width/1.9}}>
<Text style={{color:'#fff',fontSize:18,paddingBottom:10,paddingTop:10}}>{props.getLabel(scene)}</Text>
</View>
)}
/>
</ScrollView>
</View>
);
In above code I used const AppDrawerNavigator for calling DrawerNavigator and for contentComponent I used CustomDrawerContentComponent so I am very confusing here how to use API method here.
You can create a component and call this in content component like below:
DrawerUserDetail is a separate component and you can code anything there as normally we are doing...That works for me.
contentComponent: (props) => (
<View>
<ScrollView>
<DrawerUserDetail navigation={props.navigation} />
<DrawerItems
{...props}
getLabel = {(scene) => (
<View style={{borderBottomWidth:0.5,borderBottomColor: "grey",width:width/1.9}}>
<Text style={{color:'#333',fontSize:18,paddingBottom:14,paddingTop:14}}>{props.getLabel(scene)}</Text>
</View>
)}
/>
<DrawerCustom navigation={props.navigation} />
</ScrollView>
</View>
)