CODEWITHSUNDEEP
react-nativeflexbox
delete
delete

Reputation: 19148

React-Native: how to fill fullsize screen without explicit Width and Height?

I want to create a fullsize-screen with the child-view (a video player) that is rendered over the full size of the screen. I only get it work when i pass explicitly width and height to the component.

But i know that there is a property called "flex". In many tutorials they do something like "flex: 1", but for me it nowhere does what it is supposed to.

(For the sake of completeness, the video-player is not part of the question. I can also replace the <video> tag with <Image> or each other kind of view and get the same results)

render() {
    const uri = this.props.uri
    return (
        <KeyboardAwareScrollView keyboardShouldPersistTaps="always" >
            <TouchableWithoutFeedback onPress={RouterActions.pop}>
                <Video source={{uri: uri}}   
                    ref={(ref) => {
                        this.player = ref
                    }}                       
                    style={s.fullsize} 

                />
            </TouchableWithoutFeedback>

            <TouchableOpacity onPress={RouterActions.pop} style={s.closeBtn}>
                <Icon name="times-circle-o" size={20} color="white" />
            </TouchableOpacity>


        </KeyboardAwareScrollView>
    )
}

My styles:

This is only working when i pass the width and height:

const s = StyleSheet.create({
  fullsize: {
    backgroundColor: 'black',
    //flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  closeBtn: {
      position: 'absolute',
      left: 20,
      top: 25, 
  },

});

I only tried out this one, but then the screen will be empty because of the -Component has a width and height of 0 each.

const s = StyleSheet.create({
  fullsize: {
    backgroundColor: 'black',
    flex: 1,   // this is not working
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
});

Upvotes: 4

Views: 22708

Answers (1)

Matt Aft
Matt Aft

Reputation: 8936

I believe doing flex: 1 will make it take up all the space provided by it's parent element. In your case, none of your parent elements have any styling so try this out:

render() {
    const uri = this.props.uri
    return (
        <View style={{ flex: 1 }}>
            <TouchableWithoutFeedback style={{ flex: 1 }} onPress={RouterActions.pop}>
                <Video source={{uri: uri}}   
                    ref={(ref) => {
                        this.player = ref
                    }}                       
                    style={{ flex: 1 }} 

                />
            </TouchableWithoutFeedback>

            <TouchableOpacity onPress={RouterActions.pop} style={s.closeBtn}>
                <Icon name="times-circle-o" size={20} color="white" />
            </TouchableOpacity>
        </View>
    )
}

Upvotes: 10

Related Questions