Return UI components from functions in react-native-CodePudding

The following code is working fine

<View>
    <ViewShot ref={viewShotRef}>
            <Grayscale >
                <Image style={styles.imgstyle}
                    source={{ uri: sourceImage, }}
                    onl oadEnd={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, }}
                    onl oadEnd={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.

CodePudding user response：

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>