kureev / react-native-navbar Goto Github PK

Hi,

I'm using the following code

navigationBar:<NavigationBar title={app.name} prevTitle="asdasd" nextTitle="asdasd"/>,

The prevTitle take effect as shown 'asdasd', however the next title doesn't appear on the bar.
Is there anything wrong with my usage? Thanks a lot in advance.

there is a back button on initial route even if i send null to the customPrev. it's null on the chrome debugger on too but's there is a "back button".

Hi

First of all thank you for creating this plugin.

One question, is there a way to call this.props.menuActions from parent component? I want to add an icon on top bar (right side) to open/close side menu.

Would you please help?

Thanks

Austin

Since i am setting my initial route in index.ios.js i dont want to have any business logic in that file, I want all of the logic in the component that is being rendered in that initial route. I cannot see and example where the button actions are set after the initial route is rendered.

Maybe I am not understanding the proper patterns for using this component, any help would be appreciated.

render() {
    return (
        <Navigator
            ref="nav"
            style={styles.container}
            renderScene={this.renderScene}
            configureScene={(route) => {
                if (route.sceneConfig) {
                    return route.sceneConfig;
                }
                return Navigator.SceneConfigs.FloatFromRight;
            }}
            initialRoute={{
                component: SessionList,
                rightButtonTitle: 'New Session',
                navigationBar: <NavigationBar
                    onNext = {() => this.addNewSession()} //<== I want to do this in the SessionList component
                    nextTitle = "Create Session"
                    title ='Tutor Manager' />
            }} />
    );
}

When I try to build the basic example I get this:

And when I try to build the custom elements I get this:

Would it be possible to provide a property to allow styling of the bottom border of the navbar?

In my case, I would like to "hide" the navbar from a particular view, while still leaving the customPrev button visible.

it seems like right now, using , one can only have a single element as the custom back btn ('Back', or a single image)

I would like to have a back arrow image with the text 'Back' next to it, and would prefer not to use an image containing the text. is it possible for this to be accomplished?

Unable to resolve module NavigatorNavigationBarStyles from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js
Unable to resolve module StaticContainer.react from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js
Unable to resolve module NavigatorNavigationBarStyles from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js
Unable to resolve module StaticContainer.react from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js

Did a fresh new project with react-native-cli and tried integrating the react-native-navbar. It gives me above error.

AND

I put together http://reactnativemodules.com last night and added your module. It's a community run list of react native modules. Hopefully it will make finding projects like these easier. Am I missing any that you know of?

Details: facebook/react-native#1821

As a result, cssVar references should be removed from this module:

https://github.com/Kureev/react-native-navbar/blob/master/index.js#L15

In this code, this.props.navigator.pop() is undefined. Same with this.refs.nav.navigator.pop(). How do I access navigator object? Thanks for your time. Jeff

 <Navigator
    ref="nav"
    style={styles.navigator}
    renderScene={this.renderScene}
    initialRoute={{
      component: Search,
       navigationBar: <NavigationBar 
        titleColor="#ffffff"
        title="Global Search"
        backgroundStyle={{backgroundColor:'#424242'}}
        onPrev={() => this.props.navigator.pop()}
        prevTitle="Back"
        />
    }}
  />

The normal version of 0.4.0, I dont't know how to modify, need help, thank you.

Trying to modify the basic example to use the 'AwesomeProject' component from the react native tutorial. Im mainly trying to see how the navbar works with a listview.

    <Navigator
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: AwesomeProject,
          navigationBar: <NavigationBar
            title="Initial View"
            onNext={this.handleNext}
          />
        }}
      />

However, when I scroll down it seems that the ListView gets 'stuck' and wont let me scroll down.

Maybe it will be helpful to include an example with a ListView?

Thanks.

Attached is a screenshot of the CustomElements example.

Doesn't work with react-native 0.6. It's best to just have react-native as a dependency.

What do you think @Kureev

It worked with 0.5.0, but not with 0.6.0

