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

0 Answers