Home screen with images and shadow and overlapping text

Author: mayurgrexit

App.js

@@ -7,47 +7,24 @@
  */
 
 import React, { Component } from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { mapping, light as lightTheme } from '@eva-design/eva';
 import { Provider } from 'react-redux';
+import { ApplicationProvider, Layout } from 'react-native-ui-kitten';
 import store from './src/store';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
+import HomeScreen from './src/HomeScreen';
 
 export default class App extends Component {
-  render() {
-    return (
-      <Provider store={store}>
-        <View style={styles.container}>
-          <Text style={styles.welcome}>Welcome to React Native!</Text>
-          <Text style={styles.instructions}>To get started, edit App.js</Text>
-          <Text style={styles.instructions}>{instructions}</Text>
-        </View>
-      </Provider>
-    );
-  }
+    render() {
+        return (
+            <Provider store={store}>
+                <ApplicationProvider
+                    mapping={mapping}
+                    theme={lightTheme}>
+                    <Layout style={{ flex: 1 }} >
+                        <HomeScreen />
+                    </Layout>
+                </ApplicationProvider>
+            </Provider>
+        );
+    }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});

package-lock.json

@@ -7,11 +7,13 @@
     "test": "jest"
   },
   "dependencies": {
+    "@eva-design/eva": "1.0.1",
     "axios": "0.19.0",
     "react": "16.8.3",
     "react-native": "0.59.10",
     "react-native-gesture-handler": "1.3.0",
     "react-native-reanimated": "1.1.0",
+    "react-native-ui-kitten": "4.2.0-beta.1",
     "react-navigation": "3.11.1",
     "react-redux": "7.1.0",
     "redux": "4.0.4",

package.json

@@ -0,0 +1,93 @@
+import React, { Component } from 'react'
+import { Platform, StyleSheet, View, Image, Dimensions, ImageBackground } from 'react-native';
+import { Text } from 'react-native-ui-kitten'
+import { SafeAreaView } from 'react-navigation'
+import { FlatList } from 'react-native-gesture-handler';
+
+const WINDOW_WIDTH = Dimensions.get('window').width
+
+class HomeScreen extends Component {
+
+    constructor(props) {
+        super(props)
+    }
+
+    // TODO: replace with real data
+    state = {
+        data: [],
+        images: [
+            { title: "Breaking Bad", image: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
+            { title: "Breaking Bad", image: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
+            { title: "Breaking Bad", image: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
+            { title: "Breaking Bad", image: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
+            { title: "Breaking Bad", image: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
+        ]
+    }
+
+    _keyExtractor = (item, index) => index.toString()
+
+    _renderItem = ({ item }) => {
+        const { title, image } = item
+
+        return (
+            <ImageBackground source={{ uri: image }} style={styles.largeThumbnail} imageStyle={{ borderRadius: 12 }} >
+                <View style={{ position: 'absolute', bottom: 0 }}>
+                    < Text category="h4" style={styles.titleText}>{title} </Text>
+                </View>
+            </ImageBackground >
+        )
+    }
+
+    render() {
+        return (
+            <SafeAreaView style={styles.container}>
+                <Text category="h4" style={styles.welcome}>Welcome to Home Screen</Text>
+                <Text style={styles.instructions}>To get started, edit App.js</Text>
+
+                <FlatList
+                    data={this.state.images}
+                    renderItem={this._renderItem.bind(this)}
+                    keyExtractor={this._keyExtractor.bind(this)}
+                />
+            </SafeAreaView>
+        )
+    }
+}
+
+export default HomeScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F5FCFF',
+    },
+    titleText: {
+        alignSelf: 'flex-start',
+        marginLeft: 20,
+        marginBottom: 10,
+        color: 'white'
+    },
+    largeThumbnail: {
+        width: WINDOW_WIDTH - 40,
+        height: WINDOW_WIDTH - 40,
+        marginRight: 20,
+        marginLeft: 20,
+        marginBottom: 40,
+        borderRadius: 12,
+        elevation: 4,
+        shadowOffset: { height: 4, width: 4 },
+        shadowOpacity: 0.8,
+        shadowColor: '#424242',
+        shadowRadius: 8
+    },
+    welcome: {
+        fontSize: 20,
+        textAlign: 'center',
+        margin: 10,
+    },
+    instructions: {
+        textAlign: 'center',
+        color: '#333333',
+        marginBottom: 5,
+    },
+});