CODEWITHSUNDEEP
javascriptcssreact-native
Mr. Robot
Mr. Robot

Reputation: 1834

How can I position two buttons on top of the background side by side and at the bottom of the screen in React Native?

I have a container with a position of relative and an inner </View> element with a position of absolute so the buttons sit on top of the video screen in the background.

When I give the latter its property of absolute, it no longer stays at the bottom of the screen, but I need to give it this so it stays 'on top' of the image behind it.

Here are screenshots of before and after the inner element position on absolute:

enter image description here

enter image description here

Here's my code including the absolute property:

if (props.stream) {
    return (
      <>
        <TouchableWithoutFeedback onPress={handleScreenPress}>
          <View style={styles.videoViewWrapper}>
            <RTCView style={styles.android} streamURL={props.stream.toURL()} />
            <CountDown time={time} />
            {/* {showButtons && */}
            <View style={{
              // position: 'absolute',
            }}>
              <Button
                icon="phone"
                mode="contained"
                style={{ width: 200, margin: 10 }}
                onPress={handleEndCall}
              >
                End Call
              </Button>
              <Button
                icon="phone"
                mode="contained"
                style={{ width: 200, margin: 10 }}
                onPress={handleSpeakerSwitch}
              >
                Speaker
                </Button>
            </View>
            {/* } */}
          </View>
        </TouchableWithoutFeedback>
      </>
    );
  }
  return (<> <Loader title="Connecting Your Call.." /> </>)
}

const styles = StyleSheet.create({
  videoViewWrapper: {
    flex: 1,
    overflow: 'hidden'
  },
  android: {
    flex: 1,
    position: 'relative',
    backgroundColor: 'black'
  }
})

export default VideoCall;

I am seeking some tips as to how I could align the two buttons side by side at the bottom and on top of the image behind it, as I'm struggling.

Upvotes: 0

Views: 1363

Answers (2)

Gaurav Roy
Gaurav Roy

Reputation: 12235

If you want to achieve something like this, then see the code :

enter image description here

Check code :

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex:1}}>

        <View style={{flex:1, flexDirection:'row', alignItems:'flex-end',}}>     
           <TouchableOpacity



                style={{width:'40%' , backgroundColor:'blue' ,marginHorizontal:10}}
              >
              <Text style={{color:'white',alignSelf:'center', padding:5}}>End Call</Text>
              </TouchableOpacity>
              <TouchableOpacity

               style={{width:'40%', backgroundColor:'blue',marginHorizontal:10}}


              >
               <Text style={{color:'white',alignSelf:'center', padding:5}}>Pick Call</Text>
              </TouchableOpacity>
              </View>
      </View>
    );
  }
}

check the link : expo snack

Hope it helps .feel free for doubts

Upvotes: 2

Bora Sumer
Bora Sumer

Reputation: 860

Either you can give them separate positioning, top and left for the first, and top and right for the second button, or put them in a view and set flexDirection of the view to row so they could stay side by side. I have a card object and two buttons on top of it, and it works that way.

Upvotes: 0

Related Questions