Question 35403 in React native Question posted in
The official React Native documentation can be found here.

Absolute positioning causes React Native component to go off screen

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,
        },
    });
Tags:

2

Answers


  1. 0

    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:

    enter image description here

    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:

    enter image description here

    Login or Signup to reply.
  2. 0

    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 >
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search