@pushprotocol/reactnative

reactnative

Package for React Native Views for React Native based mobile apps.

How to use in your Mobile app?

Installation

  yarn add @pushprotocol/reactnative

or

  npm install @pushprotocol/reactnative  

Please read this carefullly

We need to install peer dependencies for @pushprotocol/reactnative in your mobile app. And have it set up as below to make it run.

yarn add @react-native-masked-view/masked-view react-native-svg react-native-video react-native-youtube

Then for different types of react native apps use the below instructions.

FOR EXPO APPS

expo install expo-file-system
expo install expo-linear-gradient

Running IOS

cd ios && pod install

yarn ios

ViewPropTypes Error -

If only you get below error

Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'

ViewPropTypes Error Fix

1. In node_modules/react-native/index.js Replace the below code

// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
  invariant(
    false,
    "ColorPropType has been removed from React Native. Migrate to " +
      "ColorPropType exported from 'deprecated-react-native-prop-types'.",
 );
},
get EdgeInsetsPropType(): $FlowFixMe {
  invariant(
    false,
    "EdgeInsetsPropType has been removed from React Native. Migrate to " +
      "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
  );
},
get PointPropType(): $FlowFixMe {
  invariant(
    false,
    "PointPropType has been removed from React Native. Migrate to " +
     "PointPropType exported from 'deprecated-react-native-prop-types'.",
 );
},
get ViewPropTypes(): $FlowFixMe {
 invariant(
   false,
   "ViewPropTypes has been removed from React Native. Migrate to " +
     "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
 );
},

with below snippet

// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
  return require("deprecated-react-native-prop-types").ColorPropType
},
get EdgeInsetsPropType(): $FlowFixMe {
  return require("deprecated-react-native-prop-types").EdgeInsetsPropType
},
get PointPropType(): $FlowFixMe {
  return require("deprecated-react-native-prop-types").PointPropType
},
get ViewPropTypes(): $FlowFixMe {
  return require("deprecated-react-native-prop-types").ViewPropTypes
},

2. yarn add -D patch-package
3. yarn patch-package react-native
4. cd ios && pod install
5. yarn ios

Image.propTypes.resizeMode error

ERROR TypeError: undefined is not an object (evaluating '_reactNative.Image.propTypes.resizeMode')

then use this

Image.propTypes fix

After that,

yarn patch-package react-native-video
cd ios && pod install
yarn ios

Running Android

If you get this Error

Could not find com.yqritc:android-scalablevideoview:1.0.4.
		 Required by:
		         project :react-native-video

add this in android/build.gradle

jcenter() {
  content {
		includeModule("com.yqritc", "android-scalablevideoview")
	}
}

Run yarn android

FOR REACT NATIVE CLI GENERATED APPS

npx install-expo-modules
expo install expo-file-system
expo install expo-linear-gradient

cd iOS && pod install
yarn iOS

Similarly, if you get this ViewPropTypes error then use this fix

and ImagePropTypes error then use this fix

Notification Item View

Import in your file

import { Notification } from "@pushprotocol/reactnative";

Inside JSX,

After you get the Notification data from the API

const [notifData, setNotifData] = React.useState([]);

// fetch data, parse and set it in state
import * as PushAPI from '@pushprotocol/restapi';


const notifications = await PushAPI.user.getFeeds({
  user: 'eip155:5:0xD8634C39BBFd4033c0d3289C4515275102423681',
  env: 'dev',
  limit: parseInt(pageSize, 10)
});
setNotifData(notifications);

   <View style={styles.list}>
        {notifData.map((oneNotification: any, idx: number) => {
        const {cta, title, message, app, icon, image, blockchain, appbot } = oneNotification;
            return (
            <Notification
                key={idx}
                notificationTitle={title}
                notificationBody={message}
                cta={cta}
                app={app}
                icon={icon}
                image={image}
                chainName={blockchain}
                appbot={appbot}
                youTubeAPIKey={config.YOUTUBE_API_KEY} // pass your YOUTUBE_API_KEY here
            />
            );
        })}
    </View>

where

Prop	Type	Remarks
notificationTitle	string	Title of the notification (given during notification creation)
notificationBody	number	Message body of the notification (given during notification creation)
icon	string	Channel Icon (IPFS url) (given during channel setup)
app	string	Channel Name (given during channel setup)
cta	string	Call To Action Link (given during notification creation)
image	string	Any media link (given during notification creation)
appbot	string	is the notification is from EPNS bot the value is "1" else "0"
chainName	string	Can be anyone of the following blockchain networks on which the notification was sent - "ETH_MAINNET", "ETH_TEST_GOERLI", "POLYGON_MAINNET", "POLYGON_TEST_MUMBAI", "BSC_MAINNET, "BSC_TESTNET", "THE_GRAPH"
youTubeAPIKey	string	Your generated Youtube API key