Skip to content

Commit

Permalink
create explore page
Browse files Browse the repository at this point in the history
  • Loading branch information
b0nbon1 committed Mar 15, 2021
1 parent c3f73c1 commit 0fd266f
Show file tree
Hide file tree
Showing 56 changed files with 2,774 additions and 1,354 deletions.
4 changes: 0 additions & 4 deletions mobile/.expo-shared/assets.json

This file was deleted.

1 change: 1 addition & 0 deletions mobile/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"backgroundColor": "#000000"
}
},
"androidNavigationBar": { "visible": "sticky-immersive" },
"web": {
"favicon": "./assets/favicon.png"
}
Expand Down
Binary file added mobile/assets/check-green.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added mobile/assets/check-green@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added mobile/assets/check-green@3x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion mobile/babel.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
presets: ['babel-preset-expo'],
};
};
64 changes: 34 additions & 30 deletions mobile/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,53 +10,57 @@
},
"dependencies": {
"@emotion/native": "^11.0.0",
"@emotion/react": "^11.1.1",
"@expo/metro-config": "^0.1.42",
"@expo/vector-icons": "^10.0.0",
"@emotion/react": "^11.1.4",
"@expo/metro-config": "^0.1.49",
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/viewpager": "4.1.6",
"@react-navigation/drawer": "^5.11.3",
"@react-native-community/viewpager": "4.2.0",
"@react-navigation/material-top-tabs": "^5.3.11",
"@react-navigation/native": "^5.8.9",
"@react-navigation/stack": "^5.12.6",
"@reduxjs/toolkit": "^1.4.0",
"expo": "~39.0.2",
"expo-asset": "~8.2.0",
"expo-font": "~8.3.0",
"expo-status-bar": "~1.0.2",
"@reduxjs/toolkit": "^1.5.0",
"expo": "~40.0.0",
"expo-asset": "~8.2.1",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-navigation-bar-color": "^2.0.1",
"react-native-ratings": "^7.4.0",
"react-native-reanimated": "~1.13.2",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "12.1.0",
"react-native-tab-view": "^2.15.2",
"react-native-web": "~0.13.12",
"react-native-web": "~0.14.10",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-injectors": "^1.3.0",
"redux-saga": "^1.1.3"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@types/react": "~16.9.35",
"@types/react-dom": "~16.9.8",
"@types/react-native": "~0.63.2",
"@types/react-redux": "^7.1.11",
"@typescript-eslint/eslint-plugin": "^4.8.1",
"@typescript-eslint/parser": "^4.8.1",
"eslint": "7.2.0",
"@babel/core": "~7.12.10",
"@types/react": "~17.0.0",
"@types/react-dom": "~17.0.0",
"@types/react-native": "~0.63.45",
"@types/react-native-snap-carousel": "^3.8.2",
"@types/react-redux": "^7.1.15",
"@typescript-eslint/eslint-plugin": "^4.13.0",
"@typescript-eslint/parser": "^4.13.0",
"eslint": "7.18.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-prettier": "^6.15.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "4.0.0",
"prettier": "^2.1.2",
"typescript": "~3.9.5"
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "4.2.0",
"prettier": "^2.2.1",
"typescript": "~4.1.3"
},
"private": true
}
7 changes: 6 additions & 1 deletion mobile/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import * as Font from 'expo-font';
import { Asset } from 'expo-asset';

Expand All @@ -9,6 +10,7 @@ import store from './store';
import { themeDark } from './theme';

import Navigator from './navigation';
import theme from './store/theme/reducer';

