efkan / rndrawer-implemented-rnrouter Goto Github PK

was trying to ref the drawer from within a header or a view but not working out for me, any suggestions?

i run react-native run-android command then i got this error

/node_modules.@exponent/react-native-navigator/ExRouteRenderer.js: Only one default export allowed per module

Im trying to add style bold the Drawer selected option.

But i dont know how can acces in "SideDrawerContent" to Navigator or how can obtain what component is presented in that moment

Can you help me?

Hi, i am developing my project with your template. I always run it on emulator and it run perfec. But now i try to run on real device (Android&iOS) and when i press button on drawer, it have a few secs of lag before new View load.

Maybe some dependencie version cause conflict with drawer or react-native-router-flux?

My dependencies:
"dependencies": {
"react": "^0.14.8",
"react-native": "^0.25.1",
"react-native-button": "^1.4.2",
"react-native-calendar-picker": "^2.4.0",
"react-native-datepicker": "^1.1.0",
"react-native-drawer": "^1.16.7",
"react-native-lightbox": "^0.5.1",
"react-native-router-flux": "^2.2.7",
"react-native-scrollable-tab-view": "^0.4.1",
"react-native-simple-radio-button": "^2.0.1",
"react-redux": "^4.4.0",
"redux": "^3.3.1",
"redux-thunk": "^2.0.1"
},
"devDependencies": {
"babel-eslint": "^4.1.8",
"eslint": "^1.10.3",
"eslint-plugin-react": "^3.16.1",
"eslint-plugin-react-native": "^0.5.0"
}

Thanks!

Hi,

Your example is perfect for my project.

But i do:

1. git clone (repo link)
2. npm install (on project route)

And when i open ios project on Xcode and run:

Thanks!

I am getting "[react-native-router-flux] unique key should be defined error." and in console "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Example.
[react-native-router-flux] unique key should be defined
Unhandled JS Exception: [react-native-router-flux] unique key should be defined "

I have followed exact below steps:
1.Run the command of react-native init reactNativeRouterFluxSample & cd reactNativeRouterFluxSample
2.Then npm i --save [email protected] & npm i --save [email protected] & npm i --save [email protected]
3.Then copy src folder and index.ios.js file of rndrawer-implemented-rnrouter into the new initiated project.
4.Finally, official site says that; "Open ios/reactNativeRouterFluxSample.xcodeproj and hit run in Xcode".

Below is the render method in Example.js

