1

I am using this package in react native (react-native-login-screen) Here is my code:

import React, { Component } from "react";
import { Text, StyleSheet, View, Button, TouchableOpacity } from "react-native";
import LoginScreen, { SocialButton } from "react-native-login-screen";
import { Logo, Facebook, Twitter } from "./imgs";

const HomeScreen = (props) => {
  return (
    <View>
      <LoginScreen
        logoImageSource={Logo}
        onLoginPress={() => {}}
        onSignupPress={() => {}}
        onEmailChange={(email: string) => {}}
        onPasswordChange={(password: string) => {}}
      >
        <SocialButton text="Continue with Google" onPress={() => {}} />
        <SocialButton
          text="Continue with Facebook"
          imageSource={Facebook}
          onPress={() => {}}
        />
        <SocialButton
          text="Continue with Twitter"
          imageSource={Twitter}
          onPress={() => {}}
        />
      </LoginScreen>
      ;
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
  },
});

export default HomeScreen;

The page was rendering fine without the package being used, and just some text, but after using this package, I keep getting that error.

I am using javascript and not typescript, but I am not sure why I am getting this error

Thanks

FattyDev1
  • 56
  • 10
  • Does this answer your question? [Invariant Violation: Text strings must be rendered within a component](https://stackoverflow.com/questions/52368342/invariant-violation-text-strings-must-be-rendered-within-a-text-component) – Youssouf Oumar Dec 11 '22 at 11:39

1 Answers1

1

Have you tried to remove the semicolon(;) below the closing tag of LoginScreen?

React throws this error when there is a mistyped letter without tag.

Saul Lee
  • 71
  • 3