Here's a video with how my code runs right now. The first 14 seconds are without passing a navigation bar to the new route. The second half is with a new nav bar.

Code for reference:

class PeopleTab extends Component {
render () {
    return (
        <Navigator
            ref='navigator'
            style={styles.container}
            initialRoute={{
                name: "people",
                component: PeopleList,
                navigationBar: (<NavigationBar hidePrev={true} title="home" shouldUpdate={false} />),
            }}
            renderScene={this.renderScene.bind(this)}
            />
    );
}

renderScene(route, nav) {

    var Component = route.component;
    var navBar = route.navigationBar;

    if (navBar) {
        navBar = React.addons.cloneWithProps(navBar, {
            navigator: navigator,
            route: route
        });

    }
    console.log(route);

    switch (route.name) {
        case 'people':
            return (
                <View style={{ flex: 1, }}>
                    {navBar}
                    <Component navigator={nav} route={route} onNext={this.onNext.bind(this)} />
                </View>
            );
        case 'person':
            return (
                <View style={{ flex: 1, }}>
                    {navBar}
                    <Component navigator={nav} route={route} person={route.person} />
                </View>
            );
        default:
            return (<View/>);
    }
}

onNext(person) {
    this.refs.navigator.push({
        name: "person",
        component: PersonDetail,
        person: person,
        navigationBar: (<NavigationBar title="People" />), // Only in 2nd half of video
    });
}

}

How can I get the navigator with your nav bar to do a push with the nav bar not moving?

Is it possible to remove the borderBottom ?

it seems like right now, using , one can only have a single element as the custom back btn ('Back', or a single image)

I would like to have a back arrow image with the text 'Back' next to it, and would prefer not to use an image containing the text. is it possible for this to be accomplished?

Hi Alexey!! Awesome work on this, I was trying it out and it's great! one thing I couldn't do is set the navbar background to 'transparent'. backgroundColor="transparent"