render() { return ( <Router name='root'> <Schema name='boot' sceneConfig={Navigator.SceneConfigs.FloatFromRight} hideNavBar type='replace' // When type='replace' is existing Actions.pop never work /> <Route name='Login' component={Login} schema='boot' initial title="Welcome"/> <Route name='Register' component={Register} hideNavBar title="Register Screen"/> <Route name='Drawer' hideNavBar type='reset'> <SideDrawer ref={c => { c ? this.drawer = c.drawer : this.drawer }}> {/*Nested Routes are used for to manage the navbar cases (Route[Home] \ Router \ Route[Home_] ) React-Native-Reouter-Flux actions use the route names.*/} <Router name='drawerRoot' sceneStyle={styles.routerScene} navigationBarStyle={styles.navBar} titleStyle={styles.navTitle}> <Schema name='home' sceneConfig={Navigator.SceneConfigs.FloatFromRight} hideNavBar={false} renderLeftButton={this.renderMenuButton}/> <Schema name='interior' sceneConfig={Navigator.SceneConfigs.FloatFromRight} hideNavBar={false} renderLeftButton={this.renderBackButton}/> <Route name='Home' component={ScreenHome} schema='home' title='Home'/> <Route name='Screen1' component={Screen1} schema='interior' title='Screen1'/> <Route name='Screen2' component={Screen2} schema='interior' title='Screen2'/> </Router> </SideDrawer> </Route> </Router> ); }

Hello,
I'm a react-native beginner and was trying to build the project to understand how the Side menu and Navigation work together in the app.
I downloaded the project
made npm install in the terminal
then when I tried to run on the iOS, I got error

** BUILD FAILED **


The following commands produced analyzer issues:
	Analyze RCTLocationObserver.m

(1 command with analyzer issues)

The following build commands failed:
	CompileC /Users/mohammedelgohary/Downloads/rndrawer-implemented-rnrouter-master\ 2/ios/build/Build/Intermediates/RCTSettings.build/Debug-iphonesimulator/RCTSettings.build/Objects-normal/x86_64/RCTSettingsManager.o RCTSettingsManager.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/reactNativeRouterFluxSample.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/reactNativeRouterFluxSample.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

in the Drawer you did like this?
React.Children.map(
React.Children.map(this.props.children, c => React.cloneElement(c, {route:this.props.route})
)
can you explain why ?

Hi there,

May I know if it is possible to navigate without using
onPress ?

For example, in Login.js, we use render() this:
<Button onPress={Actions.Drawer}>Login</Button>
and that in order to go to the Drawer screen we need to
tap on the button

Is there a way to navigate to the Drawer screen when the Login screen loads?
For example navigate to Drawer programmatically via componentDidMount ?

Cheers.

Hi,

Still quite new to react native... Was just wondering if you could add in your example, how I can add a top left navigation button which toggles the open/close of the drawer.

Thanks.

Im trying to center navBar image. on iOS image render center perfect, but on android i cant do it.

My image code:

renderNavigatorTitleImage = () => {
        return (
            <View style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
            }}>
                <Image
                    source={require('./Resources/logo2.png')}
                    style={{ height: 30, width: 76}}
                    resizeMode="cover"
                />
            </View>
        )
    };

and in set on element, on "renderTitle" prop.

navBar style:

    navBar: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#E12518',
    },

Image always appear on top left. I try to use Dimensions, etc but i cant set on the mid.
Some idea?

Hi,

If we want drawer at both sides(Left&Right), we need two Drawer components? One for left and one for right?

I tried to implement the drawer according to the example. In fact I copied the main bits exactly SideDrawer and SideDrawerContent.

The Router is also nearly the same as the example

            <SideDrawer 
              ref={c => { c ? this.drawer = c.drawer : this.drawer }}
            >
              <Router name="drawerRoot" hideNavBar={true} footer={TabBar} tabBarStyle={style.tabBar} navigationBarStyle={style.navigationBar}>
(some routes here)
              </Router>
            </SideDrawer>

but I keep getting an error of Undefined is not an object.

getting error :
'props should be defined for stack',
How to resolve it.

Hi, im trying to implement Redux on my project.

When i uncomment Redux Section, i comment line:
import { Router, Route, Schema, Actions, } from 'react-native-router-flux'

But terminal:

Could not find "store" in either the context or props of "Connect(Router)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Router)".

Can you help me?

Hi,

When user tap on outside drawer, drawer will closed with line of code "tapToClose={true}",
In the same time I need to trigger method here, because PFA screen shot as per screen shot I need to change back arrow button to menu button.

HI, thanks for the great example! But unfortunately its kind of old now.
Can you update the project with the latest versions of packages?
Both router and drawer packages has breaking changes since this version.

Thank you.

Hi good day!

Firstly, AWESOME job with this example! Really solved major headaches!

I was just wondering if it is possible to use an image for the title?

For example:

<Route name='Home' component={ScreenHome} schema='home' title={this.renderLogo} />

and renderLogo looks like this:

renderLogo = () => { return ( <Image source={require('../images/icons/logo.png')} style={{height: 24, width: 24}} /> ) };

I've tried the above out, but on Home screen, I do not see any logo rendered. I did not receive any errors too.

I was wondering if you have any insights as to how to use images in titles?

Cheers and thanks again!

How should I get this to run (iOS) without the xcodeproj?