How would I use react-native-router-flux with this? about nativebase HOT 31 CLOSED

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.

from nativebase.

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

from nativebase.

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

from nativebase.

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

from nativebase.

The component should be nested inside the component.

from nativebase.

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.

from nativebase.

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

Thanks

from nativebase.

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

from nativebase.

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.

from nativebase.

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

from nativebase.

which component should be nested inside which component?

from nativebase.

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

from nativebase.

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.

from nativebase.

@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.

from nativebase.

@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.

from nativebase.

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

from nativebase.

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

from nativebase.

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

from nativebase.

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

from nativebase.

@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>

from nativebase.

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

from nativebase.

@anonrig what do you wanna do ?

from nativebase.

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.

from nativebase.

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

from nativebase.

@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.

from nativebase.

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: start-react/native-starter-kit@3e7b5a1

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

from nativebase.

@beausmith Awesome Thanks 👍

from nativebase.

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

from nativebase.

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

from nativebase.

NativeBase KitchenSink has implementation of RNRF

from nativebase.

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.

from nativebase.