Clicking on the navbar button the drawer is not opening.
Here is code i have used for button press
if (event.type === 'NavBarButtonPress') {
if (event.id === 'sideDrawerToggle') {
this.props.navigator.toggleDrawer({
side: 'left',
animated: true,
});
}
}
Here is the drawer set up
Navigation.startTabBasedApp({
tabs: [
{
label: 'Find Place',
screen: 'places.FindPlace',
title: 'Find Place',
icon: source[0],
navigatorButtons: {
leftButtons: [
{
icon : source[2],
title : 'Menu',
id: 'sideDrawerToggle'
}
]
}
},
{
label: 'Share Place',
screen: 'places.SharePlace',
title: 'Share Place',
icon: source[1],
navigatorButtons: {
leftButtons: [
{
icon: source[2],
title: 'Menu',
id: 'sideDrawerToggle'
}
]
}
}
],
drawer: {
left: {
screen: 'places.SideDrawer'
}
}
});
And this is what my drawer looks like
import React, {Component} from 'react';
import {View, Text, Dimensions} from 'react-native';
class SideDrawer extends Component {
render() {
return(
<View style={[
styles.container,
{width: Dimensions.get('window').width * 0.8}
]}>
<Text>Drawer</Text>
</View>
);
}
}
const styles = {
container: {
backgroundColor : 'white',
paddingTop: 22,
flex: 1
}
};
export default SideDrawer;
By searching a lot i found that giving a fixed width to drawer solves the problem. But its not solving in my case. I don't know what is wrong with the code, It was working fine.
You can simply use
this.props.navigation.openDrawer();
in your screen .
please check official doc and example from the following link
https://reactnavigation.org/docs/en/drawer-based-navigation.html
https://reactnavigation.org/blog/#drawer-routes-have-been-replaced-with-actions
You can specify a built-in button in your navigatorButtons with id: 'sideMenu' and it will do the magic for you. ie.
...
navigatorButtons: {
leftButtons: [
{
id: "sideMenu"
}
]
},
...
I don't think that is the right way of setting up the drawer navigation. Check out the oficial documentation here: https://reactnavigation.org/docs/navigators/drawer. It shows that each component that the drawer will navigate to is a scene that you define and set up in the Main Component of the app.
I also recommend using the Drawer from NativeBase.io https://docs.nativebase.io/Components.html#Drawer. Which gives you a better look and feel on both iOS and Android, it looks more native to both.
Are you using an iPhone? It seems there's a bug to this in the wix one which affects them but not Android.
Deep links might work https://wix.github.io/react-native-navigation/#/deep-links
Related
I'm recently using Native Base in my React Native app.
I'm creating my customize theme and creating some variant for my buttons.
I want to change background color if button is disabled.
These are default native base variants
[https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts] and I've seen how they're using props.isDisabled to change some props.
But for me console.log are sending me undefined
Here is my code
import { extendTheme } from 'native-base'
import { Dict } from 'native-base/lib/typescript/theme/tools'
const variantLogin = (props: Dict) => {
console.log('const is disabled', props.isDisabled)
return {
bg: props.isDisabled
? theme?.colors?.gray['200']
: theme?.colors?.orange?.main,
_text: {
color: props.isDisabled
? theme?.colors?.gray['500']
: theme?.colors?.white,
},
}
}
export const theme = extendTheme({
colors: {
white: '#ffffff',
black: '#000000',
gray: {
100: '#f5f5f5',
200: '#d8d8d8',
300: '#c4c4c4',
500: '#828282',
800: '#4b4a4a',
900: '#1a1a1a',
},
gold: {
main: '#e7c14d',
},
},
components: {
Button: {
variants: {
login: variantLogin
}
}
}
})
export default theme
Color changes right with
<Button isDisabled={disabled} variant={'login'}>{text}</NativeButton>
It shows and orange button with white letters, but not when is disabled, only more transparency appears.
I don't know if there's a way to pass isDisabled prop, but here's a way to solve it:
const variantLogin = (props: Dict) => {
return {
bg: theme?.colors?.orange?.main,
_disabled: {
bg: theme?.colors?.gray['200'],
},
_text: {
color: theme?.colors?.white,
_disabled: { color: theme?.colors?.gray['500']}
},
}
}
I'm trying to create screen with a FlatList by using my component but why couldn't find the reason why i get error. I also checked React native dev website and see how FlatList works but still have no clue.
I'm pretty new at react native. Sorry if its very basic mistake.
The screen that im trying to create:
My component:
import React from "react";
import { Text, StyleSheet, View, TouchableOpacity, Image } from "react-native";
const ScreenMap = (props) => {
return (
<View>
<TouchableOpacity
onPress={props.path}>
<Image source={props.imageSource} />
</TouchableOpacity>
</View>);
};
const styles = StyleSheet.create({});
export default ScreenMap
Screen script:
import React from "react";
import { FlatList, Text, StyleSheet, View } from "react-native";
import ScreenMap from '../components/ScreenMap'
const BaslicaScreen = () => {
const contentButtons = [
{
title: "ilceler",
image:'../../assets/Baslica/ilceler.png'
},
{
title: "gururHuzurIlham",
image: '../../assets/Baslica/gururHuzurIlham.png'
},
{
title: "ulasim",
image:'../../assets/Baslica/ulasim.png'
},
{
title: "pratikBilgiler",
image:'../../assets/Baslica/pratikBilgiler.png'
},
{
title: "tarihiEserlerVeMuzeler",
image:'../../assets/Baslica/tarihiEserlerVeMuzeler.png'
},
{
title: "etkinlikler",
image: '../../assets/Baslica/etkinlikler.png'
},
{
title: "canakkaleyeOzgu",
image:'../../assets/Baslica/canakkaleyeOzgu.png'
},
]
return (<View style={styles.container}>
<FlatList
data={contentButtons}
keyExtractor={contButton => contButton.title}
renderItem={({ item }) => {
return <ScreenMap imageSource={require(item.image)} />
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "rgba(2,126,179,1)",
},
});
export default BaslicaScreen
Edit i fixed it by changin array to this:
const contentButtons = [
{
title: "ilceler",
image: require('../../assets/Baslica/ilceler.png')
},
{
title: "gururHuzurIlham",
image: require('../../assets/Baslica/gururHuzurIlham.png')
},
{
title: "ulasim",
image: require('../../assets/Baslica/ulasim.png')
},
{
title: "pratikBilgiler",
image: require('../../assets/Baslica/pratikBilgiler.png')
},
{
title: "tarihiEserlerVeMuzeler",
image: require('../../assets/Baslica/tarihiEserlerVeMuzeler.png')
},
{
title: "etkinlikler",
image: require('../../assets/Baslica/etkinlikler.png')
},
{
title: "canakkaleyeOzgu",
image: require('../../assets/Baslica/canakkaleyeOzgu.png')
},
]
and return this :
return <ScreenMap imageSource={item.image} />
you need to pass just image address and not object which is in require() form.
then put require(props.imageSource) inside of your ScreenMap and Image Component.
I'm using react-navigation v3 recently, so as using the createStackNavigator function for stack navigation. So as expected, it should return the default back button on the header in working condition.
But unfortunately, the back button renders perfectly but it's not being able to work.
Below is my code and I've separated a routes.js file for all sorts of navigation routes and importing in the screens accordingly subject to its use.
import ...
import ...
import ...
class Router extends Component{
async componentDidMount() {
await Font.loadAsync({
//...
});
}
render(){
return (
<Navigator />
)
}
}
const StackNavigator = createStackNavigator({
Home: {
screen: Landing
},
Login: {
screen: Login
},
ResetPassword: {
screen: ResetPassword
},
SetPassword: {
screen: SetPassword
},
Signup: {
screen: Signup
},
Dashboard: {
screen: Dashboard
},
MealsRecipe: {
screen: MealsRecipe
}
},{
initialRouteName: 'Home',
headerLayoutPreset: 'center'
})
const Navigator = createAppContainer(StackNavigator);
export default Router;
Can you please figure out the problem behind it?
Thank you :)
After a lot of experiment, surprisingly I found that in headerStyle: giving paddingBottom: messes up the clicking functionality in the back button.
But had no idea, why this?
If anyone has any words about it then please do comment.
I had my headerStyle like below;
headerStyle: {
height: 0,
marginTop: 0,
paddingTop: 10,
paddingBottom: 30,
backgroundColor: '#cb7429'
},
Basically I'm trying to navigate using the drawer , as follow :
Drawer
import React, { PureComponent } from 'react';
import { Navigation } from 'react-native-navigation';
import { List, ListItem } from 'react-native-elements';
const list = [
{
title: 'Home',
icon: 'av-timer'
},
{
title: 'Training',
icon: 'flight-takeoff'
},
];
export default class Drawer extends PureComponent {
_onPress(item) {
console.log(this.props);
//this.props.navigator.push
this.props.navigator.setRoot({
screen: item.title,
title: item.title
});
}
render() {
return (
< List style={{ flex: 1 }} >
{
list.map((item, i) => (
<ListItem
key={i}
title={item.title}
leftIcon={{ name: item.icon }}
onPress={() => this._onPress(item)}
/>
))
}
</List >
)
}
}
Navigation :
import { Navigation } from 'react-native-navigation';
import Drawer from './src/Components/Drawer';
import Home from './src/Screens/Home';
import Training from './src/Screens/Training';
Navigation.registerComponent('Home', () => Home);
Navigation.registerComponent('Training', () => Training);
Navigation.registerComponent('Drawer', () => Drawer);
Navigation.startSingleScreenApp({
screen: {
screen: 'Home', // unique ID registered with Navigation.registerScreen
title: 'Welcome', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
},
drawer: {
// optional, add this if you want a side menu drawer in your app
left: {
// optional, define if you want a drawer from the left
screen: 'Drawer', // unique ID registered with Navigation.registerScreen
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
disableOpenGesture: false, // can the drawer be opened with a swipe instead of button (optional, Android only)
fixedWidth: 500 // a fixed width you want your left drawer to have (optional)
},
style: {
// ( iOS only )
drawerShadow: true, // optional, add this if you want a side menu drawer shadow
contentOverlayColor: 'rgba(0,0,0,0.25)', // optional, add this if you want a overlay color when drawer is open
leftDrawerWidth: 50, // optional, add this if you want a define left drawer width (50=percent)
rightDrawerWidth: 50 // optional, add this if you want a define right drawer width (50=percent)
},
type: 'MMDrawer', // optional, iOS only, types: 'TheSideBar', 'MMDrawer' default: 'MMDrawer'
animationType: 'door', //optional, iOS only, for MMDrawer: 'door', 'parallax', 'slide', 'slide-and-scale'
// for TheSideBar: 'airbnb', 'facebook', 'luvocracy','wunder-list'
disableOpenGesture: false // optional, can the drawer, both right and left, be opened with a swipe instead of button
},
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
});
I have tried setRoot, push , and popToRoot , but nothing works, is there any thing missing here?
I am new to react native, and I am struggling to understand it. This may be a very basic question.
I have a screen and it consists of a searchbar on top of the page and below it there are Tabs. While navigating through the tabs, the searchbar should not be removed (being at the top level).
MainScreen:
export default class MainScreen extends Component {
render() {
return (
<View>
<Text>My search bar here</Text>
<TabBar></TabBar>
</View>
);
}
}
TabBar:
const routeConfiguration = {
TabEvents: { screen: TabEvents },
TabPeople: { screen: TabPeople },
TabGroups: { screen: TabGroups },
TabMap: { screen: TabMap },
}
const tabBarConfiguration = {
tabBarOptions:{
// some options
}
}
export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration)
When running the app, only the text is being displayed My search bar here without the tabs.
To be able to show tabs, the navigator acts like a container with "two views". One is for the screens that you wanna show and, at the bottom, the tabs container.
So, for the MainScreen you just only need to define the tabs/screens that want react navigator to render.
In each screen you will put the header as shown above. You could also define a default header in the navigator props.
MainScreen.js:
const MainScreen = TabNavigator({
TabEvents: { screen: TabEvents },
Second: { screen: SecondPage },
Third: { screen: ThirdPage },
Fourth: { screen: FourthPage },
Fifth: { screen: FifthPage }
}
})
export default MainScreen;
MainScreen.js: (with default header)
const MainScreen = TabNavigator({
TabEvents: { screen: TabEvents },
Second: { screen: SecondPage },
Third: { screen: ThirdPage },
Fourth: { screen: FourthPage },
Fifth: { screen: FifthPage }
}, {
navigationOptions: {
header: <YourHeader />
}
})
export default MainScreen;
TabEvents.js
export default class TabEvents extends Component {
render() {
return (
<View>
<YourHeader />
<MoreStuff/>
</View>
);
}
}
You wil have a more detailed example in the docs ( https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/SimpleTabs.js & https://reactnavigation.org/docs/navigators/tab)
You can wrap your TabNavigator with StackNavigator.
MyTabNavigator.js
const MyTabNavigator = TabNavigator({
ScreenX: { screen: SceenNameX },
ScreenY: { screen: ScreenNameY }
}, {
initialRouteName: 'ScreenX',
tabBarPosition: 'top',
tabBarOptions: {
activeTintColor: '#af0'
}
})
export default MyTabNavigator
MainScreen.js
export default class MainScreen extends Component {
static navigationOptions = {
header: (props) => (
<SearchBar {...props}/>
)
}
render() {
return (
<MyTabNavigator />
)
}
}
MyStackNavigator.js
const MyStackNavigator = StackNavigator({
Main: { screen: MainScreen }
}, {
initialRouteName: 'Main'
})
export default MyStackNavigator
Now you can call MyStackNavigator to load MainScreen which will render the header SearchBar and the body MyTabNavigator.
The way to create a Tab navigator is the following:
tabNavigator.js
import React from 'react'
import { Platform } from 'react-native'
import { TabNavigator, StackNavigator } from 'react-navigation'
const Tabs = TabNavigator({
Home:{ //this is the name of the screen, by default the first screen that you want to show is called Home
screen: component , //this is the component that you want to show in the screen
navigationOptions: {
tabBarLabel: 'some label', //this will be located as a title for the tab
tabBarIcon: ({ tintColor }) => <i> some icon </i>, //this allow you to show a icon in the tab
//the following options are to customize the header, maybe you don't need this.
title: 'some title',
headerStyle:{
backgroundColor: 'blue' // color for the header
},
headerTitleStyle:{
color: 'white' // color for the text on the header
},
header: <YourHeader/>
}
},
// if you need add some other tab repeat the same pattern here OtherScreen:{ ...}
},{
//this are options to customize the tab itself, I added some good ones.
tabBarOptions: {
activeTintColor: Platform.OS === 'ios' ? primary : white,
style:{
height:40,
backgroundColor: Platform.OS === 'ios' ? white : primary,
shadowRadius: 6,
shadowOpacity: 1,
shadowColor: 'rgba(0,0,0,0.24)',
shadowOffset: {
width: 0,
height: 3
}
}
}
})
export default Tabs
mainScreen.js
import React, { Component} from 'react'
import Tabs from './tabNavigator'
export default class MainScreen extends Component {
render() {
return (
<View>
<Tabs/>
</View>
);
}
}
I hope it helps.