how do I dynamically render title as component

Question

I have a scene:

<Scene key="myFeed" component={myFeed} renderTitle={level}/>

In which I use the component to display the "title". This function:

const level = () => {
  return (
     <Level/>
  )
}

This component:

export class Level extends Component {
    constructor(props) {
        super(props);


        this.state = {
            progressBar: {},
            loading: true,
        };

    }

    connection() {
        myApi.getServer('/user/level/', (data) => {
            this.setState({loading: false, progressBar: data});
        }, (err) => {
            console.log(err.message);
            this.setState({loading: false});
        })
    }

    render() {
        return(
            <View  style={styles.topBarCenterSlider}>
                   <View style={styles.topBarSlider}>
                          <View style={[styles.topBarStatus, {width: this.state.progressBar.level["progress"] + '%' : 0}]}/>
                          </View>
                   </View>
            </View>
        );
    }
}

I need to change the component after the server response. Help please, and sorry for my English))

Answer 1

I see you dont invoke "connection()". Put in componentWiLlMount

componentWillMount() {
  this.connection();
}