Skip to content

Commit 828f5f7

Browse files
andresmichelandresmichel
committed
search screen and fixes
1 parent 473b9e7 commit 828f5f7

24 files changed

+385
-163
lines changed

‎App.js

+7-10
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,13 @@ export default function App(props) {
3636
});
3737

3838
const images = [
39-
require('./assets/images/covers/12-angry-men.jpg'),
40-
require('./assets/images/covers/pulp-fiction.jpg'),
41-
require('./assets/images/covers/schindlers-list.jpg'),
42-
require('./assets/images/covers/the-dark-knight.jpg'),
43-
require('./assets/images/covers/the-fellowship-of-the-ring.jpg'),
44-
require('./assets/images/covers/the-god-father-part-ii.jpg'),
45-
require('./assets/images/covers/the-godfather.jpg'),
46-
require('./assets/images/covers/the-good-the-bad-the-ugly.jpg'),
47-
require('./assets/images/covers/the-return-of-the-king.jpg'),
48-
require('./assets/images/covers/the-shawshank-redemption.jpg'),
39+
require('./assets/images/logo.png'),
40+
require('./assets/images/avatars/avatar-1.png'),
41+
require('./assets/images/avatars/avatar-1.png'),
42+
require('./assets/images/avatars/avatar-2.png'),
43+
require('./assets/images/avatars/avatar-3.png'),
44+
require('./assets/images/avatars/avatar-4.png'),
45+
require('./assets/images/avatars/avatar-5.png'),
4946
];
5047

