Problem with transition between components with React Native Animated

Question

I have 2 View component, each of them I want to show only one per time.

The transition I want to achieve is slide left and right.

The problem is that the second View which is by default not visible, when I fire my function to change components, it wont appears at the correct position.

import {StyleSheet, Text, View, Animated, Dimensions} from 'react-native';
import React, {useRef, useState} from 'react';
import {Colors, Typography} from 'styles';
import {OutlineButton, TextMedium, TextRegular} from 'component/global';
import {Pen} from 'utils/icon_assets';

const {width, height} = Dimensions.get('window');
const UserInfo = ({data}) => {
    //Animation Functions
    const offsetUserInfo = useRef(new Animated.Value(0)).current;
    const offsetEditUser = useRef(new Animated.Value(width)).current;
    const opacityUserInfo = useRef(new Animated.Value(1)).current;
    const opacityEdituser = useRef(new Animated.Value(0)).current;

    const onPressUpdate = () => {
        Animated.parallel([
            Animated.timing(offsetUserInfo, {
                toValue: -width,
                duration: 300,
                useNativeDriver: false,
            }).start(),
            Animated.timing(opacityUserInfo, {
                toValue: 0,
                duration: 300,
                useNativeDriver: false,
            }).start(),
            Animated.timing(offsetEditUser, {
                toValue: 0,
                duration: 300,
                useNativeDriver: false,
            }).start(),
            Animated.timing(opacityEdituser, {
                toValue: 1,
                duration: 300,
                useNativeDriver: false,
            }).start(),
        ]);
    };

    const onPressSave = () => {
        Animated.parallel([
            Animated.timing(offsetUserInfo, {
                toValue: 0,
                duration: 300,
                useNativeDriver: false,
            }).start(),
            Animated.timing(opacityUserInfo, {
                toValue: 1,
                duration: 300,
                useNativeDriver: false,
            }).start(),
            Animated.timing(offsetEditUser, {
                toValue: width,
                duration: 300,
                useNativeDriver: false,
            }).start(),
            Animated.timing(opacityEdituser, {
                toValue: 0,
                duration: 300,
                useNativeDriver: false,
            }).start(),
        ]);
    };

    return (
        
            
                
                
                
            
            
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                

                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                
            
        
    );
};

export default UserInfo;

const styles = StyleSheet.create({
    Wrapper: {
        flex: 1,
        borderWidth: 1,
        borderRadius: 8,
        borderColor: Colors.N30,
        paddingHorizontal: 16,
        paddingVertical: 20,
        backgroundColor: Colors.N0,
        marginTop: 12,
    },
    Row: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    ButtonEdit: {
        paddingVertical: 6,
        paddingHorizontal: 18,
    },
    BodyWrapper: {
        marginTop: 28,
        width: width * 0.8,
        backgroundColor: 'red',
    },
    Column: {
        marginBottom: 16,
    },
});

Current result that I got is :

As you can see theres a huge gap between each View. View with red background is not fully positioned inside my screen

What did I do wrong ?

user_5617627 · Answer

You can use horizontal FlatList instead and call scrollToIndex() function to navigate between items.

About your question, most probably this happens due to the position issues. You have either position those two views absolutely, or just use 1 animated view, which you will change position from 0 to -width and vice-versa

Problem with transition between components with React Native Animated

1 Answers