Skip to content

Commit 9cd6424

Browse files
tpuccitpucci
committed
✨ (FadeDown) add transition
1 parent 2a50831 commit 9cd6424

File tree

15 files changed

+375
-86
lines changed

15 files changed

+375
-86
lines changed

‎example/src/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {Home} from './canals/home/Home';
55
import {Player} from './canals/player/Player';
66
import {observer} from 'mobx-react';
77
import {PlayerModule} from './module/PlayerModule';
8+
import {Search} from './canals/search/Search';
89

910
const styles = StyleSheet.create({
1011
appContainer: {
@@ -26,6 +27,7 @@ export const App = observer(() => (
2627
Component={Player}
2728
visible={PlayerModule.isMoviePlaying}
2829
/>
30+
<Search />
2931
</Canal>
3032
</FullScreenPortal>
3133
));

‎example/src/atoms/Header.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ export const Header = (props: {
77
onPress: () => unknown;
88
title: string;
99
subtitle: string;
10+
imageUri: string;
1011
}) => (
1112
<View style={{height: 250, paddingBottom: 10}}>
1213
<Image
1314
style={StyleSheet.absoluteFill}
1415
source={{
15-
uri: 'https://unsplash.it/400/400?image=1',
16+
uri: props.imageUri,
1617
priority: Image.priority.normal,
1718
}}
1819
resizeMode={Image.resizeMode.cover}

‎example/src/atoms/MovieCard.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import LinearGradient from 'react-native-linear-gradient';
55
import Icon from 'react-native-vector-icons/FontAwesome5';
66
import {PlayerModule} from '../module/PlayerModule';
77

8-
export const MovieCard = () => (
8+
export const MovieCard = (props: {
9+
imageUri: string;
10+
episode: string;
11+
progress: number;
12+
}) => (
913
<View
1014
style={{
1115
backgroundColor: '#111111',
@@ -32,9 +36,7 @@ export const MovieCard = () => (
3236
<Image
3337
style={StyleSheet.absoluteFill}
3438
source={{
35-
uri: `https://unsplash.it/100/150?image=${Math.floor(
36-
Math.random() * 15,
37-
)}`,
39+
uri: props.imageUri,
3840
priority: Image.priority.normal,
3941
}}
4042
resizeMode={Image.resizeMode.cover}
@@ -53,14 +55,14 @@ export const MovieCard = () => (
5355
marginLeft: 10,
5456
paddingVertical: 10,
5557
}}>
56-
S1:E14
58+
{props.episode}
5759
</Text>
5860
<View style={{backgroundColor: '#444444', height: 4}}>
5961
<View
6062
style={{
6163
flex: 1,
6264
backgroundColor: '#e30612',
63-
width: `${Math.random() * 100}%`,
65+
width: `${props.progress * 100}%`,
6466
}}
6567
/>
6668
</View>

‎example/src/atoms/TabBar.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const TabBarItem = (props: TabBarItemProps) => {
1818
alignItems: 'center',
1919
paddingVertical: 8,
2020
justifyContent: 'center',
21+
width: 80,
2122
}}>
2223
<Icon name={props.iconName} size={12} color={color} />
2324
<Text

‎example/src/canals/home/Home.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {TabBar} from '../../atoms/TabBar';
66

77
import {HomeScreen} from './screens/HomeScreen';
88
import {DownloadScreen} from './screens/DownloadScreen';
9+
import {SearchModule} from '../../module/SearchModule';
910

1011
export const Home = () => {
1112
const [navigationScreen, setNavigationState] = useState('Home');
@@ -40,7 +41,7 @@ export const Home = () => {
4041
iconName: 'magnifier',
4142
title: 'Rechercher',
4243
selected: false,
43-
onPress: () => {},
44+
onPress: SearchModule.search,
4445
},
4546
{
4647
iconName: 'arrow-down-circle',

‎example/src/canals/home/screens/DownloadScreen.tsx

Lines changed: 54 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,65 @@ import React from 'react';
22
import {View, FlatList, Text} from 'react-native';
33
import {Header} from '../../../atoms/Header';
44
import {MovieCard} from '../../../atoms/MovieCard';
5+
import {MoviesModule} from '../../../module/MoviesModule';
56

67
const data = [
78
{
89
title: 'Séries téléchargées',
9-
data: ['Pizza', 'Burger', 'Risotto'],
10+
dataFilter: movie => movie.downloaded,
1011
},
1112
];
1213

13-
export const DownloadScreen = () => (
14-
<View>
15-
<FlatList
16-
contentContainerStyle={{paddingBottom: 60}}
17-
ListHeaderComponent={
18-
<Header
19-
onPress={() => {}}
20-
title="Brooklyn nine nine"
21-
subtitle="10 épisodes téléchargés"
22-
/>
23-
}
24-
data={data}
25-
keyExtractor={item => item.title}
26-
renderItem={({item}) => (
27-
<>
28-
<Text
29-
style={{
30-
fontSize: 12,
31-
color: '#FFFFFF',
32-
fontWeight: '500',
33-
marginLeft: 15,
34-
}}>
35-
{item.title}
36-
</Text>
37-
<FlatList
38-
keyExtractor={item => item}
39-
data={item.data}
40-
style={{marginTop: 10, marginBottom: 5}}
41-
contentContainerStyle={{paddingHorizontal: 10, paddingBottom: 10}}
42-
horizontal
43-
renderItem={({item}) => <MovieCard />}
14+
export const DownloadScreen = () => {
15+
const headerMovie = MoviesModule.movies.filter(movie => movie.downloaded)[0];
16+
return (
17+
<View>
18+
<FlatList
19+
contentContainerStyle={{paddingBottom: 60}}
20+
ListHeaderComponent={
21+
<Header
22+
onPress={() => {}}
23+
title={headerMovie.title}
24+
subtitle="10 épisodes téléchargés"
25+
imageUri={headerMovie.imageUri}
4426
/>
45-
</>
46-
)}
47-
/>
48-
</View>
49-
);
27+
}
28+
data={data}
29+
keyExtractor={item => item.title}
30+
renderItem={({item}) => {
31+
const sectionMovies = MoviesModule.movies.filter(item.dataFilter);
32+
return (
33+
<>
34+
<Text
35+
style={{
36+
fontSize: 12,
37+
color: '#FFFFFF',
38+
fontWeight: '500',
39+
marginLeft: 15,
40+
}}>
41+
{item.title}
42+
</Text>
43+
<FlatList
44+
keyExtractor={item => item.imageUri}
45+
data={sectionMovies}
46+
style={{marginTop: 10, marginBottom: 5}}
47+
contentContainerStyle={{
48+
paddingHorizontal: 10,
49+
paddingBottom: 10,
50+
}}
51+
horizontal
52+
renderItem={({item}) => (
53+
<MovieCard
54+
imageUri={item.imageUri}
55+
episode={item.episode}
56+
progress={item.progress}
57+
/>
58+
)}
59+
/>
60+
</>
61+
);
62+
}}
63+
/>
64+
</View>
65+
);
66+
};

‎example/src/canals/home/screens/HomeScreen.tsx

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,75 @@ import React from 'react';
22
import {View, FlatList, Text} from 'react-native';
33
import {Header} from '../../../atoms/Header';
44
import {MovieCard} from '../../../atoms/MovieCard';
5+
import {MoviesModule} from '../../../module/MoviesModule';
56

67
const data = [
78
{
89
title: 'Reprendre avec le profil de Thomas',
9-
data: ['Pizza', 'Burger', 'Risotto'],
10+
dataFilter: movie => movie.progress > 0,
1011
},
1112
{
1213
title: 'Ma Liste',
13-
data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
14+
dataFilter: movie => movie.myList,
1415
},
1516
{
1617
title: 'Téléchargements',
17-
data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
18+
dataFilter: movie => movie.downloaded,
1819
},
1920
];
2021

21-
export const HomeScreen = () => (
22-
<View>
23-
<FlatList
24-
contentContainerStyle={{paddingBottom: 60}}
25-
ListHeaderComponent={
26-
<Header
27-
onPress={() => {}}
28-
title="The Good Place"
29-
subtitle="Nouveaux épisodes disponibles"
30-
/>
31-
}
32-
data={data}
33-
keyExtractor={item => item.title}
34-
renderItem={({item}) => (
35-
<>
36-
<Text
37-
style={{
38-
fontSize: 12,
39-
color: '#FFFFFF',
40-
fontWeight: '500',
41-
marginLeft: 15,
42-
}}>
43-
{item.title}
44-
</Text>
45-
<FlatList
46-
keyExtractor={item => item}
47-
data={item.data}
48-
style={{marginTop: 10, marginBottom: 5}}
49-
contentContainerStyle={{paddingHorizontal: 10, paddingBottom: 10}}
50-
horizontal
51-
renderItem={({item}) => <MovieCard />}
22+
export const HomeScreen = () => {
23+
const headerMovie = MoviesModule.movies.filter(
24+
movie => !movie.downloaded && !movie.myList,
25+
)[0];
26+
return (
27+
<View>
28+
<FlatList
29+
contentContainerStyle={{paddingBottom: 60}}
30+
ListHeaderComponent={
31+
<Header
32+
onPress={() => {}}
33+
title={headerMovie.title}
34+
subtitle="Nouveaux épisodes disponibles"
35+
imageUri={headerMovie.imageUri}
5236
/>
53-
</>
54-
)}
55-
/>
56-
</View>
57-
);
37+
}
38+
data={data}
39+
keyExtractor={item => item.title}
40+
renderItem={({item}) => {
41+
const sectionMovies = MoviesModule.movies.filter(item.dataFilter);
42+
return (
43+
<>
44+
<Text
45+
style={{
46+
fontSize: 12,
47+
color: '#FFFFFF',
48+
fontWeight: '500',
49+
marginLeft: 15,
50+
}}>
51+
{item.title}
52+
</Text>
53+
<FlatList
54+
keyExtractor={item => item.imageUri}
55+
data={sectionMovies}
56+
style={{marginTop: 10, marginBottom: 5}}
57+
contentContainerStyle={{
58+
paddingHorizontal: 10,
59+
paddingBottom: 10,
60+
}}
61+
horizontal
62+
renderItem={({item}) => (
63+
<MovieCard
64+
imageUri={item.imageUri}
65+
episode={item.episode}
66+
progress={item.progress}
67+
/>
68+
)}
69+
/>
70+
</>
71+
);
72+
}}
73+
/>
74+
</View>
75+
);
76+
};

‎example/src/canals/player/transitions/PlayerTransitioner.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ export class PlayerTransitioner extends transition.TransitionComponent {
132132
<View
133133
style={{
134134
height: 60,
135-
backgroundColor: '#000000',
136135
justifyContent: 'center',
137136
}}>
138137
<Animated.View
@@ -149,7 +148,13 @@ export class PlayerTransitioner extends transition.TransitionComponent {
149148
</TouchableOpacity>
150149
</Animated.View>
151150
</View>
152-
{!this.state.hidden && Children.only(this.props.children)}
151+
<Animated.View
152+
style={{
153+
flex: 1,
154+
opacity: sub(1, this.trans),
155+
}}>
156+
{!this.state.hidden && Children.only(this.props.children)}
157+
</Animated.View>
153158
</Animated.View>
154159
</Animated.View>
155160
);

‎example/src/canals/search/Search.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import {Canal, Screen, transition} from 'react-nonav';
3+
import {observer} from 'mobx-react';
4+
import {SearchScreen} from './screens/SearchScreen';
5+
import {SearchModule} from '../../module/SearchModule';
6+
7+
export const Search = observer(() => {
8+
return (
9+
<Canal>
10+
<Screen
11+
isFullScreen
12+
name="Search"
13+
visible={SearchModule.isSearching}
14+
Component={SearchScreen}
15+
Transitioner={transition.FadeDown}
16+
/>
17+
</Canal>
18+
);
19+
});

‎example/src/canals/search/screens/SearchScreen.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import {View, SafeAreaView, TouchableOpacity, TextInput} from 'react-native';
3+
import Icon from 'react-native-vector-icons/SimpleLineIcons';
4+
import {SearchModule} from '../../../module/SearchModule';
5+
6+
export const SearchScreen = () => (
7+
<View style={{backgroundColor: '#000000', flex: 1}}>
8+
<SafeAreaView>
9+
<View
10+
style={{
11+
flexDirection: 'row',
12+
alignItems: 'center',
13+
marginTop: 10,
14+
}}>
15+
<TouchableOpacity onPress={SearchModule.cancel} style={{margin: 10}}>
16+
<Icon name="close" size={30} color="#FFFFFF" />
17+
</TouchableOpacity>
18+
<TextInput
19+
style={{
20+
flex: 1,
21+
backgroundColor: '#222222',
22+
paddingVertical: 10,
23+
paddingHorizontal: 20,
24+
marginRight: 10,
25+
borderRadius: 15,
26+
color: '#FFFFFF',
27+
}}
28+
placeholder="Rechercher"
29+
placeholderTextColor="#CCCCCC"
30+
autoFocus
31+
/>
32+
</View>
33+
</SafeAreaView>
34+
</View>
35+
);

0 commit comments

Comments
 (0)