Check the render method of `Button`

I am stuck with this every time I enable this line it crashes for just this button. Any ideas? Thanks in advance!

function Button({ title }) {
    return (
        <TouchaleOpacity style={styles.button}>
            <View>
                <Text style={styles.text}>{title}</Text>
            </View>
        </TouchaleOpacity>
    );
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: colors.primary,
        borderRadius: 25,
        justifyContent: "center",
        alignItems: "center",
        padding: 15,
        marginVertical: 10,
    },
    text: {
        color: colors.white,
        fontSize: 18,
    },
})
function LoginScreen(props) {
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();

    return (
        <Screen>
            <Image
                style={styles.logo}
                source={require("../assets/logo-red.png")} />
            <AppTextInput
                autoCapitalize="none"
                autoCorrect={false}
                icon="email"
                keyboardType="email-address"
                name="email"
                placeholder="Email                                                                     "
                // iOS only feature from keychain
                textContentType="emailAddress"
            />
            <AppTextInput
                autoCapitalize="none"
                autoCorrect={false}
                icon="lock"
                name="password"
                placeholder="Password                                                                  "
                secureTextEntry
                textContentType="password"
            />
            {/* <SubmitButton title="Login" /> */}
            {/* <Button title="Login"></Button> */}
        </Screen>
    );
}

const styles = StyleSheet.create({
    container: {
        padding: 10,
    },
    logo: {
        width: 80,
        height: 80,
        alignSelf: "center",
        marginTop: 50,
        marginBottom: 20,
    },
})
export default LoginScreen;
<Button title="Login"></Button>

Every time I insert/enable this line it crashes.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of Button.

Do you need to export your Button function?

export default Button;

TouchaleOpacity misspelled! OMG

3 Likes