React native doesn't show {this.state.age} in Text - ios

Question

React native won't display any of my States in or . But they're working with functions.
That is in my Code:
import {
StyleSheet,
View,
Image,
Text, //Important
PanResponder,
Animated,
Dimensions,
Button,
Slider,
TouchableWithoutFeedback,
Alert,
TouchableOpacity,
TouchableHighlight,
Modal, // Important
} from 'react-native'
My Constructor:
constructor(props) {
super(props);
this.state = {ModalMenu: false};
this.state = {ModalKunst: false};
this.state = {ModalArtwork: false};
this.state = { viewRef: null };
this.state = { age: 150 };
this.state = { farbe: 'black'};
this.state = {ModalPrice: false};
this.state = {
TextInputName: '',
TextInputEmail: '',
}
this.state = {
TextInputName2: '',
TextInputEmail2: ''
}
}
To display the State:
render() {
const {birthday, name, bio, id, id2} = this.props.profile
const profileAge = this.calcAge(birthday)
var fbImage = require('./img/bild12.jpg')
const rotateCard = this.pan.x.interpolate({
inputRange: [-200, 0, 200],
outputRange: ['10deg', '0deg', '-10deg'],
})
const animatedStyle = {
transform: [
{translateX: this.pan.x},
{translateY: this.pan.y},
{rotate: rotateCard},
]
}
return (
<View><Text>{this.state.age}</Text></View>
);
}}
But its showing nothing :(
I also don't get an error
Would be very nice if someone could help me out with that.
I updated all the render code

Answer 1

In the constructor please do all your initialization at once. Every this.state = {} statement is overriding the previous this.state
replace your constructor with following code.
this.state = {
ModalMenu: false,
ModalKunst: false,
viewRef: null,
age: 150,
farbe: 'black',
ModalPrice: false
};

Answer 2

Heres a sample code try this..
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends Component {
constructor(){
super();
this.state = {age: '25'};
}
render() {
return (
<View >
<Text style={styles.paragraph}>
{this.state.age}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
paragraph: {
margin: 44,
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});

Answer 3

Your render method doesn't return anything. Add return inside
render method.
change this:
render() {
*not important*
}
to:
render() {
return (
<View><Text>{this.state.age}</Text></View>
);
}

Answer 4

At the moment, you are continually overriding your state, I've tidied your code up a bit below, here are some points to note about what I've done...
You need to import React from 'react' to utilise 'Component' as your class needs to extend from this.
You need to use a class as you have state
You can import an image like I've done below with fbImage
It's good habit to have say what is your exported default in each component you make.
You don't need to call constructor and super, just simply doing state = {} will do this for you
Place all your state within one state object, don't keep recalling state
Think about your general code formatting (in terms of how it looks) easier code to read will help you identify errors more easily!
import React from 'react'
import {
StyleSheet,
View,
Image,
Text, //Important
PanResponder,
Animated,
Dimensions,
Button,
Slider,
TouchableWithoutFeedback,
Alert,
TouchableOpacity,
TouchableHighlight,
Modal, // Important
} from 'react-native'
import fbImage from './img/bild12.jpg'
export default class App extends React.Component {
state = {
age: 150,
farbe: 'black',
ModalArtwork: false,
ModalKunst: false,
ModalMenu: false,
ModalPrice: false,
TextInputName: '',
TextInputEmail: '',
TextInputName2: '',
TextInputEmail2: '',
viewRef: null,
}
render() {
const {birthday, name, bio, id, id2} = this.props.profile
const profileAge = this.calcAge(birthday)
const rotateCard = this.pan.x.interpolate(
{
inputRange: [-200, 0, 200],
outputRange: ['10deg', '0deg', '-10deg'],
}
)
const animatedStyle = {
transform: [
{translateX: this.pan.x},
{translateY: this.pan.y},
{rotate: rotateCard},
]
}
return (
<View>
<Text>
{this.state.age}
</Text>
</View>
)
}
}