How to design a rank with flexbox and page controllview - react-native

Question

I'm trying to put the name's on the left and the rank on the right. I tryed the flexDirection row with a space between or space evenly but it still doesn't work.
Do you have any solution for that ?
Also my function :
renderRanking = () => {
return this.state.ranking.map((element) => {
return (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-’‘’',
}}>
<View style={{flex: 1}}>
<Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>
<Text style={{fontSize: 20, color: 'white'}}>
{element.moyenne}
</Text>
</View>
</View>
);
});
};
And my render
render() {
return (
<SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>
<View style={{flex: 1, backgroundColor: 'black'}}>
<ScrollView>
<View
style={{
flex: 1,
}}>
<Text>{this.OpenDecibels()}</Text>
</View>
<View style={{paddingBottom: 30}}>
<PageControlView defaultPage={1}>
<View>{this.renderRanking()}</View>
</PageControlView>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
}
}

Answer 1

Try this way
<View
style={{
flexDirection: 'row',
justifyContent: 'space-’‘’',
}}>
<Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>
<Text style={{fontSize: 20, color: 'white'}}>
{element.moyenne}
</Text>
</View>

Answer 2

You should try below snippet in your renderRanking function.
renderRanking = () => {
return this.state.ranking.map((element) => {
return (
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>
<Text style={{fontSize: 20, color: 'white'}}>
{element.moyenne}
</Text>
</View>
);
});
};
Also change
<PageControlView defaultPage={1}>
<View>{this.renderRanking()}</View>
</PageControlView>
To
<PageControlView defaultPage={1}>{this.renderRanking()}</PageControlView>