CODEWITHSUNDEEP
javascriptreact-nativefrontend
Khanh Nguyen
Khanh Nguyen

Reputation: 19

Prevent scene transition when passing props react-native-router-flux

I am struggling with a problem when trying to combine listview with react-native-router-flux

Expected behaviour

I use Action.SCENE_NAME to pass props from parent to child, it works perfect on phone.

But in tablet, I use split view. The result I want as follows:

In the left side is parent, in the right side is child. When I click on the left side, it should display immediately on right side without any transition animation. Screen shot of tablet

Actual behaviour

Display on tablet When I click the left side, it raises transition animation to child component How can I prevent it?

Here is my code: 

renderRow(rowData) {
        return (   
                 <View style={styles.generalStyle}>
                    <TouchableOpacity 
                    onPress={() => {
                        if (window.width <= 600) {

                             Actions.calendarDetail({ eventtop: rowData });
                        } else if (window.width > 600) {      
                            // HOW CAN I PASS PROPS TO <TabletComponent />;
                            // without causing any transition animation
                        }
                     }}>
                        <View>
                            <Text style={styles.evenType}>
                                 {rowData.EventType}
                             </Text>
                             <Text style={{ ...styles.contentStyle, ...styles.contenStyle2 }}>
                                {dateFormat(rowData.EventDate, 'mm/dd/yyyy')}
                             </Text>
                             <Icon
                                name='chevron-thin-right'
                                style={styles.iconStyle}
                             />
                             <View 
                                style={styles.titleStyle}
                             >
                                <Text style={styles.contentStyle}>  
                                {rowData.Title}
                             </Text>
                             </View>                          
                         </View>                 
                    </TouchableOpacity>

                </View>      
        );
}

Upvotes: 0

Views: 989

Answers (3)

Khanh Nguyen
Khanh Nguyen

Reputation: 19

I finally figured it out after 1 day. Thanks to Redux, all I need is create another Action creator and then pass rowData to it, after that I dispatch action again to receive state back. I do not need to use replace or reset, Actions.SCENE_KEY is enough The right side displays data like a charm.

Upvotes: 1

nirsky
nirsky

Reputation: 3105

When using react-native-router-flux, I found setting duration={1} on your scene declaration results in skipping the transition animation:

<Scene key={'someScene'} component={SomeComponent} title="Some Title" duration={1}/>

I never tried passing duration as a prop but I think there's no reason it won't work.

Upvotes: 1

Codesingh
Codesingh

Reputation: 3384

While calling the scene you should use Actions.SCENE_NAME({type: replace | reset}) in order to disable push effect(animation) in transaction. The replace|reset just don't push anything in the stack of scenes they replaces the current scene with the scene you need in that place...

It works similar to the react native's navigator.. In that if you push or pop something it shows the transaction effect but does not show any effect when replace is used..

Cheers :)

Upvotes: 0

Related Questions