I've applied Stack Navigator in React-Navigation for my HomeScreen.
After Applying it I'm getting a totally white screen with title name on top.
Please Help Me Resolve it!
HomeScreen.js
import React from "react";
import { ScrollView, SafeAreaView } from "react-native";
import styled from "styled-components";
import Card from "../components/Card";
import { NotificationIcon } from "../components/icons.js";
import Logo from "../components/Logo.js";
import Course from "../components/Course";
export default function App() {
return (
<Container>
<SafeAreaView style={{ flex: 1 }}>
<ScrollView showsVerticalScrollIndicator={false}>
<Titlebar>
<Avatar source={require("../assets/avatar.jpg")} />
<Title>Welcome Back,</Title>
<Name>Saksham Gupta</Name>
<NotificationIcon
style={{ position: "absolute", right: 20, top: 5 }}
/>
</Titlebar>
<ScrollView
style={{
flexDirection: "row",
padding: 20,
paddingLeft: 12,
marginTop: 30,
}}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{logo.map((logo, index) => (
<Logo key={index} image={logo.image} text={logo.text} />
))}
</ScrollView>
<Subtitle>Continue Learning</Subtitle>
<ScrollView
horizontal={true}
style={{ paddingBottom: 30 }}
showsHorizontalScrollIndicator={false}
>
{cards.map((card, index) => (
<Card
key={index}
title={card.title}
image={card.image}
caption={card.caption}
logo={card.logo}
subtitle={card.subtitle}
/>
))}
</ScrollView>
<Subtitle>Popular Courses</Subtitle>
<ScrollView
style={{ flexDirection: "row", paddingBottom: 30 }}
showsHorizontalScrollIndicator={false}
>
{courses.map((course, index) => (
<Course
key={index}
image={course.image}
title={course.title}
subtitle={course.subtitle}
logo={course.logo}
author={course.author}
avatar={course.avatar}
caption={course.caption}
/>
))}
</ScrollView>
</ScrollView>
</SafeAreaView>
</Container>
);
}
const Container = styled.View`
flex: 1;
background-color: #f0f3f5;
`;
const Title = styled.Text`
font-size: 16px;
color: #b8bece;
font-weight: 500;
`;
const Name = styled.Text`
font-size: 20px;
color: #3c4560;
font-weight: bold;
`;
const Titlebar = styled.View`
width: 100%;
margin-top: 50px;
padding-left: 80px;
`;
const Avatar = styled.Image`
width: 44px;
height: 44px;
background: black;
border-radius: 22px;
margin-left: 20px;
position: absolute;
top: 0;
left: 0;
`;
const Subtitle = styled.Text`
color: #b8bece;
font-weight: 600;
font-size: 15px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
`;
const logo = [
{
image: require("../assets/logo-framerx.png"),
text: "Framer X",
},
{
image: require("../assets/logo-figma.png"),
text: "Figma",
},
{
image: require("../assets/logo-studio.png"),
text: "Studio",
},
{
image: require("../assets/logo-react.png"),
text: "React",
},
{
image: require("../assets/logo-swift.png"),
text: "Swift",
},
{
image: require("../assets/logo-sketch.png"),
text: "Sketch",
},
];
const cards = [
{
title: "React Native for Designers",
image: require("../assets/background11.jpg"),
subtitle: "React Native",
caption: "1 of 12 sections",
logo: require("../assets/logo-react.png"),
},
{
title: "Styled Components",
image: require("../assets/background12.jpg"),
subtitle: "React Native",
caption: "2 of 12 sections",
logo: require("../assets/logo-react.png"),
},
{
title: "Props and Icons",
image: require("../assets/background13.jpg"),
subtitle: "React Native",
caption: "3 of 12 sections",
logo: require("../assets/logo-react.png"),
},
{
title: "Static Data and Loop",
image: require("../assets/background14.jpg"),
subtitle: "React Native",
caption: "4 of 12 sections",
logo: require("../assets/logo-react.png"),
},
];
const courses = [
{
title: "Prototype in InVision Studio",
subtitle: "10 sections",
image: require("../assets/background13.jpg"),
logo: require("../assets/logo-studio.png"),
author: "Meng To",
avatar: require("../assets/avatar.jpg"),
caption: "Design and interactive prototype",
},
{
title: "React for Designers",
subtitle: "12 sections",
image: require("../assets/background11.jpg"),
logo: require("../assets/logo-react.png"),
author: "Meng To",
avatar: require("../assets/avatar.jpg"),
caption: "Learn to design and code a React site",
},
{
title: "Design and Code with Framer X",
subtitle: "10 sections",
image: require("../assets/background14.jpg"),
logo: require("../assets/logo-framerx.png"),
author: "Meng To",
avatar: require("../assets/avatar.jpg"),
caption: "Create powerful design and code components for your app",
},
{
title: "Design System in Figma",
subtitle: "10 sections",
image: require("../assets/background6.jpg"),
logo: require("../assets/logo-figma.png"),
author: "Meng To",
avatar: require("../assets/avatar.jpg"),
caption:
"Complete guide to designing a site using a collaborative design tool",
},
];
AppNavigator.js
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import SectionScreen from "../screens/SectionScreen";
import HomeScreen from "../screens/HomeScreen";
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Section: SectionScreen,
});
export default createAppContainer(AppNavigator);
SectionScreen
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import SectionScreen from "../screens/SectionScreen";
import HomeScreen from "../screens/HomeScreen";
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Section: SectionScreen,
});
export default createAppContainer(AppNavigator);
App.js
import React from "react";
import styled from "styled-components";
import AppNavigator from "./navigator/AppNavigator";
export default function App() {
return (
<Container>
<AppNavigator />
</Container>
);
}
const Container = styled.View;
I'm New At This, So Please Write Easy Ways to Resolve It.
Here is the screen that is coming up:
It should have just a navigation header with HomeScreen.js as it main default file