Prototype for a multistep form in react native using hooks

multiStepFormReactNative.js

/* eslint-disable no-shadow, react/prop-types */
/* This is just temporary as this onboarding needs to be refactored */

import React, { useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import { ScreenView } from '../../shared';
import { dimensions } from '../../../styles';
import { colors } from '../../../styles/colors';
import FirstName from './FirstName';

const styles = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
    flex: 1,
    backgroundColor: colors.black,
  },
  foreground1: {
    flex: 1,
    margin: dimensions.defaultSpace,
  },
  foreground2: {
    flex: 1,
    margin: dimensions.defaultSpace,
  },
  foreground3: {
    flex: 1,
    margin: dimensions.defaultSpace,
  },
});

// Changing order will change step order
const steps = [FirstName];

const Registration = () => {
  const [step, setStep] = useState(0);
  const [user, setUser] = useState({});

  const nextStep = () => {
    setStep(step + 1);
  };

  const prevStep = () => {
    setStep(step - 1);
  };

  const handleChange = (fieldName, value) => {
    if (user[fieldName] === value) {
      return;
    }

    setUser({ ...user, [fieldName]: value });
  };

  const CurrentStep = steps[step];

  return (
    <ScreenView>
      <Text style={styles.propmpt}>Tell Us About Yourself</Text>
      <CurrentStep
        prevStep={prevStep}
        nextStep={nextStep}
        handleChange={handleChange}
        {...user}
      />
    </ScreenView>
  );
};

export default Registration;