0.0.1 • Published 8 years ago

react-debbuger v0.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
8 years ago

react-debbuger

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

##Demo npm.io

##Pre-Requirements

###react-native-console-panel

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

###react-native-flip-view

npm install --save react-native-flip-view

you will have to edit a file in flip-view (react-native-flip-view/index.js)

var interpolationConfig = {inputRange: [0, 1], outputRange: ["0deg", "180deg"]};

line 50

##Installation

npm i react-debbuger

##Example

import DragDebuger from "DragDebuger.js";
...

render(){
		const routes = [
			{title: "First Scene", index: 0},
			{title: "Second Scene", index: 1},
		];
		return(
			<DragDebuger positionX={175} positionY={275}>
				<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>
		);
}

##Props positionX= initial x value for Animates.ValueXY(); positionY= initial y value for Animates.ValueXY();

##Customize you can chagne the image in the following path of the tag, maxHeigth and maxWidth 50

<TouchableOpacity onPress={()=>{this.setState({isFlipped:!this.state.isFlipped})}}>
    <Image style={styles.bugimg} source={require('./../img/bug_icon.png')}/>
</TouchableOpacity>

##Thanks To NativeSH (for the console panel)

kevinstumpf (for the flip view animation)