finished screens

Author: Mikhail

App.tsx

@@ -1,11 +1,20 @@
 import React from 'react';
-import { StatusBar, Text, View } from 'react-native';
+import { StatusBar, View } from 'react-native';
+import { Provider } from 'react-redux';
+import Home from './Home';
+import store from './redux/store';
+import 'react-native-gesture-handler';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const App = () => {
   return (
-    <View style={{ flex: 1 }} >
+
+    <Provider store={store} >
+      <GestureHandlerRootView style={{ flex: 1 }}>
         <StatusBar barStyle='dark-content' backgroundColor="transparent" translucent />
-    </View>
+        <Home />
+      </GestureHandlerRootView>
+    </Provider>
   );
 };
 

Home.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { View } from 'react-native';
+import NavigationTabs from './navigator/NavigationTabs';
+
+const Home = () => {
+  return (
+    <View style={{ flex: 1 }}>
+      <NavigationContainer >
+        <NavigationTabs />
+      </NavigationContainer>
+    </View>
+  );
+}
+export default Home;

android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 
 import com.android.build.OutputFile
 import org.apache.tools.ant.taskdefs.condition.Os

api/index.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+const api = 'https://jsonplaceholder.typicode.com';
+
+const getAxiosRequest = () => axios.create({
+  headers: {
+    'Content-Type': 'application/json; charset=utf-8',
+    Accept: 'application/json',
+    'Cache-Control': 'no-store, no-cache, must-revalidate',
+  },
+});
+
+export default {
+  getPosts() {
+    const request = getAxiosRequest();
+
+    return request.get(`${api}/posts`);
+  },
+};

assets/images/bridge.jpg

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin']
 };

assets/images/bulldog.jpg

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  StyleSheet, TouchableOpacity,
+} from 'react-native';
+import Animated, {
+  SlideInLeft, Layout, ZoomOut, useAnimatedStyle, useSharedValue, withTiming, useAnimatedGestureHandler, withSpring,
+} from 'react-native-reanimated';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import {
+  PanGestureHandler,
+  PanGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
+
+const generateColor = () => {
+  const randomColor = Math.floor(Math.random() * 16777215)
+    .toString(16)
+    .padStart(6, '0');
+  return `#${randomColor}`;
+};
+
+type Props = {
+  deleteCard: () => void;
+};
+
+type ContextType = {
+  translateX: number;
+  translateY: number;
+};
+
+function Card({ deleteCard }: Props) {
+  const rotation = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotateZ: `${rotation.value}deg`,
+    },
+    {
+      translateX: translateX.value,
+    },
+    {
+      translateY: translateY.value,
+    }],
+  }));
+
+  const panGestureEvent = useAnimatedGestureHandler<
+  PanGestureHandlerGestureEvent,
+  ContextType
+  >({
+    onStart: (event, context) => {
+      context.translateX = translateX.value;
+      context.translateY = translateY.value;
+    },
+    onActive: (event, context) => {
+      translateX.value = event.translationX + context.translateX;
+      translateY.value = event.translationY + context.translateY;
+    },
+    onEnd: () => {
+      translateX.value = withSpring(0);
+      translateY.value = withSpring(0);
+    },
+  });
+
+  return (
+    <PanGestureHandler onGestureEvent={panGestureEvent}>
+      <Animated.View
+        layout={Layout.springify()}
+        style={[styles.container, animatedStyle, { backgroundColor: generateColor() }]}
+        entering={SlideInLeft}
+        exiting={ZoomOut}
+      >
+
+        <TouchableOpacity
+          onPress={() => { rotation.value = withTiming(rotation.value + 360, { duration: 550 }); }}
+        >
+          <FontAwesomeIcon name="rotate-right" size={20} color="gray" />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.deleteButtonContainer}
+          onPress={deleteCard}
+        >
+          <MaterialIcon name="delete" size={20} color="gray" />
+        </TouchableOpacity>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+} export default Card;
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 10,
+    padding: 16,
+    height: 200,
+    borderRadius: 16,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  deleteButtonContainer: {
+    backgroundColor: 'white',
+    position: 'absolute',
+    bottom: 10,
+    right: 10,
+    padding: 8,
+    borderRadius: 8,
+  },
+});

