Is it possible to use the tab bar without renderScene? about react-native-multibar

[shamoons]

Wow - that was amazingly fast. Thank you so much, I'll be able to try later today and will report on what I find =)

[alex-melnyk]

I’m using next.js and don’t want to take over Navigation. I like how next does it, but with the default react-native tab bars, it requires a tense scene and handles navigation. Can I somehow use just three tab bar and manually maintain / set routing?

That's an interesting case, I've updated library to [email protected] that you can probably use a few members of it:

• MultiBarProvider (provides state)
• MultiBarOverlay (overlay with extras icons)

Just take a look at the new example in the readme file.

[alex-melnyk]

Wow - that was amazingly fast. Thank you so much, I'll be able to try later today and will report on what I find =)

I rethought the library structure according to your comment and it allows me to exclude the "react-navigation" module as a dependency at all.

[shamoons]

I'm a bit unsure how to use this now...

Do I need to wrap in NavigationContainer?

[alex-melnyk]

I'm a bit unsure how to use this now...

Do I need to wrap in NavigationContainer?

As you wish, the main idea is to put all things inside MultiBarProvider that is provide state for extras icons, so need to build something like that:

<View>
  <MultiBarProvider data={[/*ITEMS*/]}>
    <BottomTabBarWrapper navigation={props.navigation}>
      <YourBarComponent />
    </BottomTabBarWrapper>
  </MultiBarProvider>
</View>

But also you can easily just use MultiBarOverlay wherever you want, but don't forget to wrap it with MultiBarProvider, keep in mind that MultiBarButton contains logics that manage extras state (visible/hidden), if you don't want to use it then make your own button and use MultiBarContext to manage state.

[shamoons]

I'm confused about what YourBarComponent is and what props.navigation refers to if I'm not using react-navigation?

[alex-melnyk]

I'm confused about what YourBarComponent is and what props.navigation refers to if I'm not using react-navigation?

Provide me an example of your code

[shamoons]

I’m on my phone so I apologize for poor formatting:

import App from 'next/app';
import React from 'react';
import { View, ScrollView, Dimensions } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';

import { customTheme as theme } from '../config/theme'
import FooterBar from '../components/FooterBar'
import '../config/aws'

function MyApp({ Component, pageProps }) {
    const dim = Dimensions.get('screen')

    return (
        <PaperProvider theme={theme}>
            <View style={{ flex: 1, height: dim.height || 1 }}>
                <ScrollView style={{ flex: 10 }}>
                    <Component {...pageProps} />
                </ScrollView>
                <FooterBar />
            </View>
        </PaperProvider>
    )
}

export default MyApp

And

export default function FooterBar(props) {
    const [showAuthModal, setShowAuthModal] = useGlobalState('showAuthModal')
    const routes = [{
        key: 'home',
        title: 'Home',
        icon: 'home'
    }, {
        key: 'explore',
        title: 'Explore',
        icon: 'home'
    }]


    return (
        <StyledSurface>
            <Link href={`/`}><Button mode="contained">Home</Button></Link>
            <Link href={`/conversations`}><Button mode="contained">Explore</Button></Link>
            <Button mode="contained" onPress={() => setShowAuthModal(true)}>Auth</Button>
            <AuthDialog />
        </StyledSurface>

    );
}

Obviously FooterBar is simply a placeholder for now. I’m unsure where / how to use the multi bar.

[alex-melnyk]

So, if your tab bar is FooterBar, then you need to put it inside the wrapper BottomTabBarWrapper, navigation - it's an object which will be passed to each extras item on the press event if you like you can remove it.

function MyApp({ Component, pageProps }) {
  const dim = Dimensions.get('screen');

  return (
    <PaperProvider theme={theme}>
      <MultiBarProvider data={[/*ITEMS*/]}>
        <View style={{ flex: 1, height: dim.height || 1 }}>
          <ScrollView style={{ flex: 10 }}>
            <Component {...pageProps} />
          </ScrollView>
          <BottomTabBarWrapper navigation={props.navigation}>
            <FooterBar />
          </BottomTabBarWrapper>
        </View>
      </MultiBarProvider>
    </PaperProvider>
  );
}

[shamoons]

Got it! So ITEMS is my buttons / icons? How do I get access to the so I can manage my own navigation / routing?

And thank you again for such a wonderful library!

[alex-melnyk]

Got it! So ITEMS is my buttons / icons? How do I get access to the so I can manage my own navigation / routing?

And thank you again for such a wonderful library!

navigation - it's an object that you provide in
<BottomTabBarWrapper navigation {props.navigation}>

(navigation) => COMPONENT

function MyApp({ Component, pageProps }) {
  const dim = Dimensions.get('screen');

  return (
    <PaperProvider theme={theme}>
      <MultiBarProvider data={[(navigation) => (
        <Icon />
      )]}>
        <View style={{ flex: 1, height: dim.height || 1 }}>
          <ScrollView style={{ flex: 10 }}>
            <Component {...pageProps} />
          </ScrollView>
          <BottomTabBarWrapper navigation={props.navigation}>
            <FooterBar />
          </BottomTabBarWrapper>
        </View>
      </MultiBarProvider>
    </PaperProvider>
  );
}

[shamoons]

I have:

        <PaperProvider theme={theme}>
            <MultiBarProvider data={[(navigation) => (
                <AntDesign name='add' />
            )]}>
                <View style={{ flex: 1, height: 'auto', maxHeight: dim.height }}>
                    <View style={{ flex: 10, marginBottom: 50 }}>
                        <Component {...pageProps} key={router.route} />
                    </View>
                </View>
            </MultiBarProvider>
        </PaperProvider>

without the BottomTabBarWrapper for now and I get:

TypeError: Cannot read property 'createElement' of undefined
    at Object../node_modules/react-native-multibar/dist/components/BottomTabBarWrapper/index.js (/Users/shamoon/Sites/talkabout/talkabout-fe/.next/server/static/development/pages/_app.js:4836:19)
    at __webpack_require__ (/Users/shamoon/Sites/talkabout/talkabout-fe/.next/server/static/development/pages/_app.js:23:31)
    at Object../node_modules/react-native-multibar/dist/components/index.js (/Users/shamoon/Sites/talkabout/talkabout-fe/.next/server/static/development/pages/_app.js:5189:10)

[alex-melnyk]

I have:

        <PaperProvider theme={theme}>

            <MultiBarProvider data={[(navigation) => (

                <AntDesign name='add' />

            )]}>

                <View style={{ flex: 1, height: 'auto', maxHeight: dim.height }}>

                    <View style={{ flex: 10, marginBottom: 50 }}>

                        <Component {...pageProps} key={router.route} />

                    </View>

                </View>

            </MultiBarProvider>

        </PaperProvider>

without the BottomTabBarWrapper for now and I get:

TypeError: Cannot read property 'createElement' of undefined

    at Object../node_modules/react-native-multibar/dist/components/BottomTabBarWrapper/index.js (/Users/shamoon/Sites/talkabout/talkabout-fe/.next/server/static/development/pages/_app.js:4836:19)

    at __webpack_require__ (/Users/shamoon/Sites/talkabout/talkabout-fe/.next/server/static/development/pages/_app.js:23:31)

    at Object../node_modules/react-native-multibar/dist/components/index.js (/Users/shamoon/Sites/talkabout/talkabout-fe/.next/server/static/development/pages/_app.js:5189:10)

Could you create a snack, that I can help you better.

https://snack.expo.io