I'm trying to set the text color of a button in my react-native app via the TouchableOpacity object. I am using the same code for doing this that I have seen in numerous places on line, but it is generating an error for me. I'm trying to figure out what the correct coding of this has to be.

Here is the app ...

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';

class App extends Component {
  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text> style={{color: '#FFFFFF'}}>Hippo counter</Text>
        </TouchableOpacity>
        <View>
          <Text>Hippo count: {this.state.count}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DF0000',
    padding: 10,
    marginBottom: 10
  },
});

export default App;

When I run this react-native app, I get the following error:

Render Error

Objects are not valid as a React child (found: object with keys {color}). If you meant to render a collection of children, use an array instead.

Given that this same procedure for setting button text color works in a number of examples that I have found on line, I'm wondering what else I might be doing incorrectly which triggers this error in my specific case.

If I remove style={{color: '#FFFFFF'}}>, from the "Text" attribute of the "TouchableOpacity" object, then the app runs properly. So what must I do in order to change this text color?

I'm trying to set the text color of a button in my react-native app via the TouchableOpacity object. I am using the same code for doing this that I have seen in numerous places on line, but it is generating an error for me. I'm trying to figure out what the correct coding of this has to be.

Here is the app ...

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';

class App extends Component {
  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text> style={{color: '#FFFFFF'}}>Hippo counter</Text>
        </TouchableOpacity>
        <View>
          <Text>Hippo count: {this.state.count}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DF0000',
    padding: 10,
    marginBottom: 10
  },
});

export default App;

When I run this react-native app, I get the following error:

Render Error

Objects are not valid as a React child (found: object with keys {color}). If you meant to render a collection of children, use an array instead.

Given that this same procedure for setting button text color works in a number of examples that I have found on line, I'm wondering what else I might be doing incorrectly which triggers this error in my specific case.

If I remove style={{color: '#FFFFFF'}}>, from the "Text" attribute of the "TouchableOpacity" object, then the app runs properly. So what must I do in order to change this text color?

• javascript
• css
• react-native
• text
• render

1 Answer 1

There is a small typo here :

<Text> style={{color: '#FFFFFF'}}Hippo counter</Text>

You are closing the Text tag too soon.

Corrected :

<Text style={{color: '#FFFFFF'}}>Hippo counter</Text>