Absolute positioning causes React Native component to go off screen-CodePudding

One of my React Native screens needs to have a TouchableOpacity at the bottom of the screen. I've tried setting position: "absolute" and bottom: 0, however, this just causes the element to be a few hundred pixels below the screen. How can I make my TouchableOpacity be at the bottom of the screen all the time?

    <View style={styles.mainView}>
                    <View style={{ position: "relative" }}>
                            <TouchableOpacity style={styles.cartView}>
                                <Text style={styles.cartText}>View cart</Text>
                            </ViewTouchableOpacity
                    </View>
                }
            />
        </View>

    //styles
    const styles = StyleSheet.create({
        mainView: {
// devDims are the device dimensions
            minHeight: devDims.height,
            minWidth: devDims.width,
            backgroundColor: "white",
            paddingLeft: 10,
            paddingRight: 10,
            paddingTop: 10,
        },
        cartView: {
            justifyContent: "center",
            alignItems: "center",
            maxHeight: 50,
            minWidth: "100%",
            alignSelf: "center",
            marginTop: 50,
            padding: 10,
            borderRadius: 20,
        },
        cartText: {
            fontFamily: "semi",
            fontSize: 22,
        },
    });

CodePudding user response：

We could handle this without absolute positioning using flex alone.

Add flex:1 to the parent view and to the view that wraps the sticky bottom. Then, add flex: 2 to the view that wraps the other content.

Here is a minimal generic component that lets you add a sticky bottom component.

const MainScreen = ({bottom, children}) => {
   return <View style={{flex: 1, backgroundColor: 'red'}}>
        <View style={{flex: 2, backgroundColor: 'green'}}>
            {children}
        </View>
        <View style={{flex: 1, backgroundColor: 'yellow'}}>
          {bottom}
        </View>
    </View>
}

export default function App() {
  return <MainScreen bottom={
             <TouchableOpacity style={styles.cartView}>
                <Text style={styles.cartText}>View cart</Text>
             </TouchableOpacity>}> 
    </MainScreen>
}

The result looks as follows:

However, we can use absolute positioning as well. You are just missing the flex: 1 for the parent view.

export default function App() {
  return <View style={styles.mainView}>
                    <View style={{ position: "absolute", bottom: 0 }}>
                            <TouchableOpacity style={styles.cartView}>
                                <Text style={styles.cartText}>View cart</Text>
                            </TouchableOpacity>
                    </View>
        </View>
}

const styles = StyleSheet.create({
        mainView: {
          flex: 1,
// devDims are the device dimensions
            minHeight: devDims.height,
            minWidth: devDims.width,
            backgroundColor: "red",
            paddingLeft: 10,
            paddingRight: 10,
            paddingTop: 10,
        },
        cartView: {
            justifyContent: "center",
            alignItems: "center",
            maxHeight: 50,
            minWidth: "100%",
            backgroundColor: "yellow",
            alignSelf: "center",
            marginTop: 50,
            padding: 10,
            borderRadius: 20,
        },
        cartText: {
            fontFamily: "semi",
            fontSize: 22,
        },
    });

The result is as follows:

CodePudding user response：

if you are using position as absolute then your view must be last view before last closed view tag

When you have declared any view at bottom of the screen then you should be do like this

import {View, SafeAreaView} from 'react-native';
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<!---Anything extra views---!>
<View style={{bottom:0,position:'absolute',start:0,end:0}}> !-- you're bottom view

<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity

</View>
</View>
</SafeAreaView >