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 />
)
}
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