react-native-drag-debugger

react-native component that let you see the console inside your app, in just one tap

Demo

Pre-Requirements

react-native-console-panel

npm install --save react-native-console-panel --save

react-native-flip-view

npm install git://github.com/Infinity0106/react-native-flip-view.git --save

react-native-gesture-responder

npm i react-native-gesture-responder --save

Installation

npm i react-native-drag-debugger --save

Example

import DragDebuger from "react-native-drag-debugger.js";
...

render(){
        const routes = [
            {title: "First Scene", index: 0},
            {title: "Second Scene", index: 1},
        ];
        return(
            <DragDebuger positionX={175} positionY={275} sourceIMG={this.image()}>
                <Navigator
                    initialRoute={routes[0]}
                    initialRouteStack={routes}
                    renderScene={(route, navigator) =>
                        <TouchableHighlight onPress={() => {
                        if (route.index === 0) {
                            navigator.push(routes[1]);
                            console.log("inicio");
                        } else {
                            navigator.pop();
                            console.log("final");
                        }
                        }}>
                        <Text>Hello {route.title}!</Text>
                        </TouchableHighlight>
                    }
                    style={{borderColor: "red",borderWidth:2, backgroundColor: "white"}}
                    />
            </DragDebuger>
        );
};
image(){
    return(<Image style={{width:50,height:50}} source={{uri:'http://hitchcock.itc.virginia.edu/Slavery/next.gif'}}/>);
};

Props

Prop	Description	Default
positionX	initial X value for left positioning	0
positionY	initial Y value for top positioning	0
sourceIMG	initial Image for the icon

Thanks To

• NativeSH (for the console panel)
• kevinstumpf (for the flip view animation)
• ldn0x7dc (for the geesture responder)