1

I am new to React and I was trying to make an app where there will be a title ("Hello World") that would fade in and button on the screen so it can redirect

I am trying to implement a Touchable Button with Opacity onto my HomeScreen but this error: "Invariant Violation: Text strings must be rendered within a component" keeps popping up.

I've tried searching for any unclosed Text strings and brackets all throughout my code but I haven't found any

import React from 'react';
import { Animated, View, Text, ButtonText, Button,  AppRegistry, Image, ImageBackground, StyleSheet,  TextInput, TouchableOpacity} from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json


//Hello World Animation 
class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  
  }

  componentDidMount() {
    Animated.timing(                  
      this.state.fadeAnim,            
      {
        toValue: 1,                   
        duration: 8000,              
      }
    ).start();                      
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                
        style={{
          ...this.props.style,
          opacity: fadeAnim,         
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}
//End of Hello World Animation 


//Styles 
const styles = StyleSheet.create({
  greetingText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 30,
  },

  container: {
    paddingTop: 60,
    alignItems: 'center'
  },
button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }

});
//End of Styles 


//HomeScreen 
class HomeScreen extends React.Component {
  render() {
    let pic = {
      url: 'https://media3.giphy.com/media/3ohhwNqFMnb7wZgNnq/giphy.gif'
    };
    return (
       <ImageBackground source={pic} style={{width: '100%', height: '100%'}}>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <FadeInView style={{width: 250, height: 60, backgroundColor: 'powderblue'}}>
          <Text style={{fontSize: 30, textAlign: 'center', margin: 10}}>Hello, World </Text>
        </FadeInView>


         <TouchableOpacity 
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Details' })
              ],
            }))
          }}
          >
        <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        />


      </View>
      </ImageBackground>
    );
  }  
}
//End of HomeScreen 

//Second page (aka DetailsPage)
class DetailsScreen extends React.Component {
   constructor(props) {
    super(props);
    this.state = {text: ''};
  }
render() {
    return (
       <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />

      </View>
    );
  }  
}
//End of Second page 

//HomePage and DetailsPage Directory
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },

}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

Ultimately, I want the Touchable button to appear onto my HomeScreen so that it can redirect to the DetailsPage. I used StackNavigator as a means to accomplish this but I'm not sure if I'm properly combining my knowledge with StackNavigator and buttons to properly install it.

1 Answers1

0

Your error is an extra "/>" . You can use extensions like Prettier and eslint to catch those mistakes easily.

Prettier: https://github.com/prettier/prettier ESlint: https://eslint.org/docs/user-guide/getting-started

 <View style={styles.button}>
        <Text style={styles.buttonText}>TouchableOpacity</Text>
      </View>
    </TouchableOpacity>
    />       <--  //Here is your mistake
Rodrigo
  • 224
  • 3
  • 12