assets/images/cat.jpg

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  StyleSheet, View, Text, TouchableOpacity, Image,
+} from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack/lib/typescript/src/types';
+import { StackParamList } from '../../navigator/types';
+
+type Props = {
+  item: {
+    title: string,
+    body: string,
+  }
+  photo: any,
+  navigation: StackNavigationProp<StackParamList, 'NewsScreen'>
+};
+
+export default function NewsCard(props: Props) {
+  const { item, photo, navigation } = props;
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={() => navigation.navigate('CurrentNewsScreen', { item, photo })}
+    >
+      <View style={{ flex: 1, padding: 16 }}>
+        <Text
+          numberOfLines={2}
+          style={styles.titleContainer}
+        >
+          {item.title}
+
+        </Text>
+        <Text
+          numberOfLines={3}
+          style={styles.bodyContainer}
+        >
+          {item.body}
+
+        </Text>
+      </View>
+      <Image
+        style={styles.imageContainer}
+        source={photo}
+      />
+
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    shadowColor: '#000',
+    flexDirection: 'row',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  imageContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    borderTopRightRadius: 16,
+    borderBottomRightRadius: 16,
+  },
+  titleContainer: {
+    fontSize: 18,
+    fontWeight: '700',
+    paddingBottom: 8,
+  },
+  bodyContainer: {
+    fontSize: 12,
+    fontWeight: '400',
+  },
+});

assets/images/hyacinth.jpg

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  StyleSheet, View, Text,
+} from 'react-native';
+
+type Props = {
+  title: string,
+  content: string | undefined,
+};
+
+export default function ProfileField(props: Props) {
+  const { title, content } = props;
+  const hideInfo = () => {
+    switch (title) {
+      case 'Password': {
+        return content?.replace(content, '*********');
+      }
+      case 'Email': {
+        return content?.replace(/(\w{3})[\w.-]+@([\w.]+\w)/, '$1***@$2');
+      }
+      default: {
+        return content;
+      }
+    }
+  };
+
+  return (
+    <View style={{ marginVertical: 8 }}>
+      <Text style={styles.titleText}>{title}</Text>
+      <Text style={styles.contentText}>{hideInfo()}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#748D63',
+  },
+  contentText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: 'black',
+  },
+});

assets/images/man.jpg

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  StyleSheet, TouchableOpacity, Text,
+} from 'react-native';
+
+type Props = {
+  title: string,
+  icon: any,
+  onPress?: () => void;
+  errors?: boolean
+};
+
+export default function DefaultButton(props: Props) {
+  const {
+    title, icon, onPress, errors,
+  } = props;
+  return (
+    <TouchableOpacity
+      style={[styles.buttonContainer, { opacity: errors ? 0.5 : 1 }]}
+      disabled={errors}
+      onPress={onPress}
+    >
+      <Text style={styles.buttonText}>
+        { title }
+      </Text>
+      { icon }
+    </TouchableOpacity>
+  );
+}
+
+DefaultButton.defaultProps = {
+  errors: false,
+  onPress: undefined,
+};
+const styles = StyleSheet.create({
+
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: '#748D63',
+    paddingRight: 10,
+  },
+  buttonContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 16,
+    borderRadius: 16,
+    flexDirection: 'row',
+    borderColor: '#748D63',
+    borderWidth: 2,
+    marginTop: 16,
+  },
+  imageContainer: {
+    borderWidth: 4,
+    borderRadius: 125,
+    borderColor: '#748D63',
+    margin: 16,
+    alignSelf: 'center',
+  },
+  backgroundDataContainer: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+});