✨ (FadeDown) add transition

Author: tpucci

example/src/App.tsx

@@ -5,6 +5,7 @@ import {Home} from './canals/home/Home';
 import {Player} from './canals/player/Player';
 import {observer} from 'mobx-react';
 import {PlayerModule} from './module/PlayerModule';
+import {Search} from './canals/search/Search';
 
 const styles = StyleSheet.create({
   appContainer: {
@@ -26,6 +27,7 @@ export const App = observer(() => (
         Component={Player}
         visible={PlayerModule.isMoviePlaying}
       />
+      <Search />
     </Canal>
   </FullScreenPortal>
 ));

example/src/atoms/Header.tsx

@@ -7,12 +7,13 @@ export const Header = (props: {
   onPress: () => unknown;
   title: string;
   subtitle: string;
+  imageUri: string;
 }) => (
   <View style={{height: 250, paddingBottom: 10}}>
     <Image
       style={StyleSheet.absoluteFill}
       source={{
-        uri: 'https://unsplash.it/400/400?image=1',
+        uri: props.imageUri,
         priority: Image.priority.normal,
       }}
       resizeMode={Image.resizeMode.cover}

example/src/atoms/MovieCard.tsx

@@ -5,7 +5,11 @@ import LinearGradient from 'react-native-linear-gradient';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import {PlayerModule} from '../module/PlayerModule';
 
-export const MovieCard = () => (
+export const MovieCard = (props: {
+  imageUri: string;
+  episode: string;
+  progress: number;
+}) => (
   <View
     style={{
       backgroundColor: '#111111',
@@ -32,9 +36,7 @@ export const MovieCard = () => (
       <Image
         style={StyleSheet.absoluteFill}
         source={{
-          uri: `https://unsplash.it/100/150?image=${Math.floor(
-            Math.random() * 15,
-          )}`,
+          uri: props.imageUri,
           priority: Image.priority.normal,
         }}
         resizeMode={Image.resizeMode.cover}
@@ -53,14 +55,14 @@ export const MovieCard = () => (
               marginLeft: 10,
               paddingVertical: 10,
             }}>
-            S1:E14
+            {props.episode}
           </Text>
           <View style={{backgroundColor: '#444444', height: 4}}>
             <View
               style={{
                 flex: 1,
                 backgroundColor: '#e30612',
-                width: `${Math.random() * 100}%`,
+                width: `${props.progress * 100}%`,
               }}
             />
           </View>

example/src/atoms/TabBar.tsx

@@ -18,6 +18,7 @@ const TabBarItem = (props: TabBarItemProps) => {
         alignItems: 'center',
         paddingVertical: 8,
         justifyContent: 'center',
+        width: 80,
       }}>
       <Icon name={props.iconName} size={12} color={color} />
       <Text

example/src/canals/home/Home.tsx

@@ -6,6 +6,7 @@ import {TabBar} from '../../atoms/TabBar';
 
 import {HomeScreen} from './screens/HomeScreen';
 import {DownloadScreen} from './screens/DownloadScreen';
+import {SearchModule} from '../../module/SearchModule';
 
 export const Home = () => {
   const [navigationScreen, setNavigationState] = useState('Home');
@@ -40,7 +41,7 @@ export const Home = () => {
             iconName: 'magnifier',
             title: 'Rechercher',
             selected: false,
-            onPress: () => {},
+            onPress: SearchModule.search,
           },
           {
             iconName: 'arrow-down-circle',

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

@@ -2,48 +2,65 @@ import React from 'react';
 import {View, FlatList, Text} from 'react-native';
 import {Header} from '../../../atoms/Header';
 import {MovieCard} from '../../../atoms/MovieCard';
+import {MoviesModule} from '../../../module/MoviesModule';
 
 const data = [
   {
     title: 'Séries téléchargées',
-    data: ['Pizza', 'Burger', 'Risotto'],
+    dataFilter: movie => movie.downloaded,
   },
 ];
 
-export const DownloadScreen = () => (
-  <View>
-    <FlatList
-      contentContainerStyle={{paddingBottom: 60}}
-      ListHeaderComponent={
-        <Header
-          onPress={() => {}}
-          title="Brooklyn nine nine"
-          subtitle="10 épisodes téléchargés"
-        />
-      }
-      data={data}
-      keyExtractor={item => item.title}
-      renderItem={({item}) => (
-        <>
-          <Text
-            style={{
-              fontSize: 12,
-              color: '#FFFFFF',
-              fontWeight: '500',
-              marginLeft: 15,
-            }}>
-            {item.title}
-          </Text>
-          <FlatList
-            keyExtractor={item => item}
-            data={item.data}
-            style={{marginTop: 10, marginBottom: 5}}
-            contentContainerStyle={{paddingHorizontal: 10, paddingBottom: 10}}
-            horizontal
-            renderItem={({item}) => <MovieCard />}
+export const DownloadScreen = () => {
+  const headerMovie = MoviesModule.movies.filter(movie => movie.downloaded)[0];
+  return (
+    <View>
+      <FlatList
+        contentContainerStyle={{paddingBottom: 60}}
+        ListHeaderComponent={
+          <Header
+            onPress={() => {}}
+            title={headerMovie.title}
+            subtitle="10 épisodes téléchargés"
+            imageUri={headerMovie.imageUri}
           />
-        </>
-      )}
-    />
-  </View>
-);
+        }
+        data={data}
+        keyExtractor={item => item.title}
+        renderItem={({item}) => {
+          const sectionMovies = MoviesModule.movies.filter(item.dataFilter);
+          return (
+            <>
+              <Text
+                style={{
+                  fontSize: 12,
+                  color: '#FFFFFF',
+                  fontWeight: '500',
+                  marginLeft: 15,
+                }}>
+                {item.title}
+              </Text>
+              <FlatList
+                keyExtractor={item => item.imageUri}
+                data={sectionMovies}
+                style={{marginTop: 10, marginBottom: 5}}
+                contentContainerStyle={{
+                  paddingHorizontal: 10,
+                  paddingBottom: 10,
+                }}
+                horizontal
+                renderItem={({item}) => (
+                  <MovieCard
+                    imageUri={item.imageUri}
+                    episode={item.episode}
+                    progress={item.progress}
+                  />
+                )}
+              />
+            </>
+          );
+        }}
+      />
+    </View>
+  );
+};

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

@@ -2,56 +2,75 @@ import React from 'react';
 import {View, FlatList, Text} from 'react-native';
 import {Header} from '../../../atoms/Header';
 import {MovieCard} from '../../../atoms/MovieCard';
+import {MoviesModule} from '../../../module/MoviesModule';
 
 const data = [
   {
     title: 'Reprendre avec le profil de Thomas',
-    data: ['Pizza', 'Burger', 'Risotto'],
+    dataFilter: movie => movie.progress > 0,
   },
   {
     title: 'Ma Liste',
-    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+    dataFilter: movie => movie.myList,
   },
   {
     title: 'Téléchargements',
-    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+    dataFilter: movie => movie.downloaded,
   },
 ];
 
-export const HomeScreen = () => (
-  <View>
-    <FlatList
-      contentContainerStyle={{paddingBottom: 60}}
-      ListHeaderComponent={
-        <Header
-          onPress={() => {}}
-          title="The Good Place"
-          subtitle="Nouveaux épisodes disponibles"
-        />
-      }
-      data={data}
-      keyExtractor={item => item.title}
-      renderItem={({item}) => (
-        <>
-          <Text
-            style={{
-              fontSize: 12,
-              color: '#FFFFFF',
-              fontWeight: '500',
-              marginLeft: 15,
-            }}>
-            {item.title}
-          </Text>
-          <FlatList
-            keyExtractor={item => item}
-            data={item.data}
-            style={{marginTop: 10, marginBottom: 5}}
-            contentContainerStyle={{paddingHorizontal: 10, paddingBottom: 10}}
-            horizontal
-            renderItem={({item}) => <MovieCard />}
+export const HomeScreen = () => {
+  const headerMovie = MoviesModule.movies.filter(
+    movie => !movie.downloaded && !movie.myList,
+  )[0];
+  return (
+    <View>
+      <FlatList
+        contentContainerStyle={{paddingBottom: 60}}
+        ListHeaderComponent={
+          <Header
+            onPress={() => {}}
+            title={headerMovie.title}
+            subtitle="Nouveaux épisodes disponibles"
+            imageUri={headerMovie.imageUri}
           />
-        </>
-      )}
-    />
-  </View>
-);
+        }
+        data={data}
+        keyExtractor={item => item.title}
+        renderItem={({item}) => {
+          const sectionMovies = MoviesModule.movies.filter(item.dataFilter);
+          return (
+            <>
+              <Text
+                style={{
+                  fontSize: 12,
+                  color: '#FFFFFF',
+                  fontWeight: '500',
+                  marginLeft: 15,
+                }}>
+                {item.title}
+              </Text>
+              <FlatList
+                keyExtractor={item => item.imageUri}
+                data={sectionMovies}
+                style={{marginTop: 10, marginBottom: 5}}
+                contentContainerStyle={{
+                  paddingHorizontal: 10,
+                  paddingBottom: 10,
+                }}
+                horizontal
+                renderItem={({item}) => (
+                  <MovieCard
+                    imageUri={item.imageUri}
+                    episode={item.episode}
+                    progress={item.progress}
+                  />
+                )}
+              />
+            </>
+          );
+        }}
+      />
+    </View>
+  );
+};

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

@@ -132,7 +132,6 @@ export class PlayerTransitioner extends transition.TransitionComponent {
           <View
             style={{
               height: 60,
-              backgroundColor: '#000000',
               justifyContent: 'center',
             }}>
             <Animated.View
@@ -149,7 +148,13 @@ export class PlayerTransitioner extends transition.TransitionComponent {
               </TouchableOpacity>
             </Animated.View>
           </View>
-          {!this.state.hidden && Children.only(this.props.children)}
+          <Animated.View
+            style={{
+              flex: 1,
+              opacity: sub(1, this.trans),
+            }}>
+            {!this.state.hidden && Children.only(this.props.children)}
+          </Animated.View>
         </Animated.View>
       </Animated.View>
     );

example/src/canals/search/Search.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Canal, Screen, transition} from 'react-nonav';
+import {observer} from 'mobx-react';
+import {SearchScreen} from './screens/SearchScreen';
+import {SearchModule} from '../../module/SearchModule';
+
+export const Search = observer(() => {
+  return (
+    <Canal>
+      <Screen
+        isFullScreen
+        name="Search"
+        visible={SearchModule.isSearching}
+        Component={SearchScreen}
+        Transitioner={transition.FadeDown}
+      />
+    </Canal>
+  );
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import {View, SafeAreaView, TouchableOpacity, TextInput} from 'react-native';
+import Icon from 'react-native-vector-icons/SimpleLineIcons';
+import {SearchModule} from '../../../module/SearchModule';
+
+export const SearchScreen = () => (
+  <View style={{backgroundColor: '#000000', flex: 1}}>
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginTop: 10,
+        }}>
+        <TouchableOpacity onPress={SearchModule.cancel} style={{margin: 10}}>
+          <Icon name="close" size={30} color="#FFFFFF" />
+        </TouchableOpacity>
+        <TextInput
+          style={{
+            flex: 1,
+            backgroundColor: '#222222',
+            paddingVertical: 10,
+            paddingHorizontal: 20,
+            marginRight: 10,
+            borderRadius: 15,
+            color: '#FFFFFF',
+          }}
+          placeholder="Rechercher"
+          placeholderTextColor="#CCCCCC"
+          autoFocus
+        />
+      </View>
+    </SafeAreaView>
+  </View>
+);