react native : Create component to minimize lines of code

Question

In my example I am trying to create a component called nextButton from the following code and then I can use it. Where's the problem with what I did?

export const MainScreen = () => {

const nextButton =() => {
    return (
  <TouchableOpacity
          style={{ alignSelf: 'center' }}
          onPress={() => verifyNavigate()}
        >
          <LinearGradient
            colors={[Colors.Grayish_blue,
              Colors.Oval_blue,
              Colors.Dark_blue]}
            style={styles.linearGradientStyle}
          >
            <Text 
            style={styles.nextText}>next</Text>
          </LinearGradient>
        </TouchableOpacity>
         )
    }


return (
<nextButton />

  )
}

Answer 1

Your version of nextButton is just a function and not a component. You can't create a component inside a component but you can create multiple components in a single file.

you can call it as function in your MainScreen return

{nextButton()}

If you want to use it as a component you need to move it outside the MainScreen Component body

export const NextButton = () => {
  return (
    <TouchableOpacity
      style={{ alignSelf: "center" }}
      onPress={() => verifyNavigate()}
    >
      <LinearGradient
        colors={[Colors.Grayish_blue, Colors.Oval_blue, Colors.Dark_blue]}
        style={styles.linearGradientStyle}
      >
        <Text style={styles.nextText}>next</Text>
      </LinearGradient>
    </TouchableOpacity>
  );
};

export const MainScreen = () => {
  return <NextButton />
};

And do remember best practice is to use a component name starting with capital letter so rename nextButton with NextButton.

If this works for you kindly upvote the answer