I am fairly new to react-native and I am trying to add an animation to the header of two screens. The animation that I want to achieve is very simple, the header should just collapse. As it is a shared component, after reading a bit about animations, I figured out I should be using react-navigation-shared-element for this. The code for the two screens looks as follow:
// loginScreen.tsxexport const LoginScreen = () => { const [loginData, setLoginData] = useState({password: '', email: ''}); const handleInputChange = (value: string, fieldId: keyof ILoginData) => { let updatedData: ILoginData = {...loginData}; updatedData[fieldId] = value; setLoginData(updatedData); }; return (<ScrollView style={styles.main} contentContainerStyle={styles.containerContent}><SharedElement id="register-login-header"><Header headerStyle={headerStyle} showWallpaper={true} /></SharedElement><View style={styles.form}><Label labelTitle="Email Address" labelStyle={labelStyle} /><FormInput id="email" formOnChange={handleInputChange} /><Label labelTitle="Password" labelStyle={{...labelStyle, ...passwordStyle}} /><FormInput isSecure={true} id="password" formOnChange={handleInputChange} /><Label labelTitle="Forgot Password?" labelStyle={{...forgotPasswordStyle}} /></View><LinearGradient style={styles.formButton} colors={[color.primaryLight, color.primaryDark]}><FormButton buttonTitle="Login" buttonStyle={submitStyle} buttonOnPress={() => console.log(loginData)} /></LinearGradient></ScrollView> );};LoginScreen.sharedElements = () => { return ['register-login-header'];};//registerScreen.tsxexport const RegisterScreen = () => { const [registerData, setRegisterData] = useState({} as IRegisterData); const handleInputChange = (value: string, fieldId: keyof IRegisterData) => { let updatedData: IRegisterData = {...registerData}; updatedData[fieldId] = value; setRegisterData(updatedData); }; return (<ScrollView style={styles.main} contentContainerStyle={styles.containerContent}><SharedElement id="register-login-header"><Header headerStyle={headerStyle} showWallpaper={false} /></SharedElement><View style={styles.form}><Label labelTitle="Email Address" labelStyle={labelStyle} /><FormInput id="email" formOnChange={handleInputChange} /><Label labelTitle="Name" labelStyle={{...labelStyle, ...additionalLabelsStyle}} /><FormInput id="name" formOnChange={handleInputChange} /><Label labelTitle="Age" labelStyle={{...labelStyle, ...additionalLabelsStyle}} /><FormInput id="age" formOnChange={handleInputChange} /><Label labelTitle="Password" labelStyle={{...labelStyle, ...additionalLabelsStyle}} /><FormInput isSecure={true} id="password" formOnChange={handleInputChange} /><Label labelTitle="Repeat Password" labelStyle={{...labelStyle, ...additionalLabelsStyle}} /><FormInput isSecure={true} id="repeatPassword" formOnChange={handleInputChange} /></View><LinearGradient style={styles.formButton} colors={[color.primaryLight, color.primaryDark]}><FormButton buttonTitle="Register" buttonStyle={submitStyle} buttonOnPress={() => console.log(registerData)} /></LinearGradient></ScrollView> );};Last, but not least the Header component, which I am trying to animate, is structured as follow:
const styles = StyleSheet.create<IStyle>({ main: { borderBottomLeftRadius: 40, borderBottomRightRadius: 40, alignItems: 'flex-end', justifyContent: 'flex-end', width: '100%', }, buttons: { flexDirection: 'row', marginBottom: 10, marginLeft: 30, marginRight: 30, }, verticalLine: { height: '100%', width: 1.4, backgroundColor: 'white', },});export const Header = (props: IHeaderProps) => { const navigation = useNavigation(); const onRegisterPress = () => navigation.navigate('Register'); const onSignInPress = () => navigation.navigate('Sign In'); const {headerStyle, showWallpaper} = props; return (<LinearGradient style={{...styles.main, ...headerStyle}} colors={[color.primaryLight, color.primaryDark]}> {showWallpaper && <Wallpaper />}<View style={styles.buttons}><FormButton buttonTitle="Sign In" buttonOnPress={onSignInPress} /><View style={styles.verticalLine} /><FormButton buttonTitle="Register" buttonOnPress={onRegisterPress} /></View></LinearGradient> );};This did result an animated component, however, a fairly weird one
I assume the problem that I am having is due to the image in the header component and maybe I should not be animating the whole Header component but just the Wallpaper? Any help would be very much appreciated, as I have little to no experience with this and I am shooting in the dark at the moment.