Thanks for this extension.
Why did you make navigator and route props required? How would you set these arguments? None of the examples are setting these values. :(

I want create left and right menu. please teach me how to do?

https://facebook.github.io/react/docs/clone-with-props.html

Can be:

if (navBar) {  
  // Replace it
  //navBar = React.addons.cloneWithProps(navBar, { navigator, route, });

  // New way
  navBar = React.cloneElement(navBar, { navigator, route, });
}

Is just a detail that help us on begin (copy/paste/test 😁).
Any way thanks for this component.

In order to be able to render custom component as title (e.g. images/logos etc.).

Hi @Kureev is there currently any way to hide the navigation bar when the user begins scrolling down the page then show it again based either on a timer or when the user starts scrolling back up?

Hello and thanks for the great component.

I've tried your component and it doesn't seem to work with new version. It does compile but I got blank screen.

Any help would be appreciated.

react-native 0.4.1 update remove screenWidth from NavigatorNavigationBarStyles.

We need to use right: 0, left: 0 for full width now. I can send a PR for this.

Warning: Failed propType: Required prop `navbar` was not specified in `NavigationBar`. Check the render method of `ReactParseExample`.
Warning: Failed propType: Required prop `route` was not specified in `NavigationBar`. Check the render method of `ReactParseExample`.

Don't see how they make sense for the initial route based on the information provided in the documentation

If you try to add customTitle it will be rendered before the left Button.

After looking at the source it seems like you get the title first and then the left button.

Check: https://github.com/Kureev/react-native-navbar/blob/master/index.js#L199-L200

Not sure if this is a bug or i'm doing something wrong. I can send a PR if you think this is a bug.

I see routeStack prop in getLeftButtonElement method. So it's actually showing "Back" button even on initial route because never gets into https://github.com/Kureev/react-native-navbar/blob/master/index.js#L44

Should I keep the stack up to date manually?

Just wondering if this is a possibility and if so how would it be implemented with your build? Thanks again!

I'm currently using Navigator.NavigationBar and i'm not sure why I would use react-native-navbar

When I was through the Navigator push a New View, animations and native IOS not the same

Just wondering if the only way to change the font for the title is to create a customTitle element. I see a custom color prop, would it be hard to also do one for font?

I don't know why but the navbar makes the content not fully cover the view ?
flex: 1 should make the view cover upto the height.

Not sure if this is user error or library error, so documenting/querying this here in case it's a library issue:

When running the packager through webpack, I'm getting the following errors:

ERROR in ./~/react-native-navbar/index.js
Module not found: Error: Cannot resolve module 'NavigatorNavigationBarStyles' in ~/HOME/dev/mobileios/node_modules/react-native-navbar
 @ ./~/react-native-navbar/index.js 11:35-74

ERROR in ./~/react-native-navbar/index.js
Module not found: Error: Cannot resolve module 'StaticContainer.react' in ~/HOME/dev/mobileios/node_modules/react-native-navbar
 @ ./~/react-native-navbar/index.js 12:22-54

Any ideas?

Hi there,
Probably not strictly related to this, but I am pushing a new Screen with two MapViews, and the transition to that screen is not smooth at all, I am not sure in which other cases this may happen, anyone has faced the same issue?

Regards

After updating from version 0.7.3 to 0.8.2 I can no longer see the "Back".

When I switch back to 0.7.3 the "Back" appears again like it should. What went wrong?

P.s. The customBack on the other hand shows up when I try to use that, but I'd prefer just using the default functionality for now.

I want to add two button in the place of title.

Hi Kureev, I have a component for the renderScene called Settings

this.props.navigate({
            component: Settings,
            navigationBar: <NavigationBar
                title="Settings"
                customPrev={<MenuIcon/>}
                customNext={<ProfileIcon/>}
                />  
});

Every time I try to use the componentDidMount and componentWillUnmount functions for the Settings component itself it doesn't work.

var Settings = React.createClass({
   getInitialState() {
        return {
            phrase: "Hello"
        };
   },
    [...]
  componentDidMount() {
     console.log('Did Mount');
   },
  componentWillUnmount() {
     console.log('Will Unmount');
   },
  componentDidUnmount() {
    console.log('Did Unmount');
   },
    render() {
        return (
          <View style={styles.container}>
            <View style={styles.section}>
                <Text>{this.state.phrase}</Text>
            </View>
          </View>
        );
    }
});

as you can imagine, the componentDidUnmount and componentDidUnmount functions don't work for settings or any of the other components rendered with renderScene.
Any insights?

I am using react-native v0.7.1 and react-native-navbar v0.6.0. Thanks

Do you know why this warning is coming ?

Hi,

I want to handleNext to push to another component like this

var JobScreen = React.createClass({
    renderScene: function(route, navigator) {
        var Component = route.component;
        var navBar = route.navigationBar;

        if (navBar) {
            navBar = React.addons.cloneWithProps(navBar, {navigator, route});
        }
        return (
            <View style={styles.view}>
                {navBar}
                <Component navigator={navigator} route={route} />
            </View>
        );
   },

   handleNext: function() {
        this.props.navigator.push({
            component: PostJobScreen,
            navigationBar: <NavigationBar title="Post a Job"/>
        });
   },


    render: function() {
        return(
        <Navigator
                ref="nav"
                style={styles.navigator}
                renderScene={this.renderScene}
                configureScene={(route) => {
                    if (route.sceneConfig) {
                        return route.sceneConfig;
                    }
                    return Navigator.SceneConfigs.FloatFromBottom;
                }}
                initialRoute={{
                  component: JobList,
                  navigationBar: <NavigationBar
                    title="Jobs"
                    nextTitle="Post Job"
                    hidePrev='true'
                    onNext={this.handleNext}/>
                }}/>
        );
    }
});

I kept getting

 undefined is not an object (evaluating 'this.props.navigator.push')"

I'm using react-native-navbar to load an app logo to the navbar.
The customTitle attribute doesn't work either to show an <View /> component on the navbar.

Using this demo:

/* index.ios.js */
...

<Navigator
    renderScene={this._renderScene}
    initialRoute={{
        component: FacebookConnectPage,
        navigationBar:
            <NavigationBar
                customTitle={LogoNavTitle}
                backgroundColor="#00605e"
            />
    }}
/>

/* LogoNavTitle.js */
...

<View style={{ flexDirection: 'row', height: 60, backgroundColor: '#fff' }}>
</View>

I'm trying to just show an view with white background to check if it works and that don't render either.

I'd like to disable multi-touch, particularly to avoid corrupting my navigation when the user accidentally double taps and the same view gets pushed twice. Is this possible?

The NavBar can set hidden ?? i can not work for me .. BTW where can you find this document?

I think we should start using peerDependencies instead of dependencies for referring to react-native.

I will provide PR in case you want to support this.

I call this.props.navigator.push to the next scene, and pass some props to the next scene, and caught an error, the passed prop is undefined in the next view,it seems passProps doesn't work,and code is below:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var Product = require('./product');
var Adapt = require('./adapt');

var mdskip = require('./data/mock-mdskip');
var context = require('./data/mock-context');
var NavigationBar = require('react-native-navbar');

var Detail = require("./ui/detail");
var styles = require("./ui/style");
var {
  Navigator,
  NavigatorIOS,
  AppRegistry,
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  ScrollView
} = React;

var product = new Product();
product.set("context", context.ModuleDatas);
product.set("config", context.TDetail);
product.set("mdskip", Adapt.transform(mdskip));
product.set("deviceType", "phone");

var RootComponent = React.createClass({
  getInitialState: function(){
    return {};
  },
  componentDidMount: function() {
    var self = this;
  },
  renderScene: function(route, navigator) {
    var product = this.state.product;

    var Component = route.component;
    var navBar = route.navigationBar;

    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route
      });
    }

    return (
      <View style={styles.navigator}>
        {navBar}
        <Component navigator={navigator} route={route} product={product} />
      </View>
    );
  },
  render: function() {

    if(context){
      return (
        <Navigator
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: Entrance,
          navigationBar: <NavigationBar
            title="Initial View"
            onNext={this.handleNext}
          />
        }}
      />
      );
    }else{
      return (
        <View></View>
      )
    }
  }
});

