Fixed moving BG && Keyboard issue

Sidm9 · Apr 9, 2021 · 55ce24b · 55ce24b
1 parent b214e6a
commit 55ce24b
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 124 deletions.
diff --git a/Frontend/Animations/Easein.js b/Frontend/Animations/Easein.js
@@ -5,7 +5,7 @@ import {Animated} from 'react-native';
 export default function Easein(props) {
   const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
 
-  React.useEffect(() => {
+  useEffect(() => {
     Animated.timing(fadeAnim, {
       toValue: 1,
       duration: 500,

diff --git a/Frontend/Screens/Login.js b/Frontend/Screens/Login.js
@@ -1,25 +1,17 @@
-/* eslint-disable react-native/no-inline-styles */
-/* eslint-disable prettier/prettier */
-import React, { useState } from 'react';
-import {
-  Image,
-  View,
-  Text,
-  StyleSheet,
-  ImageBackground,
-} from 'react-native';
-import PlaceHolders from '../Components/PlaceHolders';
-import PasswordInput from '../Components/PasswordInput';
-import codeyLogo from '../assets/images/CodeyDark.png';
-import LoginButton from '../Components/Button.js';
-import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
-import Oauth from '../Components/GoogleButton';
+import React from 'react';
+import { Dimensions, Image, ImageBackground, KeyboardAvoidingView, StyleSheet, Text } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
+import Easein from '../Animations/Easein';
+import FadeInView from '../Animations/FadeIn';
+import Facebook from '../assets/icons/facebook.png';
 import Google from '../assets/icons/G.png';
 import Github from '../assets/icons/git.png';
-import Facebook from '../assets/icons/facebook.png';
+import CodeyLogo from '../assets/images/CodeyDark.png';
 import TextHere from '../Components/--TextHere---';
-import Easein from '../Animations/Easein';
-import FadeInView from '../Animations/FadeIn';
+import LoginButton from '../Components/Button.js';
+import Oauth from '../Components/GoogleButton';
+import PasswordInput from '../Components/PasswordInput';
+import PlaceHolders from '../Components/PlaceHolders';
 const styles = StyleSheet.create({
   logo: {
     width: '70%',
@@ -50,8 +42,10 @@ const styles = StyleSheet.create({
     marginLeft: '10%',
   },
   backgroundImage: {
-    width: '100%',
-    height: '100%',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+    zIndex: -1,
+    position: "absolute",
   },
   entriesContainer: {
     borderWidth: 0,
@@ -74,47 +68,49 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
 });
-export default function login({ route, navigation }, props) {
+export default function login({ navigation }) {
   return (
     <>
-      <View style={styles.container}>
-        <ImageBackground
-          style={styles.backgroundImage}
-          source={require('../assets/images/3272176.jpg')}>
-          <ScrollView>
-            <FadeInView style={styles.logoContainer}>
-              <Image source={codeyLogo} style={styles.logo} />
-            </FadeInView>
-            <Easein style={styles.entriesContainer}>
-              <Text style={styles.heading}>Login</Text>
-              <PlaceHolders placeholder={'Enter Email'} />
-              <PasswordInput
-                placeholder={'Enter Password'}
-              />
-              <LoginButton
-                text="Login"
-                click={() => navigation.navigate('Posts')}
-              />
-            </Easein>
-            <Easein style={{
-              flex: 1.0, borderWidth: 0,
-              borderColor: 'green',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-              <TextHere text={'OR'} />
-              <Easein style={styles.signUpWithContainer}>
-                <Oauth text={'Google'} image={Google} />
-                <Oauth text={'Github'} image={Github} />
-                <Oauth text={'Facebook'} image={Facebook} />
-              </Easein>
-              <TouchableOpacity onPress={() => navigation.navigate('Register')}>
-                <Text style={styles.footer}>Don't Have An Account? </Text>
-              </TouchableOpacity>
+
+      <KeyboardAvoidingView style={styles.container}>
+        <ScrollView>
+          <FadeInView style={styles.logoContainer}>
+            <Image source={CodeyLogo} style={styles.logo} />
+          </FadeInView>
+          <Easein style={styles.entriesContainer}>
+            <Text style={styles.heading}>Login</Text>
+            <PlaceHolders placeholder={'Enter Email'} />
+            <PasswordInput
+              placeholder={'Enter Password'}
+            />
+            <LoginButton
+              text="Login"
+              click={() => navigation.navigate('Posts')}
+            />
+          </Easein>
+          <Easein style={{
+            flex: 1.0,
+            borderWidth: 0,
+            borderColor: 'green',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+            <TextHere text={'OR'} />
+            <Easein style={styles.signUpWithContainer}>
+              <Oauth text={'Google'} image={Google} />
+              <Oauth text={'Github'} image={Github} />
+              <Oauth text={'Facebook'} image={Facebook} />
             </Easein>
-          </ScrollView>
-        </ImageBackground>
-      </View>
+            <TouchableOpacity onPress={() => navigation.navigate('Register')}>
+              <Text style={styles.footer}>Don't Have An Account? </Text>
+            </TouchableOpacity>
+          </Easein>
+        </ScrollView>
+
+      </KeyboardAvoidingView>
+      <ImageBackground
+        style={styles.backgroundImage}
+        source={require('../assets/images/3272176.jpg')} />
     </>
   );
 }
diff --git a/Frontend/Screens/Register.js b/Frontend/Screens/Register.js
@@ -1,25 +1,30 @@
 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import {
-  Image,
-  View,
-  Text,
-  StyleSheet,
+  Dimensions, Image,
+
+
+
   ImageBackground,
-  TouchableOpacity,
+
+
+  KeyboardAvoidingView, StyleSheet, Text,
+
+
+  TouchableOpacity
 } from 'react-native';
-import PlaceHolders from '../Components/PlaceHolders';
-import PasswordInput from '../Components/PasswordInput';
-import codeyLogo from '../assets/images/CodeyDark.png';
-import LoginButton from '../Components/Button.js';
-import OAuth from '../Components/GoogleButton';
+import { ScrollView } from 'react-native-gesture-handler';
+import Easein from '../Animations/Easein';
+import FadeInView from '../Animations/FadeIn';
+import Facebook from '../assets/icons/facebook.png';
 import Google from '../assets/icons/G.png';
 import Github from '../assets/icons/git.png';
-import Facebook from '../assets/icons/facebook.png';
+import codeyLogo from '../assets/images/CodeyDark.png';
 import TextHere from '../Components/--TextHere---';
-import {ScrollView} from 'react-native-gesture-handler';
-import FadeInView from '../Animations/FadeIn';
-import Easein from '../Animations/Easein';
+import LoginButton from '../Components/Button.js';
+import OAuth from '../Components/GoogleButton';
+import PasswordInput from '../Components/PasswordInput';
+import PlaceHolders from '../Components/PlaceHolders';
 const styles = StyleSheet.create({
   logo: {
     width: '70%',
@@ -57,8 +62,10 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   backgroundImage: {
-    width: '100%',
-    height: '100%',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+    zIndex: -1,
+    position: "absolute",
   },
   registerWithContainer: {
     marginLeft: 35,
@@ -80,10 +87,8 @@ const styles = StyleSheet.create({
 export default function login({navigation}) {
   return (
     <>
-      <View style={styles.container}>
-        <ImageBackground
-          style={styles.backgroundImage}
-          source={require('../assets/images/3272176.jpg')}>
+      <KeyboardAvoidingView style={styles.container}>
+
           <ScrollView>
             <FadeInView style={styles.logoContainer}>
               <Image source={codeyLogo} style={styles.logo} />
@@ -123,8 +128,10 @@ export default function login({navigation}) {
               </TouchableOpacity>
             </Easein>
           </ScrollView>
-        </ImageBackground>
-      </View>
+      </KeyboardAvoidingView>
+      <ImageBackground
+          style={styles.backgroundImage}
+          source={require('../assets/images/3272176.jpg')}/>
     </>
   );
 }
diff --git a/Frontend/Screens/import React, {Component} from 'react';.tsx b/Frontend/Screens/import React, {Component} from 'react';.tsx
diff --git a/Frontend/yarn.lock b/Frontend/yarn.lock
@@ -3711,6 +3711,11 @@ inquirer@^7.0.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+install@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/install/-/install-0.13.0.tgz#6af6e9da9dd0987de2ab420f78e60d9c17260776"
+  integrity sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"