Component Return Issue React Native

Question

I'm pretty new to Native React. I just went through the Expo tutorial and I am trying to make a Button that can consolidate the TouchableOpacity and Text into one component for re-usability.

I keep getting "Invariant Violation: Button(): Nothing was returned from render." I also referenced here.

Stylesheet is not in code below, not a concern.

Thanks!

import React from 'react';
import { Image, Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Sharing from 'expo-sharing';

function Button(props)
{
  return
  (
  <TouchableOpacity
    onPress={props.command} style = {styles.button}>
    <Text style={styles.buttonText}>{props.t}</Text>
  </TouchableOpacity>
  );
}

export default function App() {
  const [selectedImage, setSelectedImage] = React.useState(null);

  let openImagePickerAsync = async() => {
    let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

    if (permissionResult.granted === false)
    {
      alert("Permission to access camera roll is required!");
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync();
    if (pickerResult.cancelled === true)
    {
      return;
    }

      setSelectedImage({localUri:pickerResult.uri});
  };


  let openShareDialogAsync = async() => {
    if (!(await Sharing.isAvailableAsync()))
    {
      alert(`The image is available for sharing at: ${selectedImage.remoteUri}`);
      return;
    }

    Sharing.shareAsync(selectedImage.localUri);
  };

  if (selectedImage !== null)
  {
    return(
      <View style={styles.container}>
        <Image
          source ={{uri:selectedImage.localUri}}
          style={styles.thumbnail}
          />

        <TouchableOpacity onPress={openShareDialogAsync} style={styles.button}>
          <Text style={styles.buttonText}>Share this photo</Text>
        </TouchableOpacity>
      </View>
    );
  }
  return (
    <View style={styles.container}>
      <Image source={{uri: "https://i.imgur.com/TkIrScD.png"}} style={styles.logo} />
      <Text style = {styles.instructions}>
        To share a photo from your phone with a friends, just press the button below!
      </Text>

      <Button command = {openImagePickerAsync} t = "Pick a photo"/>

      {/*
      <TouchableOpacity
        onPress={openImagePickerAsync} style = {styles.button}>
        <Text style={styles.buttonText}>Pick a photo</Text>
      </TouchableOpacity>
      */}

    </View>

  );
}

Guruparan Giritharan Guruparan Giritharan · Accepted Answer · 2020-05-26T06:33:56

Nothing wrong with your code only thing is your return statement. When you place the opening bracket in the next line it will not return anything and your actual component code will be unreachable as it will be considered as a separate block. Just change it to the code below.

function Button(props) {
  return (
    <TouchableOpacity onPress={props.command} style={styles.button}>
      <Text style={styles.buttonText}>{props.t}</Text>
    </TouchableOpacity>
  );
}

Component Return Issue React Native

1 Answers