Hi everyone!
I’m fairly new to React and RN and I’m trying to rewrite a simple webpage I wrote in vanillaJS to an RN app.
The app is fairly simple and just converts an IP in a hexadecimal representation to a decimal representation.
Now I want a button which changes the view from the calculation view to an about view where I can write a bit about me. Since this is my “testing and learning app” options like *react-navigation* are a bit out of scope (I have another app where I tinker with this).
My thought was: I have a state, which tells what view the app is in. Based on this state a view is rendered.
But when I press the button, nothing happens. If i try to use the calculator again, the app throws an _this2.setState is not a function error.
Here is a link to a gist with comments to find the relevant method and functions
https://gist.github.com/KurzGedanke/38484826b8da31d16afebd441b9971aa
and here is link to the full source code, since I plan to released it as open source
https://github.com/KurzGedanke/decimalIP
I’ve found a few stackoverflow articles but it seems none of them really fits to my problem.
Thanks for your help!
import React, {Component} from 'react';
import {SafeAreaView, Text, TextInput, View, StatusBar, Keyboard, Button} from 'react-native';
import styles from './src/styles';
import ConvertIP from './src/component/ConvertIPs'
export default class App extends Component {
constructor(props){
super(props);
this.state = {
hexIP: '',
// initialise state for the view changing
view: ['calc', 'about'],
activeView: 'calc'
};
this.disKeyboard = this.disKeyboard.bind(this);
// binding the changeView method
this.changeView = this.changeView.bind(this);
}
disKeyboard(){
Keyboard.dismiss();
}
changeView(){
// the changeView method to set the state based on the button press
console.log('CHange view!')
if (this.state.activeView == 'calc'){
this.setState = {
activeView: 'about'
}
} else {
this.setState = {
activeView: 'calc'
}
}
}
render() {
return (
<SafeAreaView style={{flex: 1, backgroundColor: '#F5FCFF'}}>
<StatusBar backgroundColor="blue" barStyle="dark-content" />
// conditional rendering if
{this.state.activeView == 'calc' &&
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to Decimal IP!</Text>
<Text>Enter a hexa decimal ip to convert it to a decimal ip</Text>
<TextInput
style={styles.input}
placeholder="Input HEX IP e.g 7F000001"
onChangeText={(hexIP) => this.setState({hexIP})}
/>
<ConvertIP decIP={this.state.hexIP} />
<Button
onPress={this.disKeyboard}
title='Dismiss keyboard'
/>
</View>
}
// conditional rendering for about
{this.state.activeView == 'about' && <Text>About</Text>}
// button which calls the changeView method
<Button
onPress={this.changeView}
title='About'
/>
</SafeAreaView>
);
}
}
