Side bar is not not visible

sa63 commented 7 years ago

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>
);

} } `

Jasbir23 commented 7 years ago

hey @sa63, I do not see anything returned by the main App.js component. Also, i believe if you could start with a very basic implementation of DrawerNavigator using Sidebar component, it will help isolate the problem. Piecing it together this way would be really difficult.

sa63 commented 7 years ago

I've found in the documentation of react-navigation, however is there any example with Native-Base? In the main app js we've added sidebar props inside the react-navigation as been shown in your tutorial.

GeekyAnts / native-base-react-navigation-stack-navigator

Side bar is not not visible #2