@epnsproject/sdk-uimobile v0.0.2

uimobile

Package for React Native based mobile apps.

How to use in your Mobile app?

Installation

  yarn add @epnsproject/sdk-uimobile

or

  npm install @epnsproject/sdk-uimobile  

Please read this carefullly

We need to install peer dependencies for @epnsproject/sdk-uimobile 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 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 patch-package
3. npx 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,

npx 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, parseApiResponse } from "@epnsproject/sdk-uimobile";

Inside JSX,

After you get the Notification data from the API, you parse it with the parseApiResponse helper

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

// fetch data, parse and set it in state
const apiResponse = await fetchNotifications(user, parseInt(pageSize));
const parsedResults = parseApiResponse(apiResponse.results);

setNotifData(parsedResults);

   <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