Return UI components from functions in react-native

The following code is working fine

<View>
    <ViewShot ref={viewShotRef}>
            <Grayscale >
                <Image style={styles.imgstyle}
                    source={{ uri: sourceImage, }}
                    onLoadEnd={onImageLoaded}
                />
            </Grayscale>
    </ViewShot>
</View>

I tried to render some of the UI in a function

const renderFilter = () => {
return(
 <Grayscale >
                <Image style={styles.imgstyle}
                    source={{ uri: sourceImage, }}
                    onLoadEnd={onImageLoaded}
                />
  </Grayscale>
)
}

<View>
    <ViewShot ref={viewShotRef}>
            renderFilter()
    </ViewShot>
</View>

But I got an error. Not sure from where exactly the error is coming.

Error: Text strings must be rendered within a <Text> component.

1 answer

  • answered 2022-05-04 11:01 David Scholz

    You cannot call a function inside a JSX block without using curly braces. The following will fix your issue.

    <View>
        <ViewShot ref={viewShotRef}>
          {renderFilter()}
        </ViewShot>
    </View>
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum