react-debbuger
v0.0.1
Published
JavaScript implementation of a view container that can flip between its front and back, where the back has a console.log and the front is your aplication.
Downloads
12
Maintainers
Readme
react-debbuger
react-native component that let you see the console inside your app, in just one click
##Demo
##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)