style={{height: Dimensions.get('window').height}} about react-native-picker HOT 6 CLOSED

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.

from react-native-picker.

@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!

from react-native-picker.

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?

from react-native-picker.

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>
    );
}

from react-native-picker.

Thanks I'm closing the issue.

from react-native-picker.

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

from react-native-picker.