Undefined is not an object(evaluating '_this2.state')

Question

I´m trying to render a form but I have some issues in the function ´getQuestions´.

The problem is with the colors, I can´t defined colors to the styles. (eg color:this.state.theme.someColor) I got an error ( Undefined is not an object(evaluating '_this2.state')

Instead I have to defined a variable and then passed to the color or backgroundColor. eg var fontColor = this.state.theme.someColor ant then in the return color:fontColor (psd: the others styles are working pretty well).

Also in the onPress in the Radio input I can´t call functions or the state for the same reason. What I am doing wrong? Thanks in advance for your help

The code:

import React, { Component } from 'react';
import {
  Text,
  StyleSheet,
  ScrollView,
  View,
  ActivityIndicator
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import WebService from '../WebService/WebService';
import { decode } from 'html-entities';
import { NativeBaseProvider, Box, Radio, Checkbox, HStack } from 'native-base';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import AwesomeButtonRick from "react-native-really-awesome-button/src/themes/rick";



class QuizComponent extends Component {
  constructor(props) {
    super(props);
    const params = this.props.route.params;
    this.webservice = new WebService();
    this.state = {
      load: true,
      item: params.item,
      questions: params.item.quiz[0].questions,
      userAnswers: [],
      theme: {
        primary: "#FFFFFF",
        font_color: "#000000",
        secondary: "#FFFFFF",
        contrast: "#CCCCCC"
      }
    }
  }
  componentDidMount() {
    this.getData();
  }

  renderLoading = () => {
    return (
      <View style={[styles.load, {
        backgroundColor: "#cccccc"
      }]}>
        <ActivityIndicator size="large" color="#ffffff" />
      </View>
    );
  }

  getData = async () => {
    this.setState({ load: true })
    try {
      const user = await AsyncStorage.getItem('CurrentUser')
      const platform = await AsyncStorage.getItem('Platform')
      const userObject = JSON.parse(user)
      const platformObject = JSON.parse(platform)
      if (user) {
        this.setState({
          host: platformObject.host,
          plataforma: platformObject.name,
          user: userObject,
          username: userObject.username,
          user_id: userObject.userId,
          api_key: userObject.apiKey,
          theme: {
            primary: platformObject.theme.primary,
            font_color: platformObject.theme.accent,
            secondary: platformObject.theme.secondary,
            contrast: platformObject.theme.extra
          }
        })
        setTimeout(() => {
          this.setState({ load: false })
        }, 500)
      } else {
      }
    } catch (e) {
      console.error(e)
    }
  }

  getQuestions = () => {
    var secondary = this.state.theme.secondary
    var font_color = this.state.theme.font_color
    var contrast = this.state.theme.contrast
    console.log(this.state.userAnswers)
    return (
      <ScrollView style={[{
        width: '100%',
        maxHeight: '100%'
      }]}>
        {
          this.state.questions.map(function (qIndex, index) {
            switch (qIndex.type) {
              case '1':
                return (
                  <Box key={index} style={[styles.container_box]}>
                    <Text style={[styles.question], {
                      backgroundColor: this.state.theme.secondary,
                      color: font_color,
                      padding: '2%',
                      borderRadius: 5
                    }}>{decode(qIndex.question)}</Text>
                    <Box style={[{ marginTop: '2%' }]}>
                      <HStack>
                        <Radio.Group>
                          {qIndex.answers.map(function (ansIndex, index1) {
                            return (
                              <Radio
                                key={index + '-' + index1}
                                value={ansIndex.id}
                                onPress={() => {
                                  console.log('press')
                                }}
                              >
                                <Text style={styles.answer, {
                                  color: font_color,
                                  marginBottom: '2%'
                                }}>
                                  {' ' + decode(ansIndex.answer.replace('<p>', '').replace('</p>', ''))}
                                </Text>
                              </Radio>
                            )
                          })}
                        </Radio.Group>
                      </HStack>
                    </Box>
                  </Box>
                )
                break;
              default:
                return (
                  <View>Algo</View>
                )
                break;
            }
          })
        }
        <AwesomeButtonRick
          style={[{
            alignSelf: "center",
            marginTop: '10%',
            marginBottom: '20%'
          }]}
          backgroundColor={secondary}
          backgroundDarker={contrast}
          textColor={font_color}
          paddingHorizontal={70}
          textSize={18}
          onPress={() => { console.log('hola') }}
        >Terminar
        </AwesomeButtonRick>
      </ScrollView>
    )
  }

  render() {
    if (this.state.load === true) {
      return(
        <NativeBaseProvider>
          {this.renderLoading()}
        </NativeBaseProvider>
      )
    }else{
      return (
        <NativeBaseProvider>
          <Box style={[styles.main_box], { backgroundColor: this.state.theme.primary,}}>
            {this.getQuestions()}
          </Box>
        </NativeBaseProvider>
      );
    }
  }
}

export default QuizComponent;