How to use it with react-native-router-flux?

[demiro]

Hello,

quite new to the react scene and I am struggling to understand some flow...

I have an index page where I registered all the scenes, as suggested on the router-flux docs:

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true}>
        <Scene key="Lessons" tabLabel="Lessons" component={Lessons} />
        <Scene key="Trainees" tabLabel="Trainees" component={Trainees} initial={true} />
        <Scene key="TraineeDetails" component={TraineeDetails}>
            <Scene key="TraineeDetailsLessons" component={TraineeDetailsLessons} initial={true} />
            <Scene key="TraineeDetailsPurchases" component={TraineeDetailsPurchases} />
            <Scene key="TraineeDetailsContacts" component={TraineeDetailsContacts} />
        </Scene>
        <Scene key="Purchases" tabLabel="Purchases" component={Purchases} />
        <Scene key="Settings" tabLabel="Settings" component={Settings} />
    </Scene>
);

And then I call

return (
            <Router scenes={scenes} createReducer={reducerCreate} getSceneStyle={getSceneStyle} />
        );

in my redner method... works fine...

but then on the page TraineeDetails I have a Tabbar on the top... and I would like to display content from the assigned components

The code in my TraineeDetails:

/**
* Trainee details
*/
'use strict';

import React, { Component } from 'react';
import { StyleSheet, View, StatusBar, Image } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';
import Tabs from 'react-native-tabs';
import Config from '../../constants/Config';

import {Actions} from 'react-native-router-flux';

class TraineeDetails extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            tab: 'today'
        };
    }

    componentDidMount(){
        StatusBar.setBackgroundColor(screenConfig.primaryColor, true);
    }

    goBack(){
        Actions.Trainees();
    }

    onSelectTab(el){
        console.log('PROPS: ', el.props);
        console.log('NAME: ', el.props.name);
        console.log('VIEW: ', el.props.view);

        //Actions[el.props.view]({data:this.props.data});

        this.setState({tab: el.props.name});
        this.setState({tabContent: el.props.view});
    }

    render() {

        const Player = this.props.data;
        return (
            <View>
                <Icon.ToolbarAndroid
                    title={Player.name}
                    navIconName="arrow-back"
                    onIconClicked={this.goBack.bind(this)}
                    overflowIconName="arrow-drop-down"
                    actions={actions}
                    style={styles.toolbar}
                    backgroundColor={screenConfig.primaryColor}
                    titleColor='white'
                >
                </Icon.ToolbarAndroid>

                <View style={styles.container}>
                    <View style={styles.header}>
                        <Tabs
                            style={styles.tabs}
                            selected={this.state.tab}
                            selectedStyle={styles.tabIconSelected}
                            selectedIconStyle={styles.tabIconSelected}
                            onSelect={this.onSelectTab.bind(this)}
                        >
                            <Icon view="TraineeDetailsLessons" name="today" size={36} />
                            <Icon view="TraineeDetailsPurchases" name="local-atm" size={36} />
                            <Icon view="TraineeDetailsContacts" name="message" size={36} />
                        </Tabs>

                        <Image source={{uri: Player.avatar}} style={styles.avatar} />
                    </View>

                    <View>
                        {/* NEED THE TAB CONTENT HERE */}
                    </View>
                </View>
            </View>
        );
    }
}
// ..... and so on

How do I insert the component and re-render it each time the tab is tapped?

In your example you just change a variable and text on the same scene... would be helpful if you could add a container and change the content (loaded dynamically from a component)

[chetstone]

I assume you have looked at how Tabs are done in the react-native-router-flux Example code and are confused, understandably. They recently switched to using a different Tab component in 3.26.0 and just today switched back to using react-native-tabs, but it looks like they may have not reverted the Example code to work with it. You might want to look at the Example in an older version.

Looking at your code quickly, it looks like for starters, you need to have a <Scene key="tabbar" ... /> wrapping your tabs.

You might have noticed that react-native-router-flux is still very unstable. I am using 3.24 successfully in my app but am aware that when I need to upgrade, for example if I need to switch to a newer version of react-native, I will probably have a significant rewrite of my code.

[demiro]

the thing is, that both examples (the recent one and the old one) in the react-native-router-flux repo change the whole scene, and not one section of the scene... whilest the example on react-native-tabs changes only one value on the screen, and doesn't load different content... I guess I should just have a switch there

[chetstone]

You need to wrap the tabs with a TabBar component. That will display the selected tab component with the tabs at the bottom.

I think you want to customize the scene to have the tabs at the top and additional common content.

I had a similar problem (I'm on iOS) --- I use react-native-navbar instead of the default navigation bar and I had to insert that at the top. What I did was make a copy of the RNRF TabBar and modify it, so it has the navbar at the top, then the child tab component, then tabs.

[Ian-An]

+1

[longtranista]

Anyone has idea how use react-native-router-flux with react-native-tabs already? Thx~

[danghung-dev]

How can I catch touch event on Tabbar? I want re-render when tabbar item is touched. I also want to pop all navigator route when tabbar item is touched.

Thanks