Package Exports

react-native-step-expandable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-step-expandable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

REACT-NATIVE-STEP-EXPANDABLE

Installation

npm i react-native-step-expandable

Example

import Expandable from 'react-native-step-expandable';
const HourPickerHeight = 260;
const ConfirmButtonHeight = 70;


onHourSelect = (value) => {
    // this will expand second element in <Expandable /> items
    this.expandNext(1)
}

render(){
    return(
        <Expandable
            HeaderView={
                <View>
                    ...
                </View>
            }
            expandNext={(ref) => this.expandNext = ref}
            containerStyle={styles.container}
            items={[
                {
                    height: HourPickerHeight,
                    view: (
                        <View>
                            <View style={styles.seperator} />
                            <HourPicker
                                selectedAMorPM={this.state.selectedAmPm}
                                selectedHour={this.state.selectedHour}
                                onHourSelect={this.onHourSelect}
                                onAmPmSelect={this.onAmPmSelect}
                            />
                        </View>
                    )
                },
                {
                    height: ConfirmButtonHeight,
                    view: (
                        <TouchableOpacity style={styles.confirmButton}>
                            <Text style={{ color: BACKGROUND_COLOR, fontWeight: 'bold' }}>Confirm</Text>
                        </TouchableOpacity>
                    )
                }
            ]}
        />
    );
}

Props

Name	Input	Required	description
HeaderView	View	Optional	Renders on top of the container
containerStyle	StyleSheet	Optional	Style of the container
expandNext	(ref: (index) => void) => void	Required	Used to capture View's expand method
items	[{view: View, height: number}]	Required	Items to expand

How to?

First put items in items property.
You should pass view and it's height. (if you are not sure about the size, under estimate the height).
Save expand method as shown.
To expand next step, call saved expand method's ref, with index of the step.
For example to expand first step, you should call this.expandNext(0)