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

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:

enter image description here

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

enter image description here

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...

2 answers

  • answered 2018-07-12 08:17 dbvt10

    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 ''
            }
        }
    

  • answered 2018-07-12 08:17 Faruk Yazıcı

    Instead of returning '', you should try returning null. Because '' is a string and needs Text around it. However null is an object and can be used instead of DOM objects.