Unexpected token, expected ";" in react native

Question

I am a newbie in react native, I am developing a video app to aid my learning curve. In the code below I have tried all I could to solve the error on the "displayModal" line, but could not. Please can anyone help me with this. I want on image/video capture it will display on the modal and from the modal i will be able to "Discard", or "Save"(to firebase), or "Share" the image/video.

import React from 'react';
import { View, Text, Image, Modal, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

import styles from './styles';

export default ({captures=[]}) => {
   state = {
   isVisible: false
   }
 // hide show modal
  displayModal(show){  ------this is where am getting the error
   this.setState({isVisible: show})
}
 return (

  <Modal 
   transparent={true}
   visible={this.state.isVisible}
   // style={[styles.bottomToolbar, styles.galleryContainer]} 
>
 <View style={{backgroundColor: "#000000aa", flex: 1}}>
  {captures.map(({ uri }) => (
  <View style={styles.galleryImageContainer} key={uri}>
   <Image source={{ uri }} style={styles.galleryImage} />
  </View>
 ))}
 </View>
 <TouchableOpacity style={{justifyContent: 'center', alignItems: 'center'}}>
 <Ionicons
  name="close-outline"
  color="white"
  size={20}
  onPress={() => {this.displayModal(!this.state.isVisible);}}
  />
   <Text>Discard</Text>
   </TouchableOpacity>
   </Modal>

  );
};

click here to see error image

Answer 1

You are mixing functional component with class component. "this.state" and "this.setState" belong to class components and all the rest belongs to functional components.

Try to change this:

state = {
   isVisible: false
   }
 // hide show modal
  displayModal(show){  ------this is where am getting the error
   this.setState({isVisible: show})
}

To this:

const [isVisible, setIsVisible] = React.useState(false);

const displayModal = show => setIsVisible(show);

In addition, in the return statement, remove the strings/words "this" and "this.state".

Requested addition:

import React, { useState } from 'react';
import { View, Text, Image, Button, Modal, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { storage } from './fbstorage';
import { Camera } from 'expo-camera';

import styles from './styles';

export default ({ captures = [] }) => {
    const [isVisible, setIsVisible] = useState(false);

    const takePicture = async () => {
        const photoData = await Camera.takePictureAsync();
        if (!photoData.cancelled) {
            uploadImage(photoData.uri, imageName)
                .then(() => {
                    Alert.alert("Success");
                })
                .catch((error) => {
                    Alert.alert('Error:', error.message);
                });
        }
    }

    const uploadImage = async (uri, imageName) => {
        const response = await fetch(uri);
        const blob = await response.blob();
        var ref = storage().ref().child("images/" + imageName);
        return ref.put(blob)
    }

    return (
        <Modal
            transparent={true}
            visible={isVisible}
        // style={[styles.bottomToolbar, styles.galleryContainer]} 
        >
            <View style={{ backgroundColor: "#000000aa", flex: 1 }}>
                {captures.map(({ uri }) => (
                    <View style={styles.galleryImageContainer} key={uri}>
                        <Image source={{ uri }} style={styles.galleryImage} />
                    </View>
                ))}
            </View>
            <TouchableOpacity
                style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: 20,
                    top: -20
                }}
                onPress={() => setIsVisible(false)}
            >
                <Ionicons
                    name="md-reverse-camera"
                    color="white"
                    size={40}
                />
                <Text style={{ color: 'white' }}>Discard</Text>
            </TouchableOpacity>
            <Button
                title='Save'
                onPress={takePicture}
            />
        </Modal>
    );
};

Answer 2

From you code it looks like a functional component, but you are using state as class-based component, that might be the reason you are getting error :

export default ({captures=[]}) => {
  state = {
    isVisible: false
  }
  // hide show modal
  displayModal(show){  ------this is where am getting the error
    this.setState({isVisible: show})
  }

Above code block should look like this :

export default ({captures=[]}) => {

  const [state,setState] = useState({ isVisible: false })

  // hide show modal
  const displayModal = (show) => { 
    setState({isVisible: show})
  }