React-native-router-flux: Is it possible to "curry" <Scene>, <Drawer>, <Tabs>, maybe others?

[wolverineks]

Versions

• react-native-router-flux v4.0.0-beta.28
• react-native v0.51.0

Expected behaviour

I'm making some wrappers for the built-in <Scene /> component, changing it to take children instead of component, changing the api from <Scene component={...} /> to <MyScene>{component}</MyScene>

so I can get a router file that looks like the following:

const MyComponent = () => (
  <View>
    <Text>Hello, World!</Text>
  </View>
)
const MyScene = ({ children }) => <Scene key={'myScene'} component={children} />
const MyStack = ({ children }) => <Stack key={'myStack'}>{children}</Stack>
const MyTabs = ({ children }) => <Tabs key={'myTabs'} hideNavBar>{children}</Tabs>
const MyDrawer = ({ children }) => <Drawer key={'myDrawer'} hideNavBar>{children}</Drawer>

export type Props = {}
export default class App extends Component<Props> {
  render () {
    return (
      <Router>
        <MyStack>
          <MyDrawer>
            <MyTabs>
              <MyScene>
                <MyComponent />
              </MyScene>
            </MyTabs>
          </MyDrawer>
        </MyStack>
      </Router>
    )
  }
}

Actual behaviour

When wrapping <Scene>

Error: Route 'key1' should declare a screen. For example:

import MyScreen from './MyScreen';
...
key1: {
  screen: MyScreen,
}

This error is located at:
    in Router (at App.js:36)
    in App (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

When wrapping the other components, they compile but the router doesn't see any of the props

[Blapi]

Just.. why? I don't think it is a good practice at all, and the library is already good enough to do whatever you want, what you're doing is not very appropriated to the library and kind of useless.
I strongly advise you to check the example project and understand the library

[wolverineks]

Wow, tell me how you really feel...

[Blapi]

Why would you need to wrap the component instead of passing them as props ?

[wolverineks]

i prefer passing components as children whenever possible

[wolverineks]

It's understandable that you might disagree with this style, but im still asking, is it possible?
or more to the point

why does this work

<Scene key={'myScene'} component={MyComponent} />

but this doesnt

const MyScene = () => <Scene key={'myScene'} component={MyComponent} />
...
  <MyScene />
...

[taichi-jp]

I'm getting the same issue.
I wanna divide Tabs component using component to connect the divided tabs to redux.