const App: React.FC = () => {
const [loading, setLoading] = useState(true);
Expand All @@ -18,6 +20,7 @@ const App: React.FC = () => {
'Poppins-Regular': require('../assets/Poppins-Regular.ttf'),
'Poppins-Bold': require('../assets/Poppins-Bold.ttf'),
entypo: require('../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Entypo.ttf'),
ionicons: require('../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
});
const images = [require('../assets/icon.png')];
await images.map(image => Asset.fromModule(image).downloadAsync());
Expand All @@ -30,7 +33,9 @@ const App: React.FC = () => {
return (
<Provider store={store}>
<ThemeProvider theme={themeDark}>
{!loading && <Navigator />}
<View style={{ backgroundColor: '#000', flex: 1 }}>
{!loading && <Navigator />}
</View>
</ThemeProvider>
</Provider>
);
Expand Down
13 changes: 9 additions & 4 deletions mobile/src/components/views/explore/index.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import React from 'react';
import { View } from 'react-native';

import { Background } from '../../widgets/background';
import { LogoText, FlixText, FlexText, ExploreText } from './styles';
import { LogoText, FlixText, FlexText, ExploreText, Footer } from './styles';
import { JoinLoginButton } from './join-login-button';

interface ExploreViewProps {}

export const ExploreView: React.FC<ExploreViewProps> = () => {
export const ExploreView: React.FC<ExploreViewProps> = ({ children }) => {
return (
<Background>
<LogoText>
<FlixText>Flix</FlixText>
<FlixText>Flix </FlixText>
<FlexText>Flex</FlexText>
</LogoText>
<ExploreText>Easy Explore</ExploreText>

{children}
<Footer>
<JoinLoginButton />
</Footer>
</Background>
);
};
30 changes: 30 additions & 0 deletions mobile/src/components/views/explore/join-login-button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { Entypo, Ionicons } from '@expo/vector-icons';

import JoinButton from '../../../images/svg/join-button';
import { Join, JContainer, ExploreInfoText, JText, JBtn } from './styles';
import { Button } from '../../widgets/Button';

interface JoinLoginButtonProps {
show?: boolean;
}

export const JoinLoginButton: React.FC<JoinLoginButtonProps> = ({ show }) => {
return (
<Join>
<Button>
<JoinButton />
</Button>
<JContainer>
<Entypo name="info-with-circle" size={24} color="black" />
<ExploreInfoText>
To explore more click Join to sign in or sign up
</ExploreInfoText>
<JBtn>
<Ionicons name="ios-enter-outline" size={24} color="white" />
<JText>Join</JText>
</JBtn>
</JContainer>
</Join>
);
};
62 changes: 62 additions & 0 deletions mobile/src/components/views/explore/movies-page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react';
import { Dimensions, View, ScrollView } from 'react-native';
import Carousel from 'react-native-snap-carousel';

import { Container, ExploreInfoText, HeaderTitle } from './styles';
import { MovieCard, MoviceCardProps } from '../../widgets/movie-card';
import { VerticalMovieCard } from '../../widgets/movie-card/vertical-card';
import { wp, hp } from '../../../utils/normalize';

export const SCREEN_WIDTH = Dimensions.get('window').width;
export const SCREEN_HEIGHT = Number(hp(250));
export const CAROUSEL_ITEM_WIDTH = Number(wp(305));

interface NowPlayingProps {
data: {
image: any;
trailerLink?: string;
title: string;
time: string;
genre: string;
year: number;
id: number;
info: string;
}[];
description: string;
type: 'Upcoming Movies' | 'Coming Soon Movies';
}

export const ExploreMoviesView: React.FC<NowPlayingProps> = ({
data,
description,
type,
}) => {
return (
<ScrollView>
<Container>
<ExploreInfoText>{description}</ExploreInfoText>
<View style={{ flex: 0, marginVertical: Number(hp(30)) }}>
<Carousel
layout="default"
data={data}
firstItem={Math.floor(data.length / 2)}
useScrollView
renderItem={({ item }: { item: MoviceCardProps }) => (
<MovieCard comingSoon={type === 'Coming Soon Movies'} {...item} />
)}
sliderWidth={SCREEN_WIDTH}
itemWidth={CAROUSEL_ITEM_WIDTH}
sliderHeight={SCREEN_HEIGHT}
itemHeight={SCREEN_HEIGHT}
contentContainerCustomStyle={{ flex: 0 }}
slideStyle={{ flex: 0 }}
/>
</View>
<HeaderTitle>{type}</HeaderTitle>
{data.map(item => (
<VerticalMovieCard key={item.id} {...item} />
))}
</Container>
</ScrollView>
);
};
109 changes: 109 additions & 0 deletions mobile/src/components/views/explore/near-theater.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import React from 'react';
import { ScrollView } from 'react-native';
import { Entypo } from '@expo/vector-icons';
import { Rating } from 'react-native-ratings';

import {
Container,
ExploreInfoText,
LContainer,
LAllowButton,
LInfoText,
CheckIcon,
LHeader,
LHeaderText,
TheaterContainer,
ImageView,
TheaterDetails,
TheaterTitle,
TheaterInfo,
TheaterInfoText,
} from './styles';

interface TheaterProps {
image: any;
title: string;
info: string;
stars: number;
id: number;
}

interface NearTheaterProps {
location?: string;
data: TheaterProps[];
handleLocation(): void;
}

interface LocationAccesRequestProps {
handleLocation(): void;
}

export const LocationAccesRequest: React.FC<LocationAccesRequestProps> = ({
handleLocation,
}) => {
return (
<LContainer>
<LHeader>
<Entypo name="location-pin" size={24} color="#ff2435" />
<LHeaderText>LOCATION</LHeaderText>
</LHeader>
<LInfoText>
Please, Enable location access , so we could provide you accurate result
of nearest show and theaters
</LInfoText>
<LAllowButton onPress={() => handleLocation()}>
<CheckIcon source={require('../../../../assets/check-green.png')} />
<LInfoText style={{ marginLeft: 12 }}>Allow</LInfoText>
</LAllowButton>
</LContainer>
);
};

export const MovieTheater: React.FC<TheaterProps> = ({
image,
title,
info,
stars,
}) => {
return (
<TheaterContainer>
<ImageView source={image} />
<TheaterDetails>
<TheaterTitle bold numberOfLines={1}>
{title}
</TheaterTitle>
<TheaterInfo>
<Rating
startingValue={stars}
readonly
tintColor="#000"
imageSize={30}
/>
<Entypo name="chevron-right" size={50} color="#fff" />
</TheaterInfo>
<TheaterInfoText numberOfLines={2}>{info}</TheaterInfoText>
</TheaterDetails>
</TheaterContainer>
);
};

export const NearTheater: React.FC<NearTheaterProps> = ({
location,
data,
handleLocation,
}) => {
return (
<ScrollView>
<Container>
<ExploreInfoText>
What is happening around you, Theaters that are open now playing .
</ExploreInfoText>
{location ? (
data?.map((item) => <MovieTheater key={item.id} {...item} />)
) : (
<LocationAccesRequest handleLocation={handleLocation} />
)}
</Container>
</ScrollView>
);
};
12 changes: 0 additions & 12 deletions mobile/src/components/views/explore/now-playing.tsx

This file was deleted.

0 comments on commit 0fd266f

Please sign in to comment.