here is my AppNavigator.js
const StackNavigator = createStackNavigator(
{
LoginScreen: LoginScreen,
RegisterScreen: RegisterScreen,
Tabs:Tabs,
Detail:DetailScreen
},
{
initialRouteName: 'LoginScreen',
headerMode: 'none',
});
export default createAppContainer(StackNavigator)
here is my Tabs.js
<Tab.Navigator
tabBarOptions={{
showLabel: false,
style:{
position: 'absolute',
bottom:5,
left:5,
right:5,
elevation:0,
backgroundColor: '#068b71',
borderRadius:10,
height: 50,
...styles.shadow
}
}}>
<Tab.Screen name="Home" component={HomeScreen}
options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image source={require('../assets/icons/home.png')}
resizeMode='contain'
style={{
width:25,
height:25,
tintColor: focused ? '#ffffff' : '#748c94'
}}/>
<Text style={{color: focused ? '#ffffff' : '#748c94', fontSize:10}}>Home</Text>
</View>
)
}} >
</Tab.Screen>
<Tab.Screen name="Profile" component={ProfileScreen}
options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image source={require('../assets/icons/profile.png')}
resizeMode='contain'
style={{
width:25,
height:25,
tintColor: focused ? '#ffffff' : '#748c94'
}}/>
<Text style={{color: focused ? '#ffffff' : '#748c94', fontSize:10}}>Profile</Text>
</View>
)
}} />
</Tab.Navigator>
and i want to navigate from list view that exist in homeScreen
<TouchableOpacity style={styles.item} onPress={()=>{navigation.navigate('Detail')}}>
i got this error :
The action 'NAVIGATE' with payload {"name":"Detail"} was not handled by any navigator.
itry many solution but none of them work help please im stuck.
here you can you like this may be this will help you
<TouchableOpacity style={styles.item} onPress={()=>navigation.navigate('DetailScreen')}>
Related
I'm using the react native drawer navigator v6 and I would like to reduce the space between the items and also the space between icon and label, see screenshot:
Does somebody know how?
Thanks!
My custom drawer:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView
{...props}
contentContainerStyle={{ paddingTop: 0 }}
>
<View style={styles.logo}>
<Image source={require("../assets/images/logo.png")} />
</View>
<DrawerItemList {...props} style={{ paddingTop: 0, marginTop: 0 }} />
</DrawerContentScrollView>
);
}
And my drawer navigator:
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
screenOptions={{
gestureEnabled: true,
headerTitleAlign: "center",
headerStyle: {
backgroundColor: "#82bf4e",
borderBottomWidth: 0.5,
shadowColor: "transparent",
borderBottomColor: "#75ad46",
},
headerTitleStyle: {
fontSize: 18,
},
headerTintColor: "#fff",
headerLeft: () => <BackButton />,
}}
>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
header: () => <HeaderContainer />,
drawerItemStyle: { display: "none" },
}}
/>
<Drawer.Screen
name="Mein Team"
component={TeamScreen}
options={{
headerTitle: "Mein Team",
drawerIcon: () => <AntDesign size={20} name="team" />,
}}
/>
...
</Drawer.Navigator>
You can create custom navigator using
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
{/* screens */}
</Drawer.Navigator>
Adjust the spacing as you want.
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.
I have an issue when changing screens. If i pressed in the middle of the tabIcon it's not navigating to the screen but if i clicked a little bit left further the screen changes. I think that like there is a sort of a View in absolute above that is preventing me from pressing (Element inspector).
I have my code like this :
<Tab.Navigator
initialRouteName="HomeNavigator"
tabBarOptions={{
showLabel: false,
keyboardHidesTabBar: true,
labelStyle: {
color: 'red'
},
style: {
backgroundColor: '#008D36' ,
paddingTop: 10,
paddingBottom: 10,
minHeight: 65,
color: '#ffffff',
borderTopColor: '#ffffff',
justifyContent: 'flex-start',
alignItems: 'flex-start'
, }
}}
>
<Tab.Screen
name="Home"
component={HomeNavigator}
options={(navigation, route) => ({
title: 'Home',
tabBarIcon: ({ props, focused }) => (
<TouchableWithoutFeedback {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={LOGO1} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home</Text>
</View>
</TouchableWithoutFeedback>
)
})}
/>
<Tab.Screen
name="Home2"
component={HomeNavigator}
options={(navigation, route) => ({
title: 'Home2',
tabBarIcon: ({ props, focused }) => (
<TouchableWithoutFeedback {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={LOGO2} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home2</Text>
</View>
</TouchableWithoutFeedback>
)
})}
/>
</Tab.Navigator>
I think that flex: 2 is out of place at this position of the tabBarIcon. You can use alignItems or justifyContent without telling the view for flex.
<TouchableWithoutFeedback {...props} >
<View style={{alignItems: 'center'}}>
<Image source={LOGO1} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home</Text>
</View>
</TouchableWithoutFeedback>
in my app home screen I want to custom the header to have two icons in left and right which can be done using:
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
title: '',
headerLeft: () => (
<View style={{ marginLeft: 10 }}>
<Icon.Button
name="ios-menu"
size={25}
color="#000000"
backgroundColor={COLORS.primary}
onPress={() => navigation.openDrawer()}
/>
</View>
),
headerRight: () => (
<View style={{ marginLeft: 10 }}>
<Icon.Button
name="location-outline"
size={25}
color="#000000"
backgroundColor={COLORS.primary}
onPress={() => navigation.openMap()}
/>
</View>
),
}} />
</HomeStack.Navigator>
I want to add additional but to be in the center which will be customized based on my needs, but I have no idea how to implement that as there is nothing called headerCneter:
Perhaps you can take advantage of the header option inside the stack navigator? You can then use the route params to customize your header from there.
You can pass react component in headerTitle:
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: () => {
return (
<View style={st.horizontalRow}>
<LeftIcon />
<TextInput
placeholder="search"
/>
<RightIcon />
</View>
);
},
headerTitleAlign: 'left',
headerTitleContainerStyle: {
left: 40,
right: 0,
},
}} />
I want to show label on left and drawerIcon on right but unable figure out how.
Here is code
<Drawer.Navigator
drawerContentOptions={{
contentContainerStyle: {
backgroundColor: Colors.primary,
height: "100%"
},
labelStyle: { color: "white" }
}}
>
<Drawer.Screen
name="HomeScreen"
component={Home}
options={{ drawerLabel: "Home" }}
/>
<Drawer.Screen
name="Channels"
component={Channels}
options={{
drawerIcon: () => (
<AntDesign
name="pluscircle"
size={20}
color="white"
/>
)
}}
/>
</Drawer.Navigator>
I would like to show "Channels" on left side and plus icon on right side
on your icon, style it with
style={{
alignSelf: "center",
position: "absolute",
right: 5,
}}
so your AntDesign will be like this
<AntDesign
style={{
alignSelf: "center",
position: "absolute",
right: 5,
}}
name="pluscircle"
size={20}
color="white"
/>
try with headerLeft and headerRight
headerLeft: () => (
<Icon
style={{padding: 10}}
onPress={() => {
consol.log("on press}}
color={'white'}
name="menu"
size={30}
/>
<Drawer.Navigator
drawerPosition="right"
drawerType="slide"
initialRouteName="Home"
drawerContent={() => <SideBar />}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="NewIndex" component={NewIndex} />
</Drawer.Navigator>