geekyants / native-base-react-navigation-stack-navigator Goto Github PK

JavaScript 100.00%

native-base-react-navigation-stack-navigator's Introduction

Basic ReactNavigation Example App and Tutorial

This is a simple 3-page application that demonstrates the basic usage of React Navigation as a navigation tool. It is extremely easy to understand. This step-by-step tutorial will take you through the basic concepts. We are using NativeBase as the UI library to design our pages.

native-base-react-navigation-stack-navigator's People

Contributors

Stargazers

Watchers

Forkers

gustavorozolin jonatansalas 5alamander xxxxlr chhai-chivon-react-native rajeev-hegde pivotalraydius wiipsxbox rijalarrahman lukitos rootsec1 nanikie manotch dilansadeep woodyphil mrnagoo waqaskhan540 maikkoko ttecho tranduyhung naleendissanayake showoffer phemant ilkinguluzada yi904835116 thesinding rickparrish mafutomo mikeblanton zengqingsong gregincs abrahamgit abrahamman huukhai sa3dy aniol44 alihesari levietanh170796 eduxavier budmul354 jt6161 ardimh7 hnliyuan mshibl ekastimo danikenan delchris danilomartinssilva moris-kinsa imikemiller olgaritma mohaaosman diego086 nmanikumar5 a-tarlay flaviofonseca emitekllc suryakrishnamoorthy fkobon simersingh itmyprofession massivebrains hankkuu-mobile sonatrix joaquinbeceiro botwy brane28 gdelazeri danunafig tvl-jyoon noadi2016 khoabuidev basebuild suv0 lynnguyen99 edwinvd menk-ap mangbu2017 muhammadfathony sivatamma blange48 gabrielnicacio turtlepile lolocoo jt-stevens ismaelmcosta wangdabaoqq yarikhot aft778 jyotirmaybanerjee jescrich ebellumat helmiyg disnoa herbertxy gargashwani julensas wata-brucenguyen killerdong manishmishra555

native-base-react-navigation-stack-navigator's Issues

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!

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

}
}
`

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?

Deprecated features

Deprecated Tabnavigator , StackNavigator and the sidedrawer also doesnt work.
Can you update so it works with React Navigation (v2)

cannot react-native run-android

how to run this example in android ?

Error cloning repo

BUG: refs/files-backend.c:2898: initial ref transaction called with existing ref

Windows 10, latest Git version.

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

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.

Image within image

Image component cannot have children elements

geekyants / native-base-react-navigation-stack-navigator Goto Github PK

native-base-react-navigation-stack-navigator's Introduction

Basic ReactNavigation Example App and Tutorial

native-base-react-navigation-stack-navigator's People

Contributors

Stargazers

Watchers

Forkers

native-base-react-navigation-stack-navigator's Issues

Recommend Projects

Recommend Topics

Recommend Org