5148
images.map(image => {

‎assets/images/covers/12-angry-men.jpg

-106 KB
Binary file not shown.

‎assets/images/covers/pulp-fiction.jpg

-189 KB
Binary file not shown.

‎assets/images/covers/schindlers-list.jpg

-181 KB
Binary file not shown.

‎assets/images/covers/the-dark-knight.jpg

-127 KB
Binary file not shown.

‎assets/images/covers/the-fellowship-of-the-ring.jpg

-194 KB
Binary file not shown.

‎assets/images/covers/the-god-father-part-ii.jpg

-50.7 KB
Binary file not shown.

‎assets/images/covers/the-godfather.jpg

-81.2 KB
Binary file not shown.

‎assets/images/covers/the-good-the-bad-the-ugly.jpg

-154 KB
Binary file not shown.

‎assets/images/covers/the-return-of-the-king.jpg

-163 KB
Binary file not shown.

‎assets/images/covers/the-shawshank-redemption.jpg

-984 KB
Binary file not shown.

‎components/ComingSoonItem.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { useSpring, animated } from 'react-spring';
3-
import { View, Image, Text, FlatList, StyleSheet } from 'react-native';
3+
import { View, Image, Text, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
44
import * as Icon from './Icon';
55

66
const AnimatedView = animated(View);
@@ -10,7 +10,7 @@ function CategorySeparator() {
1010
}
1111

1212
export default function ComingSoonItem(props) {
13-
const overlayStyle = useSpring({ opacity: props.disabled ? 1 : 0, from: { opacity: 1 } })
13+
const overlayStyle = useSpring({ opacity: props.disabled ? 1 : 0, from: { opacity: 1 } });
1414
return (
1515
<View style={styles.container}>
1616
<View style={styles.imageWrapper}>
@@ -24,31 +24,31 @@ export default function ComingSoonItem(props) {
2424
<Text numberOfLines={2} style={styles.logoLabel}>{props.title}</Text>
2525
</View>
2626
<View style={styles.buttonContainer}>
27-
<View style={styles.button}>
27+
<TouchableOpacity style={styles.button}>
2828
<Icon.Plus />
29-
<Text style={styles.buttonLabel}>Mi lista</Text>
30-
</View>
31-
<View style={styles.button}>
29+
<Text style={styles.buttonLabel}>My List</Text>
30+
</TouchableOpacity>
31+
<TouchableOpacity style={styles.button}>
3232
<Icon.Share />
33-
<Text style={styles.buttonLabel}>Compartir</Text>
34-
</View>
33+
<Text style={styles.buttonLabel}>Share</Text>
34+
</TouchableOpacity>
3535
</View>
3636
</View>
37-
<Text style={styles.label}>Estreno el miercoles</Text>
37+
<Text style={styles.label}>Coming Wednesday</Text>
3838
<Text style={styles.title}>{props.title}</Text>
3939
<Text style={styles.overview} numberOfLines={3}>{props.overview}</Text>
4040
<FlatList
4141
ItemSeparatorComponent={CategorySeparator}
4242
scrollEnabled={false}
4343
horizontal
44-
data={['Magico', 'Pelicula de anime', 'Anime de fantasia', 'Infantil y familiar']}
44+
data={['Magical', 'Anime Feature', 'Fantasy Anime', 'Children & Family']}
4545
renderItem={({ item }) => <Text style={styles.category}>{item}</Text>}
4646
keyExtractor={item => item}
4747
/>
4848
</View>
4949
<AnimatedView
5050
style={[styles.overlay, overlayStyle]}
51-
pointerEvents={props.disabled ? 'none' : 'auto'} />
51+
pointerEvents={props.disabled ? 'auto' : 'none'} />
5252
</View>
5353
);
5454
}

‎components/Icon.js

+12
Original file line numberDiff line numberDiff line change
@@ -183,4 +183,16 @@ export function Edit(props) {
183183
/>
184184
</Svg>
185185
);
186+
}
187+
188+
export function SearchMini(props) {
189+
return (
190+
<Svg width={24} height={24} viewBox="0 0 24 24" {...props}>
191+
<Path
192+
d="M11.594 5c3.641 0 6.593 2.983 6.593 6.664a6.682 6.682 0 01-1.123 3.72L20 18.352 18.368 20l-2.908-2.938a6.518 6.518 0 01-3.866 1.265C7.952 18.327 5 15.344 5 11.664S7.952 5 11.594 5zm0 2.332c-2.367 0-4.286 1.94-4.286 4.332s1.919 4.33 4.286 4.33c2.367 0 4.286-1.938 4.286-4.33 0-2.393-1.92-4.332-4.286-4.332z"
193+
fill="#7F7F7F"
194+
fillRule="evenodd"
195+
/>
196+
</Svg>
197+
);
186198
}

‎components/Header.js ‎components/Menu.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
import * as React from 'react';
2-
import { Image, View, Text, StyleSheet } from 'react-native';
2+
import { Image, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
33
import logo from '../assets/images/logo.png';
44

5-
function Header(props) {
5+
function Menu(props) {
66
return (
77
<View style={styles.container}>
88
<Image style={styles.logo} source={logo} />
9-
<Text style={styles.item}>Programas</Text>
10-
<Text style={styles.item}>Películas</Text>
11-
<Text style={styles.item}>Mi lista</Text>
9+
<TouchableOpacity>
10+
<Text style={styles.item}>Series</Text>
11+
</TouchableOpacity>
12+
<TouchableOpacity>
13+
<Text style={styles.item}>Movies</Text>
14+
</TouchableOpacity>
15+
<TouchableOpacity>
16+
<Text style={styles.item}>My List</Text>
17+
</TouchableOpacity>
1218
</View>
1319
);
1420
}
1521

1622
const styles = StyleSheet.create({
1723
container: {
18-
position: 'absolute',
19-
top: 0,
20-
width: '100%',
2124
paddingTop: 44,
2225
paddingLeft: 10,
2326
height: 88,
@@ -36,4 +39,4 @@ const styles = StyleSheet.create({
3639
},
3740
});
3841

39-
export default Header;
42+
export default Menu;

‎components/MovieItem.js

-22
This file was deleted.

‎components/MovieList.js

+4-17
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,27 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React from 'react';
22
import { View, Text, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
33
import { useNavigation } from '@react-navigation/native';
4-
import MovieItem from './MovieItem';
4+
import Poster from './Poster';
55

66
function Separator() {
77
return <View style={{ marginRight: 8 }} />;
88
}
99

1010
export default function MovieList(props) {
11-
const [data, setData] = useState([]);
1211
const navigation = useNavigation();
13-
const request = async () => {
14-
try {
15-
const response = await fetch(`https://api.themoviedb.org/3/discover/movie?api_key=a3907dd1f83c801545fea1ba56fc4d81&page=${props.page}`);
16-
const data = await response.json();
17-
setData(data.results);
18-
} catch (error) {
19-
//
20-
}
21-
}
22-
useEffect(() => {
23-
request();
24-
}, []);
2512
return (
2613
<View style={styles.container}>
2714
<Text style={styles.title}>{props.title}</Text>
2815
<FlatList
2916
contentContainerStyle={styles.listContainer}
3017
horizontal
31-
data={data}
18+
data={props.data}
3219
ItemSeparatorComponent={Separator}
3320
showsHorizontalScrollIndicator={false}
3421
keyExtractor={(_, index) => String(index)}
3522
renderItem={({ item, index }) => (
3623
<TouchableOpacity onPress={() => navigation.navigate('Details', { id: item.id })}>
37-
<MovieItem key={index} {...item} />
24+
<Poster path={item.poster_path} />
3825
</TouchableOpacity>
3926
)}
4027
/>

‎components/Poster.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { View, Image, StyleSheet } from 'react-native';
3+
4+
export default function Poster(props) {
5+
const { style, ...posterProps } = props;
6+
return (
7+
<View {...posterProps} style={[styles.container, style]}>
8+
<Image
9+
style={{ height: props.style.height, width: props.style.width }}
10+
source={{ uri: `http://image.tmdb.org/t/p/w500/${props.path}` }} />
11+
</View>
12+
);
13+
}
14+
15+
Poster.defaultProps = {
16+
style: {
17+
height: 158,
18+
width: 110,
19+
},
20+
};
21+
22+
const styles = StyleSheet.create({
23+
container: {
24+
backgroundColor: 'rgba(255,255,255,0.1)',
25+
},
26+
});

‎navigation/BottomTabNavigator.js

+20-21
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,29 @@ const Stack = createStackNavigator();
1616

1717
function HomeStack(props) {
1818
return (
19-
<Stack.Navigator headerMode={'none'} mode={'modal'}>
19+
<Stack.Navigator
20+
headerMode={'none'}
21+
mode={'modal'}
22+
screenOptions={{ gestureEnabled: false }}>
2023
<Stack.Screen name="Home" component={HomeScreen} />
2124
<Stack.Screen name="Details" component={DetailsScreen} />
22-
</Stack.Navigator >
25+
</Stack.Navigator>
2326
);
2427
}
2528

26-
export default function BottomTabNavigator({ navigation, route }) {
27-
// Set the header title on the parent stack navigator depending on the
28-
// currently active tab. Learn more in the documentation:
29-
// https://reactnavigation.org/docs/en/screen-options-resolution.html
30-
navigation.setOptions({ headerTitle: getHeaderTitle(route) });
29+
function SearchStack(props) {
30+
return (
31+
<Stack.Navigator
32+
headerMode={'none'}
33+
mode={'modal'}
34+
screenOptions={{ gestureEnabled: false }}>
35+
<Stack.Screen name="Search" component={SearchScreen} />
36+
<Stack.Screen name="Details" component={DetailsScreen} />
37+
</Stack.Navigator>
38+
);
39+
}
3140

41+
export default function BottomTabNavigator(props) {
3242
return (
3343
<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME} tabBarOptions={{
3444
activeTintColor: '#fff',
@@ -52,17 +62,17 @@ export default function BottomTabNavigator({ navigation, route }) {
5262
/>
5363
<BottomTab.Screen
5464
name="Search"
55-
component={SearchScreen}
65+
component={SearchStack}
5666
options={{
5767
title: 'Search',
5868
tabBarIcon: ({ focused }) => <Icon.Search focused={focused} />,
5969
}}
6070
/>
6171
<BottomTab.Screen
62-
name="Coming soon"
72+
name="Coming Soon"
6373
component={ComingSoonScreen}
6474
options={{
65-
title: 'Coming soon',
75+
title: 'Coming Soon',
6676
tabBarIcon: ({ focused }) => <Icon.CommingSoon focused={focused} />,
6777
}}
6878
/>
@@ -85,14 +95,3 @@ export default function BottomTabNavigator({ navigation, route }) {
8595
</BottomTab.Navigator>
8696
);
8797
}
88-
89-
function getHeaderTitle(route) {
90-
const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;
91-
92-
switch (routeName) {
93-
case 'Home':
94-
return 'How to get started';
95-
case 'Links':
96-
return 'Links to learn more';
97-
}
98-
}

‎screens/ComingSoonScreen.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React, { useState, useEffect } from 'react';
2-
import { View, Text, FlatList, StyleSheet } from 'react-native';
2+
import { View, Text, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
33
import ComingSoonItem from '../components/ComingSoonItem';
44
import * as Icon from '../components/Icon';
55

66
const ITEM_HEIGHT = 460;
77
const HEADER_HEIGHT = 70;
88
const CONTENT_OFFSET = 70;
99

10-
function OpenNotifications() {
10+
function NotificationButton() {
1111
return (
12-
<View style={styles.notificationItem}>
12+
<TouchableOpacity style={styles.notificationItem}>
1313
<Icon.Bell />
14-
<Text style={styles.notificationLabel}>Notificaciones</Text>
14+
<Text style={styles.notificationLabel}>Notifications</Text>
1515
<Icon.Chevron style={{ marginLeft: 'auto', marginRight: 3 }} />
16-
</View>
16+
</TouchableOpacity>
1717
);
1818
}
1919

@@ -42,7 +42,7 @@ export default function ComingSoonScreen(props) {
4242
}}
4343
data={data}
4444
contentContainerStyle={{ paddingTop: 44 }}
45-
ListHeaderComponent={OpenNotifications}
45+
ListHeaderComponent={NotificationButton}
4646
renderItem={({ item, index }) => <ComingSoonItem {...item} disabled={index !== activeItem} />}
4747
keyExtractor={movie => String(movie.id)}
4848
/>

0 commit comments

Comments
 (0)