How would I use react-native-router-flux with this?

[shakdoesgithub]

If I'm using the Container Component, how would I go on about using the react-native-router-flux with this?

[sankhadeeproy007]

The component should be nested inside the component.

[shakdoesgithub]

which component should be nested inside which component?

[shakdoesgithub]

are you familiar with the react-native-router-flux component?

[sankhadeeproy007]

Yes, we are infact using that router for one of our projects. What we are doing is, we have a Router component at the root of our project. We define the scenes/routes in our router and for that, we don't need the Container component. We only use the container where we define our views, not the routes.

[Crash--]

Hi,

I think providing a concrete example, or a "full app" working with react-native-router-flux & NativeBase could be great for this project! This will make easier to new people to jump in.

[sankhadeeproy007]

Yes, that is actually on our to-do list. A full boilerplate app with native-base, react-native-router-flux and redux

[vinaydate]

Till your boilerplate app goes online, may I know, whether the <Container> should be parent of <Provider> (which in turn contains <RouterWithRedux>) or the other way round? Obviously, I can try out this, but I want theoretical point of view.

[SupriyaKalghatgi]

@vinaydate @Crash-- The boilerplate with NativeBase, Redux is live. Native-Starter-Kit

[tarr11]

I don't understand how this uses react-native-router-flux ? I don't see it anywhere in that example.

[SupriyaKalghatgi]

@tarr11 The reason you didn't find implementation of react-native-router-flux in Native-Starter-Kit is that, NSK has been updated with RN Navigator. Also NativeBase has nothing to do with react-native-router-flux. So that must be simple and straight forward.

[sankhadeeproy007]

@tarr11 AFAIK, you can define all your views in one place using rnrf. There shouldn't be any change in implementation since native-base only provides UI components and requires no architectural changes to your app. Also we've decided not to use rnrf in our app abd use the RN Navigator instead. @vinaydate Container should ideally be the wrapper to your view components and so <Provider> should be the parent component.

[tarr11]

@SupriyaKalghatgi Thanks. I was trying to use RNRF with native base but the UI conflicted because RNRF takes over the "Header".

[ccdwyer]

@tarr11 Did you ever find a way to use RNRF with nativebase, and handle the header nicely?

Thanks

[StanSarr]

@tarr11 @ccdwyer Hey guys did you find a way to use native base and RNRF with the RNRF header ?

[ccdwyer]

I'm waiting to switch to the new official navigation system once it is released, but in the mean time I am wrapping my scenes in a container, and then adding sceneStyle={{ paddingTop: ... }} to my Router, with different values for android and iOS. So each of my scenes looks like:

<Container>
  <Content>
    ...
  </Content>
  <Footer>
    ...
  </Footer>
</Container>

As far as I can tell it works nicely, but I haven't tried it with too many devices, just my iPhone 7 Plus.

[StanSarr]

@ccdwyer awesome .. thank you for your answer gonna try it, I'll let you know :)

[alvarolorentedev]

@ccdwyer i have a small question, i am new to react native so in this case how does your router look like? in my case its not working with:

//file appcontiner.js
const scenes = Actions.create(
     <Scene key="root" tabs={false} >
            <Scene key='home' component={Home} title="Home"/>
            <Scene key='home2' component={Home} title="Home2"/>
     </Scene>
);

class AppContainer extends Component {
render() {
        return <Router  {...this.props} scenes={scenes}/>
    }
}
//in file app.js
class App extends Component {
    render(){ 
        return (
            <Provider store={store}>
                <AppContainer />
            </Provider>
        );
    }
}

[StanSarr]

@kanekotic I'm using it with redux it looks like:

            <Provider store={store}>
                <RouterWithRedux>
                    <Scene key="root" hideNavBar={true}>
                        <Scene
                            key="tabbar"
                            tabs={true}
                        >
                            <Scene

                                key="key1"
                                component={Scene1}
                                title="Scene1"
                                icon={TabIcon}
                            />
                            <Scene
                                hideNavBar
                                key="key2"
                                component={Scene2}
                                title="Scene2"
                                icon={TabIcon}
                            />
                            <Scene
                                hideNavBar
                                key="key3"
                                component={Scene3}
                                title="Scene3"
                                icon={TabIcon}
                            />
                            <Scene
                                hideNavBar
                                key="key4"
                                component={Scene4}
                                title="Scene4"
                                icon={TabIcon}
                            />
                        </Scene>
                        <Scene key="stop" schema="modal" component={Stop} />
                    </Scene>
                </RouterWithRedux>
            </Provider>

[anonrig]

I'm facing the same problem. Anybody have any solution?

[StanSarr]

@anonrig what do you wanna do ?

[vexsnare]

NativeBase component's style, theme even website seems a copy of Ionic. When using NativeBase most of the times I end-up injecting lot of my own custom styles into what native base provides and it takes more time since I have to read and understand their doc in-order to avoid conflict and It takes less time if I use core component and apply custom styles. NativeBase components are tightly coupled, personally I don't like this idea. I would love if they can provide individual component rather than a big ui framework, since its very hard to understand their library code. I really appreciate NativeBase Team work, but just my thought that everybody likes flexibility.

[sanketsahu]

@vexsnare Did you check v2.0 and it's eject feature?

[vexsnare]

@sanketsahusoft Yes I checked v2.0, added it to my project and It has completely broken my existing UI, mainly Input Group. I see you guys are now using Form component instead of InputGroup so tried to use that but again I wanted to customise floating label input style different than placeholder style and I failed to do that. Reverted back to 0.5.22.

[beausmith]

FWIW, it looks like NativeBase's boilerplate Native-Starter-Kit has switched to use React Native Router Flux as of Apr 7, 2017. Here's the commit: https://github.com/start-react/native-starter-kit/commit/3e7b5a1844d2f734c465b1dfb220ba92fa33f742

cc: @shakdoesgithub @Crash-- @vinaydate @tarr11 @ccdwyer @StanSarr @anonrig

[StanSarr]

@beausmith Awesome Thanks 👍

[vijaychouhan-rails]

official example at: http://docs.nativebase.io/docs/examples/navigation/RNRFBasicExample.html

[vijaychouhan-rails]

Simple application at https://github.com/vijaychouhan-rails/AllInOne

[angelfeliz]

People of NaviteBase, there are two example of navigation on your page one is with ReactNavigation and is using your Drawer component and the other one with RNRF wich have a example of navigation to other page. Can you please do example of navigation usign RNRF and the Drawer component. Some peoples are having trouble with the Drawer component and RNRF

[Ariflo]

For anyone who came here like me looking for an example of RNRF using Native-Base with custom tabs feel free to check out the hack I used for my wedding app here: https://github.com/Ariflo/aandr_wedding

The trick is passing a custom component to the tabBarComponent attribute: https://github.com/Ariflo/aandr_wedding/blob/master/app/mobile/views.js#L23

Then using native-base to build that custom component: https://github.com/Ariflo/aandr_wedding/blob/master/app/mobile/components/Footer.js#L4

To get here I found this article to be immensely helpful: https://medium.com/@sportnak/adding-custom-tabbed-navigation-in-react-native-router-flux-e08429c22cce

[SupriyaKalghatgi]

NativeBase KitchenSink has implementation of RNRF

[kharikbo]

Hi everybody! At the moment, all repositories above projects either do not use RNRF or versions are no longer supported. Does anyone know a way to use NativBase and RNRF? Help.