how to fix ';' expected error in React-Native

Question

So I keep getting this ';' expected error but can't seem to spot where it's at can you please help. Thank You

import React, { useState, Component } from 'react'; import { navigation } from 'react'; import { StyleSheet, TouchableHighlight, Dimensions, Text, View, TouchableOpacity, SafeAreaView, Image,
Button, TouchableWithoutFeedback, ScrollView, TextInput, Animated } from 'react-native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; import TacoTruckBG from './tacobg.png';

const SignPage = ({ navigation }) => {

state = { buttonAnimation: new Animated.Value(1), };

animateButton = () => { Animated.timing(this.state.buttonAnimation, { toValue: 0, duration: 1500, useNativeDriver: true, }).start(); };

On top of this render is where the error appears

render() { const buttonAnimation = { opacity: this.state.buttonAnimation, };
return (
  <View style={styles.container}>
    <View style={styles.header}>
      <Image source={TacoTruckBG} style={styles.logo} />
    </View>
  
    <View style={styles.footer}>
      <Text style={styles.text_footer}>Username</Text>
      <TextInput style={styles.textInput}
        placeholder="Username"
        autoCapitalize="none"
        onChangeText={(val) => setUsername(val)}
      />
      <Text style={styles.text_footer}>Password</Text>
      <TextInput style={styles.textInput}
        placeholder="Password"
        autoCapitalize="none"
        secureTextEntry={true}
        onChangeText={(password) => setPassword(password)}
      />
      <Text style={styles.text_footer}>Confirm Password</Text>
      <TextInput style={styles.textInput}
        placeholder="Confirm Password"
        autoCapitalize="none"
        secureTextEntry={true}
        onChangeText={(password) => setPassword(password)}
      />
      
      <TouchableOpacity onPress={() => this.animateButton()}>
        <Animated.View style={[styles.box, buttonAnimation]}><Text style={styles.text}>We love Tacos</Text></Animated.View>
      </TouchableOpacity>
      <Button title="Home Screen" style={styles.buttonContainer} onPress={() => navigation.navigate('Main')}></Button>
    </View>
  </View>
);   } }
export default SignPage;

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'brown', alignItems: 'center', justifyContent: 'center', }, box: { width: width/2, height: 50, backgroundColor: '#4B0082', alignItems: 'center', justifyContent: 'center', }, header: { flex: 1, backgroundColor: 'brown', alignItems: 'center', justifyContent: 'center', }, logo: { width: width / 1.5, height: height / 5.5, padding: 10, borderRadius: 10, resizeMode: 'stretch', }, footer: { flex: 1, backgroundColor: '#f6f3e4', alignItems: 'center', justifyContent: 'center', borderTopLeftRadius: 30, borderTopRightRadius: 30, padding: 20, paddingBottom: 150, paddingTop: 150, }, text_footer: { color: 'black', fontSize: 18, marginTop: 20, marginLeft: 10, marginRight: 10, }, textInput: { width: width / 1.5, height: height / 12, borderRadius: 5, borderWidth: 1, borderColor: '#d6d7da', marginBottom: 20, marginTop: 10, fontSize: 18, color: '#d6d7da', fontWeight: 'bold', }, buttonContainer: { width: width / 1.5, height: height / 15, padding: 10, borderRadius: 10, backgroundColor: '#2980b9', marginTop: 10, }, text: { color: '#000100', fontSize: 18, textAlign: 'center', fontWeight: 'bold', },

});

nithinpp nithinpp · Accepted Answer · 2021-09-08T04:47:13

There are fundamentally a lot of things wrong with your approach.

You are not supposed to use render function in a function based component. There is no render function in function based component.
To use state in a functional component, you will have to use the useState hook, not with state = {}
There is no navigation import from react
To style an Animated View, you can interpolate the animated value and then define your style based on that. I would suggest using reanimated v2 and the useAnimatedStyle hook for this purpose
And finally, a proper formatted, well readable code will go a long way.....

You can try the below code. (I've removed the styles part to make it short)

import React, { useState, Component, useRef } from 'react';
import { StyleSheet, TouchableHighlight, Dimensions, Text, View, TouchableOpacity, SafeAreaView, Image, Button, TouchableWithoutFeedback, ScrollView, TextInput, Animated } from 'react-native';
import TacoTruckBG from './tacobg.png';

const { width, height } = Dimensions.get('window');

const SignPage = ({ navigation }) => {

  const buttonAnimation = useRef(new Animated.Value(0)).current;

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmpassword, setConfirmPassword] = useState('');

  const animateButton = () => {
    Animated.timing(buttonAnimation, {
      toValue: 1,
      duration: 1500,
      useNativeDriver: true,
    }).start();
  };

  const buttonAnimationOpacity = {
    opacity: buttonAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [1, 0]
    }),
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={TacoTruckBG} style={styles.logo} />
      </View>

      <View style={styles.footer}>
        <Text style={styles.text_footer}>Username</Text>
        <TextInput
          style={styles.textInput}
          placeholder="Username"
          autoCapitalize="none"
          value={username}
          onChangeText={(val) => setUsername(val)}
        />
        <Text style={styles.text_footer}>Password</Text>
        <TextInput
          style={styles.textInput}
          placeholder="Password"
          autoCapitalize="none"
          secureTextEntry={true}
          value={password}
          onChangeText={(password) => setPassword(password)}
        />
        <Text style={styles.text_footer}>Confirm Password</Text>
        <TextInput
          style={styles.textInput}
          placeholder="Confirm Password"
          autoCapitalize="none"
          secureTextEntry={true}
          value={confirmPassword}
          onChangeText={(password) => setConfirmPassword(password)}
        />

        <TouchableOpacity onPress={animateButton}>
          <Animated.View style={[styles.box, buttonAnimationOpacity]}><Text style={styles.text}>We love Tacos</Text></Animated.View>
        </TouchableOpacity>
        <Button title="Home Screen" style={styles.buttonContainer} onPress={() => navigation.navigate('Main')}></Button>
      </View>
    </View>
  );
}

export default SignPage;

how to fix ';' expected error in React-Native

1 Answers