Fetch data from mysql table with php and react native - php

Question

I want to display data from the MySQL table that is processed with PHP and react native but does not provide a response and does not display any error messages. If the PHP script I run with my browser will appear as follows:
[
{"group":"1","name":"Soy Souce A"},
{"group":"2","name":"Soy Souce B"},
{"group":"3","name":"Chili Tomato Souce"},
{"group":"4","name":"Vinegar"},
{"group":"5","name":"Syrup"}
]
This is the screen capture display:
My question :
Why the data can not be displayed
As in screen capture, why 3 headers can appear, header 2 is for navigation, how to eliminate headers 1 and 3
please help me overcome it, thank you
This is the react native script
import React, { Component } from 'react';
import DatePicker from 'react-native-datepicker'
import { View, Text, TouchableOpacity, FlatList } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Item, } from 'native-base';
class DataSearch extends React.Component {
constructor(props){
super(props)
this.state = {
date:"",
isLoading: false
}
}
componentDidMount() {
var that = this;
var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
that.setState({
date: date + '-' + month + '-' + year,
});
}
DataShowProcess = () =>{
const { date } = this.state ;
this.setState({
dataSource: [],
isLoading: true
});
fetch('https://example.com/item_group.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
dateSearch: date,
})
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
});
this.props.navigation.navigate('Second', this.state.dataSource);
})
.catch((error) => {
console.error(error);
});
}
render(){
return (
<View>
<DatePicker
style={{width: 200}}
date={this.state.date}
mode="date"
placeholder="select date"
format="DD-MM-YYYY"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 200,
top: 0,
marginLeft: 0
},
dateInput: {
marginLeft: 100
},
}}
onDateChange={(date) => {this.setState({date: date})}}
/>
<TouchableOpacity
style={{ alignItems: 'center'}}
onPress={this.DataShowProcess}
>
<Icon name='search' size={35} color='black'/>
</TouchableOpacity>
</View>
)
}
}
class DataShow extends React.Component {
render(){
const { navigation } = this.props;
return (
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.responseJson}
renderItem={({item}) => <Text>{item.group}, {item.name}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
)};
}
const RootStack = createStackNavigator({
First: DataSearch,
Second: DataShow,
});
export default createAppContainer(RootStack);