0

I have seen many examples showing how it works with Function components but the question is how do I do it with Classes? I havent found a single example!

This is how it works with Functions: Snack

I really need help in this one please!

showtime
  • 1
  • 1
  • 17
  • 48
  • 1
    You just use the regular react class syntax (https://reactjs.org/docs/components-and-props.html). The only thing different is how you refer to the props with `this.props.navigation` for example. – 5eb Sep 05 '20 at 18:32
  • 1
    Is there a particular reason why you feel you need to use class based components by the way? Function components work really nicely with react navigation specifically, because the library provides a lot of custom hooks you could take advantage of. – 5eb Sep 05 '20 at 18:36
  • @BasvanderLinden the main reason is because the rest of the app is built using classes, so switching to functions now it doesnt make sense right? Moreover, I have NO experience with them at all and they confuse me so much. For example how do I write a query to my Firestore db so that when `SettingsScreen` is called it needs to display the fetched data? Can you post a simple example of that please? – showtime Sep 05 '20 at 18:40
  • 1
    So the way you usually do it is to use the `useEffect` hook https://reactjs.org/docs/hooks-effect.html. You can use this hook for example to execute some code after the component has mounted (like a fetch or a query to firestore in your case). Here's a fork that shows an example https://snack.expo.io/@bvdl/creatematerialbottomtabnavigator-%7C-react-navigation. – 5eb Sep 05 '20 at 18:53
  • 1
    Also it doesn't matter that you already have a lot of components that use classes, because class components can still share data to functional components and vice versa (through props, react context, etc...). So it's perfectly fine to use both in the same application. – 5eb Sep 05 '20 at 19:02
  • @BasvanderLinden thank you so much! I just tried useEffect and fetched some data successfully, however I cant get to print a message 'success' in the return() statement because it seems like the return() is actually rendered before the fetch has completed! See Snack: https://snack.expo.io/Hc7qTHl1p – showtime Sep 05 '20 at 19:11
  • 1
    Yeah so for this you can use the `useState` hook combined with `useEffect`. I've updated my snack to show an example https://snack.expo.io/@bvdl/creatematerialbottomtabnavigator-%7C-react-navigation. So you do some operation in the `useEffect` you get something back an based on what you get back you update the state. I highly recommend you to read the hooks documentation as it goes into more detail than I can do here in the comments https://reactjs.org/docs/hooks-intro.html. – 5eb Sep 05 '20 at 19:15
  • @BasvanderLinden now I understand it more! Thanks! What about if I want to return a whole Carousel which renders the fetched data?! I am using `react-native-snap-carousel`. Is it the same process like returning a message? What about having a listener which listens for changes to Firestore db and then when update happens it displays the new data? Will the hook be triggered then? – showtime Sep 05 '20 at 23:09
  • 1
    Yes it's generally the same idea. You update some state when Firestore retrieves new data. If you're working with event listeners you need to be careful to remove the event listeners when you're done with them which is explained in this article using hooks https://atomizedobjects.com/blog/react/add-event-listener-react-hooks/. How to use `react-native-snap-carousel` and Firestore event listener with hooks is very specific so I think that's better suited for a separate question. – 5eb Sep 06 '20 at 08:58
  • @BasvanderLinden thank you, I have succesffully implemented bottom nav bar but with Class components. I started doing one of the screens in Functions however I was having trouble so I decided to do it in class. Btw do you think there is any significant changes on performance (Hooks vs Classes) ? – showtime Sep 06 '20 at 14:44
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/221047/discussion-between-bas-van-der-linden-and-b-s). – 5eb Sep 06 '20 at 14:58

1 Answers1

0

I'm happy to let you know that as of react-navigation 6, this is entirely possible with class components!

yarn add @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

class MainPage extends React.Component<any, any> {

    render() {
        return (
            <Tab.Navigator>
                <Tab.Screen name="Home" component={HomeScreen} />
                <Tab.Screen name="Settings" component={SettingsScreen} />
            </Tab.Navigator>
        );
    }
}
Nikitah
  • 719
  • 5
  • 15