native-base-react-navigation-stack-navigator's Issues
Drawer Button is not working
I can't get why Button in the HomeScreen is not opening a Drawer. Button shows but nothing happens when you click on it. Here is a code, I did all needed imports while its still not working. Are there any examples of this approach which will work?
HomeDrawer.js
import React from 'react';
import { DrawerNavigator } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import FoodScreen from '../screens/FoodScreen';
import RestaurantsScreen from '../screens/RestaurantsScreen';
import ProfileScreen from '../screens/ProfileScreen';
import FavoritesScreen from '../screens/FavoritesScreen';
import SettingsScreen from '../screens/SettingsScreen';
import SideBar from './SideBar';
const HomeDrawer = DrawerNavigator({
home: { screen: HomeScreen },
food: { screen: FoodScreen },
restaurants: { screen: RestaurantsScreen},
profile: { screen: ProfileScreen },
settings: { screen: SettingsScreen }
}, {
contentComponent: (props) => <SideBar {...props} />
});
export default HomeDrawer;
HomeScreen.js
import React from "react";
import { StatusBar } from "react-native";
import {
Button,
Text,
Container,
Card,
CardItem,
Body,
Content,
Header,
Title,
Left,
Icon,
Right
} from "native-base";
export default class HomeScreen extends React.Component {
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
</Container>
);
}
}
How to make that button open a drawer?
Image within image
Image component cannot have children elements
Image urls in Sidebar.js are dead and return 404
130 Meg when cloning repository
I just cloned your repository and was rather shocked to see it took up 130 Meg of disk space. This is without even installing the dependencies.
I tracked it down to the .git/objects/pack folder. There's a single .pack file in there that's taking up nearly all of that space. Does it need to be there?
This was on OS X High Sierra.
Error cloning repo
BUG: refs/files-backend.c:2898: initial ref transaction called with existing ref
Windows 10, latest Git version.
Hide white header with back button on top of SideBar?
Hi,
I'm trying to incorporate your example in my own app. Everything works fine, but after opening the side bar menu I see a white header with an arrow back button at the top of the screen, above the side bar. Where is this coming from and how can I remove it? I'd like to keep seeing my own custom header of the screen underneath the drawer.
PS: Images at the top of the SideBar are missing because I disabled them
Thanks!
cannot react-native run-android
how to run this example in android ?
Deprecated features
Deprecated Tabnavigator , StackNavigator and the sidedrawer also doesnt work.
Can you update so it works with React Navigation (v2)
Passing params gives undefined
Hi,
i tried passing a parameter in LucyChat.js
<Button
rounded
danger
style={{ marginTop: 20, alignSelf: "center" }}
onPress={() => navigate("Profile",{id:'Lucy'})}
>
However when i print the log in Profile.js, it gives undefined error
console.log("ID:",this.props.navigation.state.params.id);
Side bar is not not visible
I integrated sidebar for the drawer while its not showing. It shows simple react-navigation drawer nothing else.
Here is my code.
app.js
`import React from 'react';
import {StyleSheet, Text, View } from 'react-native';
import { TabNavigator, DrawerNavigator, StackNavigator } from 'react-navigation';
import WelcomeScreen from './screens/WelcomeScreen';
import SigninScreen from './screens/SigninScreen';
import SignupScreen from './screens/SignupScreen';
import HomeScreen from './screens/HomeScreen';
import BusinessScreen from './screens/BusinessScreen';
import TechScreen from './screens/TechScreen';
import ProfileScreen from './screens/ProfileScreen';
import FavoritesScreen from './screens/FavoritesScreen';
import SettingsScreen from './screens/SettingsScreen';
import SideBar from './components/SideBar';
export default class App extends React.Component {
render() {
const MainNavigator = TabNavigator({
welcome: { screen: WelcomeScreen },
signin: { screen: SigninScreen },
signup: { screen: SignupScreen },
main: {
screen: DrawerNavigator({
home: { screen: HomeScreen },
business: { screen: BusinessScreen },
tech: { screen: TechScreen },
profile: {
screen: StackNavigator({
profile: { screen: ProfileScreen },
settings: { screen: SettingsScreen }
})
}
},
)
}
},
{
contentComponent: props => <SideBar {...props} />
}
);
return (
);
}
}
`
HomeScreen
`import React from "react";
import { StatusBar } from "react-native";
import {
Button,
Text,
Container,
Card,
CardItem,
Body,
Content,
Header,
Title,
Left,
Icon,
Right
} from "native-base";
import SideBar from '../components/SideBar';
export default class HomeScreen extends React.Component {
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Chat App to talk some awesome people!</Text>
</Body>
</CardItem>
</Card>
<Button
full
rounded
dark
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("business")}>
<Text>Chat With People</Text>
</Button>
<Button
full
rounded
primary
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("tech")}>
<Text>Goto Profiles</Text>
</Button>
</Content>
</Container>
);
}
}
`
SideBar.js
`import React from "react";
import { AppRegistry, Image, StatusBar } from "react-native";
import {
Button,
Text,
Container,
List,
ListItem,
Content,
Icon
} from "native-base";
const routes = ["home", "business", "tech", "profile"];
export default class SideBar extends React.Component {
render() {
return (
<Container>
<Content>
<Image
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
}}
style={{
height: 120,
alignSelf: "stretch",
justifyContent: "center",
alignItems: "center"
}}>
<Image
square
style={{ height: 80, width: 70 }}
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/logo.png"
}}
/>
</Image>
<List
dataArray={routes}
renderRow={data => {
return (
<ListItem
button
onPress={() => this.props.navigation.navigate(data)}>
<Text>{data}</Text>
</ListItem>
);
}}
/>
</Content>
</Container>
);
}
}
`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.