Invariant violation nothing was returnded from render - react-native

Question

renderAvail(user, sectionId, rowId, highlightRow){
return(
<ImageBackground source={require('../../../asset/available_card_medium.png')} style={styles.containerA}>
if(user.type == 'Wear'){
return(
<Image
source={require('../../../icon.png')}
resizeMode = 'cover' style={styles.thumbImage}>)
}
<View style={styles.body}>
<Text style={styles.message1}>{user.desc}</Text>
<Text style={styles.message1}>+{user.points} <Image source={require('../../../icon_large.png')} resizeMode ='contain' style ={{height:50,width:60}}/></Text>
</View>
<ImageButton
appearance={{
normal: require("../../../asset/btn.png"),
highlight: require("../../../asset/btn2.png")}}
onPress={ this.onPressButton }/>
</ImageBackground>
);
}
{
id: 0,
type: 'Survey',
desc: 'Keep Your Apple Watch on for 8 Hours Today',
title: 'Test1',
date: '09/06/2018',
},
{
id: 1,
type: 'Wear',
desc: 'Keep Your Apple Watch on for 8 Hours Today',
title: 'Test1',
date: '09/06/2018',
},
{
id: 2,
type: 'meal',
desc: 'Keep Your Apple Watch on for 8 Hours Today',
title: 'Test1',
date: '09/06/2018',
},
{
id: 3,
type: 'Survey',
desc: 'Keep Your Apple Watch on for 8 Hours Today',
title: 'Test1',
date: '09/06/2018',
},
{
id: 4,
type: 'Wear',
desc: 'Keep Your Apple Watch on for 8 Hours Today',
title: 'Test1',
date: '09/06/2018',
}
];

Answer 1

You cant return use return directly inside a return block because it will be already returned if condition meets. instead of above code, you can use this.
return (<ImageBackground source={require('../../../asset/available_card_medium.png')} style={styles.containerA}>
{user.type == 'Wear' && <Image
source={require('../../../icon.png')}
resizeMode='cover' style={styles.thumbImage}>)
}
<View style={styles.body}>
<Text style={styles.message1}>{user.desc}</Text>
<Text style={styles.message1}>+{user.points} <Image source={require('../../../icon_large.png')} resizeMode='contain' style={{ height: 50, width: 60 }} /></Text>
</View>
<ImageButton
appearance={{
normal: require("../../../asset/btn.png"),
highlight: require("../../../asset/btn2.png")
}}
onPress={this.onPressButton} />
</ImageBackground>
);

Answer 2

Going through your code i can understand that you are new to react native.
As #Ranvir Gorai answered previously, you can not use if statement inside a render(). please spare some time and go through JSX elements.
Assuming you are calling a function renderAvail() from render of a class.
import React from 'react';
import {
View,
Text,
// add other elements which are used.
} from 'react-native';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
user:'some data',
sectionId:'some data',
rowId: 'some data',
highlightRow: 'some data',
}
}
// add the data to state using this.setState({key,value});
renderAvail() {
return (
<ImageBackground source={require('../../../asset/available_card_medium.png')} style={styles.containerA}>
{user.type == 'Wear' && <Image
source={require('../../../icon.png')}
resizeMode='cover' style={styles.thumbImage}>)
}
<View style={styles.body}>
<Text style={styles.message1}>{user.desc}</Text>
<Text style={styles.message1}>+{user.points} <Image source={require('../../../icon_large.png')} resizeMode='contain' style={{ height: 50, width: 60 }} /></Text>
</View>
<ImageButton
appearance={{
normal: require("../../../asset/btn.png"),
highlight: require("../../../asset/btn2.png")
}}
onPress={this.onPressButton} />
</ImageBackground>
);
}
render() {
return (
{this.renderAvail(this.state.user, this.state.sectionId, this.state.rowId, this.state.highlightRow)}
);
}
}