var Entrance = React.createClass({
  render: function(){
    return (
      <View style={styles.clickMe}>
        <TouchableHighlight onPress={this.onPress} underlayColor="#B5B5B5">
          <Text style={styles.clickMeText}>点我看详情</Text>
        </TouchableHighlight>
      </View>
    );
  },
  componentDidMount(){
    var self = this;
    product.onLoad(["context", "config", "mdskip"], function(context, config, mdskip){
      self.setState({
        "context": context,
        "config": config,
        "mdskip": mdskip
      });
    })
  },
  onPress: function(){
    var context = this.state.context;
    var config = this.state.config;
    var mdskip = this.state.mdskip;
    var product = this.props.product;

    this.props.navigator.push({
      title: context.title.itemTitle,
      component: DetailMain,
      backButtonTitle: 'Back',
      passProps: { config: config, mdskip: mdskip, product: product, context: context}
    });
  }
});

var DetailMain = React.createClass({
  getInitialState: function(){
    return {
      loading: false
    };
  },
  render: function(){
    return (
      <Detail config={this.props.config} mdskip={this.props.mdskip} product={this.props.product} context={this.props.context} navigator={this.props.navigator}/>
    )
  }
})

AppRegistry.registerComponent('DetailNative', () => RootComponent);

I want to make the navigation bar translucent. What do you recommend should be the best way to make the bar translucent. I know <NavigatorIOS /> have a property of translucent which one can use but we have <Navigator /> and I don't know about translucent property, seems like it doesn't have that property.

Do you mind adding an example to add image using customTitle?