Vertically center image that's not affected by KeyboardAwareScrollView in React Native

Question

Alright, so this has got me busy for quite a few hours already. I am trying to create a login screen where the main components are rendered on the bottom, with the logo in the remaining space. This is kind of what I would like to achieve:

To support my textinputs, I use KeyboardAwareScrollView, as it works better for me as opposed to KeyboardAvoidingView. My code currently looks like this (I plan on using a background image with a 50% color overlay rather than the red background, so the ImageBackground has to stay in place too):

  
    
    
      elloha
    
    
    
      
      
        
          
            

            
              
                // textinputs and buttons go here

Relevant styles:

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
  },
  content: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
  backgroundContainer: {
    justifyContent: "flex-end",
    flex: 1,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
  backgroundOverlay: {
    backgroundColor: "red",
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  logoContainer: {
    top: "10%",
    width: "100%",
  },
  backgroundLogo: {
    alignSelf: "center",
    position: "absolute",
    width: 126,
    height: 96,
  },
  dummyView: {
    backgroundColor: "red",
    flex: 1,
  },
  loginContainer: {
    borderTopEndRadius: 30,
    borderTopStartRadius: 30,
    width: "100%",
    backgroundColor: "white",
    height: 500,
    alignItems: "center",
    paddingTop: Dimensions.get("window").width * 0.1,
  },
  loginScreen: {
    width: "80%",
    backgroundColor: "white",
  },
});

This yields the following result:

I can get it done by adding top: 160 to the backgroundLogo style, but that's a fixed value. I want it to be always in the center of the available space, but I'm unable to add a view between the background and the loginContainer, as all the logic for the keyboard and such is handled in between.

Is there a way to achieve what I want? Ideally, I should also be able to check the available height, and only show the logo if there is enough space (e.g. available height > 100, otherwise don't show logo).

Important: I want the logo to stay fixed, so if the keyboard is shown, the logo should not move up. The loginContainer should go "over" the logo

EDIT:

user_11756184 · Answer

Wrap Image inside a View with this style and give the loginContainer style height: '70%' :

      ...
      
        elloha

user_6139031 · Answer

hie! I think using Dimension to get a specific screen's height and deciding it has 70% of the screen covered via form sheet and rest is free for a logo to be in and we can ask it to be down a little using rest of height's 50% as margin-top ( the image will be in the center of that image )

here is a SNACK LINK to see your example working with my suggested solution.

here is the draft code:

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ImageBackground,TextInput,
Image, TouchableWithoutFeedback, Keyboard, SafeAreaView, StatusBar} from 'react-native';
import Constants from 'expo-constants';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';


export default function App() {
  return (
    
      
      
      
        
        
          
            
              

              
                
                
                
                
                
              
              
            
          
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  content: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  backgroundContainer: {
    justifyContent: 'flex-end',
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  backgroundOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  logoContainer: {
    top: '10%',
    width: '100%',
  },
  backgroundLogo: {
    alignSelf: 'center',
    position: 'absolute',
    marginTop: Dimensions.get('window').height/7, // top for rest of the screen to push logo down
    width: 126,
    height: 96,
  },
  dummyView: {
    backgroundColor: 'red',
    flex: 1,
  },
  loginContainer: {
    borderTopEndRadius: 30,
    borderTopStartRadius: 30,
    width: '100%',
    backgroundColor: 'white',
    height: Dimensions.get('window').height/1.5, //container of form height
    alignItems: 'center',
    paddingTop: Dimensions.get('window').width * 0.1,
  },
  loginScreen: {
    width: '80%',
    backgroundColor: 'white',
  },
});

Here is the output of code on android/ios:

Vertically center image that's not affected by KeyboardAwareScrollView in React Native

2 Answers