Make an item stick to the bottom using flex in react-native

Question

Suppose this is the layout:

    
        ...
        ...
    
             


        

Answer 1

I have a case in which I have to show a image in the bottom like this, as you can see the sky-blue image is not poped-up with keyboard.

so for this I have created a functional component for image in bottom.

import React, { useEffect, useState } from "react";
import { Keyboard, View, Image } from "react-native";

export const BottomImage = (props) => {

const [shouldShow, showImage] = useState(true);

useEffect(() => {
    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
    Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

    return () => {
        Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
        Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
    };
}, []);

let _keyboardDidShow = () => {
    showImage(false)
}

let _keyboardDidHide = () => {
    showImage(true)
}


return (<ViewToRender show={shouldShow} src={props.image} />)
}

function ViewToRender(props) {
return props.show ? <Image style={{ position: 'absolute', bottom: 0 }} source={props.src} /> : <View />
}

and to use this Bottom image you have to pass your image to it like :

<BottomImage image={AppImage.signupbottom} />