React-Native & Redux Raw text cannot be used outside of a <Text> tag. Not rendering string: ''

Question

I am working on a React-Native app that has multiple screens and uses react-native-router-flux for navigation. One of the screens is supposed to change the background image of the main screen so in this background settings screen I have a list of images with a switch button. Currently it looks like this:

If i try to click on any of the other switches I get the error below:

And here is the code for the main screen:

class MainScreen extends Component {

changedBackground(){
    switch(this.props.backgroundImage){
        case 'straw':
            return (
                <Image source={require('../assets/img/paie.png')} style={mainScreenStyle.bgImg}/>
            );
        case 'rabbit fur':
            return (
                <Image source={require('../assets/img/rabbit_fur.jpg')} style={mainScreenStyle.bgImg}/>
            );
        case 'bear fur':
            return(
                <Image source={require('../assets/img/bear_fur.jpeg')} style={mainScreenStyle.bgImg}/>
            );
        case 'fox fur':
            return (
                <Image source={require('../assets/img/fox_fur.jpg')} style={mainScreenStyle.bgImg}/>
            );
        default:
            return ''
    }
}
    render() {
        return (
            <View style={mainScreenStyle.container}>
                <View style={mainScreenStyle.menu}>
                    {this.changedBackground()}
                </View>
                <TargetComponent style={mainScreenStyle.targetD}/>
                <ScoreBadges/>
            </View>
        );
    }
}

const mapStateToProps = state => {
    return {
        backgroundImage: state.mainScreen.backgroundImage,
    };
};

export default connect(mapStateToProps, {changeBackground})(MainScreen);

And the code for the background settings screen:

const straw = () => {
    return <Image source={require('../../assets/img/paie.png')}
                  style={[background_list_img.background_img_icon]}/>;
};
const rabbit = () => {
    return <Image source={require('../../assets/img/rabbit_fur.jpg')}
                  style={[background_list_img.background_img_icon]}/>;
};
const bear = () => {
    return <Image source={require('../../assets/img/bear_fur.jpeg')}
               style={[background_list_img.background_img_icon]}/>;
};
const fox = () => {
    return <Image source={require('../../assets/img/fox_fur.jpg')}
               style={[background_list_img.background_img_icon]}/>;
};


const backgrounds_list = [
        {id:'0', name:'straw', img:straw()},
        {id:'1', name:'rabbit', img:rabbit()},
        {id:'2', name:'bear', img:bear()},
        {id:'3', name:'fox', img:fox()}
    ];

class BackgroundSettings extends Component {


    render(){
        return <FlatList data={backgrounds_list} keyExtractor={item=>item.id}
                         renderItem={({item})=>{return(
                             <ListItem leftIcon={item.img}
                                       title={"  " + item.name}
                                       hideChevron
                                       switchButton
                                       switched={this.props.currentBackground === item.name}
                                       onSwitch={()=>{this.props.changeBackground(item.name)}}/>);}}
        />;
    }
}

mapStateToProps = state => {
    return {
        currentBackground: state.mainScreen.backgroundImage,
    };
};

export default connect(mapStateToProps, {changeBackground})(BackgroundSettings);

The reducer is very simple:

const INITIAL_STATE = {backgroundImage:'straw'};

export default MainScreenReducer = (state = INITIAL_STATE, action) => {
    switch (action.type){
        case BACKGROUND_CHANGE:
            return { ...state, backgroundImage:action.payload};
        default:
            return state;
    }
}

And the action creator is simple as well:

export const changeBackground = (imageName) =>{
    return{
        type:BACKGROUND_CHANGE,
        payload:imageName
    };

};

Any idea what am I missing? I spent two days trying to figure this out...

Answer 1

change the switch statement default to any component

changedBackground(){
        switch(this.props.backgroundImage){
            case 'straw':
                return (
                    <Image source={require('../assets/img/paie.png')} style={mainScreenStyle.bgImg}/>
                );
            case 'rabbit fur':
                return (
                    <Image source={require('../assets/img/rabbit_fur.jpg')} style={mainScreenStyle.bgImg}/>
                );
            case 'bear fur':
                return(
                    <Image source={require('../assets/img/bear_fur.jpeg')} style={mainScreenStyle.bgImg}/>
                );
            case 'fox fur':
                return (
                    <Image source={require('../assets/img/fox_fur.jpg')} style={mainScreenStyle.bgImg}/>
                );
/**
  here change like this:
  return <View/>
   or
  return null
 */
            default:
                return ''
        }
    }