style={{height: Dimensions.get('window').height}}

[Taakn]

Hello,

Great component. I'm just not understanding why you wrap your component in a view with style={{height: Dimensions.get('window').height}} which means that the remaining components coming after the picker are pushed outside of the screen.

How would you go about fixing that?

Thanks

[xwenliang]

I just want to make an animation for the Picker show, At first, make outer view {{height: Dimensions.get('window').height}}, and make the Picker {{bottom: 0, position: 'absolute'}}, then we can slideUp the Picker when we clicked the 'show button'. If you want to show Picker at first, you can change the style of outer view or style of Picker.

[Taakn]

@xwenliang what I am trying to say is that the components displayed after the picker get pushed back outside of the screen, because the outer view height is the height of the screen.

Moreover, components being displayed after the picker are displayed above the picker if you do not set {{height: Dimensions.get('window').height}}

So that's my question: how do you display components after the picker so they don't get pushed outside of the screen, and do not display above the picker?

Thanks!

[Taakn]

I mean it works if you place the picker very last in the component list then you can have the button opening it anywhere... But is there another, more elegant, way than splitting up the two?

[xwenliang]

I add customized style support for the picker in v0.4.1, I have no idea if this could make sense for you.

render(){
    return (
        <View>
            <View style={{height: 100, paddingTop: 80, backgroundColor: 'red'}}>
                <Text>this is something above picker</Text>
            </View>
            <View style={{height: 240, position: 'relative', backgroundColor: 'green'}}>
                <Picker
                    ref={picker => this.picker = picker}
                    pickerHeight={240}
                    showDuration={300}
                    pickerData={createDateData()}
                    selectedValue={['2015年', '12月', '12日']}
                    onPickerDone={(pickedValue) => {
                        console.log(pickedValue);
                    }}
                    style={{top: 0}}
                    pickerToolBarStyle={{height: 0, opacity: 0}}
                />
            </View>
            <View style={{height: 100, backgroundColor: 'yellow'}}>
                <Text>this is something below picker</Text>
            </View>
        </View>
    );
}

[Taakn]

Thanks I'm closing the issue.

[alexlevy0]

@xwenliang Is it still possible to display the picker with a component on the bottom as in your image?