How to reduce the huge space between components in the screen? - reactjs

Question

I'm new to react native development and I have a problem hope someone can help me!
I'm trying to show some components in a screen, I'm using native base and when I try to put the HomeHeader component and the MainSection component together in the Home Screen, They show with a huge space between them and if I try to duplicate the components, white space is shown between them also!
I don't know why this happens and I hope if someone can help me
Attached code and screenshots for the result on the genymotion emulator
Thanks in advance!
Home.js
import React from "react";
import { Container, Header, Content } from "native-base";
import { ImageBackground, Image, ScrollView } from "react-native";
import MainSection from "../Components/MainSection";
import HomeHeader from "../Components/HomeHeader";
export default class Home extends React.Component {
static navigationOptions = {
header: null
};
render() {
return (
<Container>
<Content>
<HomeHeader />
<MainSection />
<MainSection />
<MainSection />
</Content>
</Container>
);
}
}
HomeHeader.js
import React from "react";
import { Container, Text } from "native-base";
import { Image, ImageBackground } from "react-native";
export default class HomeHeader extends React.Component {
render() {
return (
<Container>
<ImageBackground
source={require("../Assets/Backgrounds/home-header.png")}
style={{
width: null,
flex: 1,
height: 130,
flexDirection: "row",
justifyContent: "center"
}}
>
</ImageBackground>
</Container>
);
}
}
MainSection.js
import React from "react";
import { Container, Content, Text, Button, View } from "native-base";
import { ImageBackground, Image, ScrollView } from "react-native";
export default class MainSection extends React.Component {
render() {
return (
<Container>
<Content>
<View
style={{
flex: 1,
flexDirection: "row",
marginTop: 13
}}
>
<Image
source={require("../Assets/Vector_Icons/home-first-icon.png")}
style={{ height: 50, width: 50, marginLeft: 25 }}
/>
<Text style={{ marginTop: 15, marginLeft: 10, marginRight: 50 }}>
Places For Going Out
</Text>
<Button transparent success style={{ marginTop: 3 }}>
<Text>View More</Text>
</Button>
</View>
<View
style={{
flex: 1,
flexDirection: "row",
marginTop: 13,
marginLeft: 25
}}
>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<Image
source={require("../Assets/Backgrounds/splash-bg.png")}
style={{
width: 150,
height: 150,
borderRadius: 5,
marginRight: 10
}}
/>
<Image
source={require("../Assets/Backgrounds/splash-bg.png")}
style={{
width: 150,
height: 150,
borderRadius: 5,
marginRight: 10
}}
/>
<Image
source={require("../Assets/Backgrounds/splash-bg.png")}
style={{ width: 150, height: 150, borderRadius: 5 }}
/>
</ScrollView>
</View>
</Content>
</Container>
);
}
}
Result