[BUG]: react-paypal-js doesn't seem to work on React Native's <view> tag but works on <div> tag in reactjs.

[vanfrancisco1]

Is there an existing issue for this?

• [x] I have searched the existing issues.

🐞 Describe the Bug

Hi, It seems like react-paypal-js doesn't seem to work on React Native's <view> tag and returns an error. Instead, it encourages us to use a <div> but div tag is not allowed on a react native project. Is there a workaround on this or is it not implemented yet as of now?

😕 Current Behavior

When I placed the component <PayPalScriptProvider> and <PayPalButtons> in the react native project, it doesn't show any errors in particular. However, once I run react native project, it returns the error Invariant Violation: View config getter callback for component 'div' must be a function (received 'undefined'). Make sure to start component names with a capital letter.

This is my sample code for the paypal implementation :

import React, { useState } from "react";
import { TextInput, Modal, StyleSheet, Text, View, TouchableOpacity } from "react-native";
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js"
const App = () => {
  return (
    <View>
      <PayPalScriptProvider options={{ "client-id": "test" }}>
        <PayPalButtons style={{ layout: "horizontal" }} />
      </PayPalScriptProvider>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  },
  input: {
    height: 50,
    margin: 10,
    width: 150,
    borderWidth: 1,
    padding: 10,
    textAlign : 'center',
    borderRadius: 10
  }
});
const ProfileStyles = StyleSheet.create({
  header:{
    backgroundColor: "orange",
  },
  headerContent:{
    padding:30,
    alignItems: 'center',
  },
  avatar: {
    width: 130,
    height: 130,
    borderRadius: 63,
    borderWidth: 4,
    borderColor: "white",
    marginBottom:10,
  },
  name:{
    fontSize:22,
    color:"#FFFFFF",
    fontWeight:'600',
  },
  profileDetail:{
    alignSelf: 'center',
    marginTop:210,
    alignItems: 'center',
    flexDirection: 'row',
    position:'absolute',
    backgroundColor: "#ffffff"
  },
  detailContent:{
    margin:10,
    alignItems: 'center'
  },
  title:{
    fontSize:15,
    color: "orange",
  },
  count:{
    fontSize:13,
  },
  bodyContent: {
    flex: 1,
    alignItems: 'center',
    padding:30,
    marginTop:20
  },
  textInfo:{
    fontSize:18,
    marginTop:20,
    color: "#696969",
  },
  buttonContainer: {
    marginTop:10,
    height:45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom:20,
    width:250,
    borderRadius:30,
    backgroundColor: "orange",
  },
  description:{
    fontSize:20,
    color: "#00CED1",
    marginTop:10,
    textAlign: 'center'
  },
});


export default App;

🤔 Expected Behavior

My project should render the paypal buttons in my android emulator without no problems.

🔬 Minimal Reproduction

1. I installed react-paypal-js via `npm install @paypal/react-paypal-js`.
2. I imported the package via `import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js"`
3. I placed the `usage` sample code inside the `app()` function. 
4. run the project via `npx react-native run-android` 
5. returns the error on render `Invariant Violation: View config getter callback for component 'div' must be a function (received 'undefined'). Make sure to start component names with a capital letter.`

🌍 Environment

| Software         | Version(s) |
| ---------------- | ---------- |
| react-paypal-js  | Latest Version |
| Browser          | React Android  |
| Operating System | Windows    |

Relevant log output

None

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

➕ Anything else?

None

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[xjamundx]

What's our react native story?

On Sat, Apr 23, 2022, 7:07 PM github-actions[bot] @.***> wrote:

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

— Reply to this email directly, view it on GitHub https://github.com/paypal/react-paypal-js/issues/256#issuecomment-1107686023, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB4C7ZJAIV74JL2SR4P2E3VGSUEPANCNFSM5QIFNIHA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[vanfrancisco1]

I've been trying to use react-paypal-js directly on our react native mobile app but apparently, it doesn't seem to work as the error suggests that we should use a<div> but div doesn't work on react native.

However 2 months ago, I made a web-based built on ReactJS then use a react native web browser component to be viewed on the mobile app instead.

I would really like to suggest for it to be working on react native mobile apps rather than using a webview component since it is very tedious to do on implementation.

[sheggietyn]

Any Update yet guys.. i'm also having the same issues

Thanks

[vanfrancisco1]

Until now, there's still no fix. It would be a big help towards react native devs in terms of implementing payment solutions.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[vanfrancisco1]

Bump

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[BaiXiaoYan]

Is there any update on this?