@plusscommunities/pluss-core-app 1.3.0 → 1.4.3-beta.0

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.3.0",
+  "version": "1.4.3-beta.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {
+    "prepatch": "npm version prepatch --preid=beta",
     "patch": "npm version patch",
+    "preupload": "npm publish --access public --tag beta && rm -rf node_modules",
+    "preupload:p": "npm run prepatch && npm run preupload",
     "upload": "npm publish --access public && rm -rf node_modules",
     "upload:p": "npm run patch && npm run upload"
   },
@@ -12,31 +15,33 @@
   "license": "ISC",
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
-    "aws-amplify": "^3.4.0",
-    "aws-amplify-react-native": "^4.3.3",
-    "expo-av": "~9.1.2",
-    "expo-constants": "~10.1.3",
-    "expo-file-system": "~11.0.2",
-    "expo-image-manipulator": "~9.1.0",
-    "expo-image-picker": "~10.1.4",
-    "expo-linear-gradient": "~9.1.0",
-    "expo-media-library": "~12.0.2",
-    "expo-permissions": "~12.0.1",
-    "expo-screen-orientation": "~3.1.0",
-    "expo-sharing": "~9.1.2",
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-community/netinfo": "7.1.3",
+    "@react-native-picker/picker": "2.2.1",
+    "aws-amplify": "^4.3.11",
+    "aws-amplify-react-native": "^6.0.2",
+    "expo-av": "~10.2.0",
+    "expo-constants": "~13.0.0",
+    "expo-file-system": "~13.1.0",
+    "expo-image-manipulator": "~10.2.0",
+    "expo-image-picker": "~12.0.1",
+    "expo-linear-gradient": "~11.0.0",
+    "expo-media-library": "~14.0.0",
+    "expo-screen-orientation": "~4.1.1",
+    "expo-sharing": "~10.1.0",
     "expo-video-player": "^1.6.0",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.4",
     "mime-types": "^2.1.24",
     "moment": "^2.18.1",
-    "react": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react": "17.0.1",
+    "react-native": "0.64.3",
     "react-native-auto-height-image": "3.1.3",
     "react-native-elements": "^0.17.0",
     "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-vimeo-iframe": "^1.0.4",
-    "react-native-webview": "11.2.3",
+    "react-native-webview": "11.15.0",
     "react-native-youtube-iframe": "^2.2.1",
     "react-redux": "^5.0.5"
   },

package/src/apis/index.js

@@ -5,4 +5,6 @@ export * from './contactActions';
 export * from './eventActions';
 export * from './analyticsActions';
 export * from './notificationActions';
+export * from './typeActions';
 export { default as userActions } from './userActions';
+export { default as profileActions } from './profileActions';

package/src/apis/profileActions.js

@@ -0,0 +1,13 @@
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+const profileActions = {
+  getUserTagsBySite: site => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('profile', 'usertags/site', { site }),
+    });
+  },
+};
+
+export default profileActions;

package/src/apis/typeActions.js

@@ -0,0 +1,13 @@
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+export const typeActions = {
+  getUserTypes: site => {
+    const url = getUrl('types', 'getusertypes');
+    return authedFunction({
+      method: 'POST',
+      url,
+      data: { site },
+    });
+  },
+};

package/src/components/AudienceSelectorLauncher.js

@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react';
+import { StyleSheet } from 'react-native';
+import { connect } from 'react-redux';
+import { FormCardSectionOptionLauncher } from './FormCardSectionOptionLauncher';
+import { getMainBrandingColourFromState, TEXT_DARK } from '../colours';
+import { Services } from '../config';
+
+class AudienceSelectorLauncher extends PureComponent {
+  onPressAudience = () => {
+    const { user, audienceType, audienceTypeSelection } = this.props;
+
+    Services.navigation.navigate('audienceSelectorPage', {
+      site: user.site,
+      audienceType: audienceType || 'Custom',
+      audienceTypeSelection: audienceTypeSelection || [],
+      onChange: (audienceType, audienceTypeSelection) => {
+        if (this.props.onChange) this.props.onChange(audienceType, audienceTypeSelection);
+      },
+    });
+  };
+
+  render() {
+    const { style, textStyle, audienceTypeSelection } = this.props;
+    const selected =
+      audienceTypeSelection && audienceTypeSelection.length > 0
+        ? `Current selection: ${audienceTypeSelection.map(i => i.Title).join(', ')}`
+        : '';
+
+    return (
+      <FormCardSectionOptionLauncher
+        sectionStyle={[styles.audienceSection, style]}
+        textStyle={[styles.audienceText, textStyle]}
+        onPress={this.onPressAudience}
+        title="Audience"
+        description={selected}
+        value={selected ? 'Custom' : 'All Users'}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  audienceSection: {
+    paddingHorizontal: 0,
+  },
+  audienceText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    color: TEXT_DARK,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    user: state.user,
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const audienceSelectorLauncher = connect(mapStateToProps, {})(AudienceSelectorLauncher);
+export { audienceSelectorLauncher as AudienceSelectorLauncher };

package/src/components/AudienceSelectorPage.js

@@ -0,0 +1,344 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { TouchableOpacity, View, ScrollView, Text, StyleSheet } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { Services } from '../config';
+import { FormCard } from './FormCard';
+import { FormCardSection } from './FormCardSection';
+import { InlineButton } from './InlineButton';
+import Header from './Header';
+import { Spinner } from './Spinner';
+import { TEXT_DARK, COLOUR_GREEN, BG_GREY, INACTIVE_BUTTON, TEXT_LIGHT, getMainBrandingColourFromState } from '../colours';
+import { typeActions, profileActions } from '../apis';
+
+class AudienceSelectorPage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: false,
+      categories: [
+        {
+          name: 'All Primary Users',
+          key: 'resident',
+        },
+        {
+          name: 'All Staff Users',
+          key: 'staff',
+        },
+        {
+          name: 'All Linked Users',
+          key: 'family',
+        },
+      ],
+      types: [],
+      tags: [],
+      combinedList: [],
+      seeAll: false,
+    };
+  }
+
+  componentDidMount = async () => {
+    try {
+      this.setState({ loading: true });
+      await this.getUserTypes();
+      await this.getUserTags();
+      this.setState({ loading: false, combinedList: this.getAvailableAudienceTags() });
+    } catch (error) {
+      console.error('loading types error', error);
+      this.setState({ loading: false });
+    }
+  };
+
+  getUserTypes = async () => {
+    const { data } = await typeActions.getUserTypes(this.props.site);
+    data.forEach(e => {
+      e.name = e.category ? `(${e.category[0].toUpperCase() + e.category.substring(1)}) ${e.displayName}` : e.displayName;
+      e.key = e.typeName;
+    });
+    // console.log('getUserTypes', data);
+    this.setState({ types: data });
+  };
+
+  getUserTags = async () => {
+    const { data } = await profileActions.getUserTagsBySite(this.props.site);
+    data.forEach(e => {
+      e.name = e.Title;
+      e.key = e.Id;
+    });
+    // console.log('getUserTags', data);
+    this.setState({ tags: data });
+  };
+
+  getAvailableAudienceTags = () => {
+    const { categories, types, tags } = this.state;
+    const { audienceTypeSelection } = this.props;
+
+    const categoryTags = categories.map(c => {
+      const Id = `category_${c.key}`;
+      return {
+        AudienceType: 'Category',
+        AudienceTypeSelection: c.key,
+        Id,
+        Title: c.name,
+        Selected: audienceTypeSelection.some(i => i.Id === Id),
+      };
+    });
+    const userTypeTags = types.map(t => {
+      const Id = `userType_${t.typeName}`;
+      return {
+        AudienceType: 'UserType',
+        AudienceTypeSelection: t.typeName,
+        Id,
+        Title: `User Type: ${t.displayName}`,
+        Selected: audienceTypeSelection.some(i => i.Id === Id),
+      };
+    });
+    const userTagTags = tags.map(t => {
+      const Id = `userTag_${t.Id}`;
+      return {
+        AudienceType: 'UserTags',
+        AudienceTypeSelection: t.Id,
+        Id,
+        Title: `User Tag: ${t.Title}`,
+        Selected: audienceTypeSelection.some(i => i.Id === Id),
+      };
+    });
+    return [...categoryTags, ...userTypeTags, ...userTagTags];
+  };
+
+  onPressBack = () => {
+    Services.navigation.goBack();
+  };
+
+  onSelectAll = () => {
+    const newList = [...this.state.combinedList];
+    newList.forEach(i => (i.Selected = false));
+    this.setState({ combinedList: newList });
+  };
+
+  onSeeAll = () => {
+    this.setState({ seeAll: !this.state.seeAll });
+  };
+
+  onToggleAudienceOption = option => {
+    const newList = [...this.state.combinedList];
+    const selected = newList.find(i => i.Id === option.Id);
+    if (selected) {
+      selected.Selected = !selected.Selected;
+      this.setState({ combinedList: newList });
+    }
+  };
+
+  onDone = () => {
+    if (this.props.onChange) {
+      const { combinedList } = this.state;
+      const selected = combinedList.filter(i => i.Selected);
+      if (selected && selected.length > 0) {
+        this.props.onChange('Custom', selected);
+      } else {
+        this.props.onChange(null, null);
+      }
+    }
+    Services.navigation.goBack();
+  };
+
+  renderOption(label, selected, onSelect, key = null, hasUnderline = true) {
+    return (
+      <TouchableOpacity key={key} onPress={onSelect}>
+        <FormCardSection hasUnderline={hasUnderline} hasContent>
+          <View style={styles.labelContainer}>
+            <Text style={styles.labelText}>{label}</Text>
+            <Icon
+              name="check-circle"
+              type="font-awesome"
+              iconStyle={[{ color: INACTIVE_BUTTON, fontSize: 20 }, selected && { color: COLOUR_GREEN }]}
+            />
+          </View>
+        </FormCardSection>
+      </TouchableOpacity>
+    );
+  }
+
+  renderSelectAll() {
+    const { combinedList, loading } = this.state;
+    const allSelected = !combinedList.find(i => i.Selected);
+    if (loading) return null;
+
+    return (
+      <FormCard style={styles.selectAllContainer}>{this.renderOption('All Users', allSelected, this.onSelectAll, null, false)}</FormCard>
+    );
+  }
+
+  renderSelection() {
+    const { loading, combinedList, seeAll } = this.state;
+    if (loading) return null;
+
+    const selectedText = combinedList
+      .filter(i => i.Selected)
+      .map(i => i.Title)
+      .join(', ');
+    const hasSelected = !_.isEmpty(selectedText);
+
+    return (
+      <View style={styles.selectionContainer}>
+        <View style={styles.selectionContainerInner}>
+          <Text style={styles.selectionTitle}>or select from below</Text>
+          {hasSelected ? (
+            <TouchableOpacity onPress={this.onSeeAll}>
+              <Text style={styles.seeAllButton}>{seeAll ? 'See less' : 'See all'}</Text>
+            </TouchableOpacity>
+          ) : null}
+        </View>
+        {hasSelected ? (
+          <Text style={styles.selectionText} numberOfLines={seeAll ? null : 1}>{`Current selection: ${selectedText}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  renderTips() {
+    return (
+      <View style={styles.tipContainer}>
+        <Text style={styles.tipText}>
+          <Text style={{ fontFamily: 'sf-semibold' }}>Tip: </Text>
+          Group your users using User Tags from your website Community Manager
+        </Text>
+      </View>
+    );
+  }
+
+  renderAvailableAudiences() {
+    const { loading, combinedList } = this.state;
+
+    return (
+      <ScrollView style={styles.availableScrollContainer} contentContainerStyle={styles.availabelScrollContent}>
+        <FormCard>
+          {combinedList.map((option, index) => {
+            const notLast = index < combinedList.length - 1;
+            return this.renderOption(option.Title, option.Selected, () => this.onToggleAudienceOption(option), index, notLast);
+          })}
+        </FormCard>
+        {loading ? <Spinner /> : null}
+        {this.renderTips()}
+      </ScrollView>
+    );
+  }
+
+  renderButtons() {
+    const { loading } = this.state;
+
+    return (
+      <View style={styles.doneButtonContainer}>
+        <InlineButton
+          color={loading ? INACTIVE_BUTTON : this.props.colourBrandingMain}
+          onPress={this.onDone}
+          touchableStyle={styles.doneButton}
+          fillTouchable
+          large
+          disabled={loading}
+        >
+          Done
+        </InlineButton>
+      </View>
+    );
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Header leftIcon="angle-left" onPressLeft={this.onPressBack} text={'Select Audience'} />
+        {this.renderSelectAll()}
+        {this.renderSelection()}
+        {this.renderAvailableAudiences()}
+        {this.renderButtons()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: BG_GREY,
+  },
+  selectAllContainer: {
+    marginTop: 20,
+  },
+  selectionContainer: {
+    padding: 20,
+  },
+  selectionContainerInner: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  selectionTitle: {
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: TEXT_DARK,
+  },
+  selectionText: {
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: TEXT_DARK,
+    marginTop: 10,
+  },
+  seeAllButton: {
+    marginLeft: 10,
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: TEXT_LIGHT,
+  },
+  availableScrollContainer: {
+    flex: 1,
+  },
+  availabelScrollContent: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+  },
+  tipContainer: {
+    padding: 10,
+  },
+  tipText: {
+    fontSize: 14,
+    fontFamily: 'sf-regular',
+    color: TEXT_DARK,
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  labelText: {
+    fontFamily: 'sf-medium',
+    fontSize: 16,
+    color: TEXT_DARK,
+  },
+  description: {
+    marginTop: 5,
+    fontSize: 14,
+    fontFamily: 'sf-regular',
+    color: TEXT_DARK,
+  },
+  doneButtonContainer: {
+    backgroundColor: '#fff',
+    marginTop: 1,
+    flexDirection: 'row',
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  doneButton: {
+    flex: 1,
+    marginHorizontal: 6,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(AudienceSelectorPage);

package/src/components/CommentReply.js

@@ -28,7 +28,7 @@ class CommentReply extends Component {
   componentDidMount() {
     if (this.props.commentSection) {
       this.setState({
-        commentsLoading: this.props.commentSection.getWrappedInstance().isLoading(),
+        commentsLoading: this.props.commentSection.isLoading(),
       });
     }
   }
@@ -93,13 +93,13 @@ class CommentReply extends Component {
     });
     Keyboard.dismiss();
     if (this.props.commentSection) {
-      this.props.commentSection.getWrappedInstance().startedAddingComment();
+      this.props.commentSection.startedAddingComment();
     }
     reactionActions
       .addComment(this.props.entityId, this.props.entityType, this.props.entityName, this.props.site, text, image)
       .then(res => {
         if (this.props.commentSection) {
-          this.props.commentSection.getWrappedInstance().commentAdded(res.data);
+          this.props.commentSection.commentAdded(res.data);
         }
         this.setState({
           addingComment: false,
@@ -125,7 +125,7 @@ class CommentReply extends Component {
     if (this.state.uploadingCommentImage || !_.isEmpty(this.state.commentImageInput)) {
       return;
     }
-    this.commentImageUploader.getWrappedInstance().showUploadMenu();
+    this.commentImageUploader.showUploadMenu();
   }
 
   renderImageAttachment() {
@@ -329,5 +329,5 @@ const mapStateToProps = state => {
   return { user };
 };
 
-const commentReply = connect(mapStateToProps, {}, null, { withRef: true })(CommentReply);
+const commentReply = connect(mapStateToProps, {}, null, { forwardRef: true })(CommentReply);
 export { commentReply as CommentReply };

package/src/components/CommentSection.js

@@ -7,7 +7,11 @@ import { Icon } from 'react-native-elements';
 import { getPluralS, getThumb300, get1400, getSiteSettingFromState } from '../helper';
 import { getMainBrandingColourFromState, TEXT_DARKEST, BG_GREY, TEXT_LIGHT, LINEGREY } from '../colours';
 import { reactionActions, notificationActions } from '../apis';
-import { ConfirmPopup, ProfilePic, ImagePopup, InlineButton, Spinner } from './';
+import { ConfirmPopup } from './ConfirmPopup';
+import { ProfilePic } from './ProfilePic';
+import { ImagePopup } from './ImagePopup';
+import { InlineButton } from './InlineButton';
+import { Spinner } from './Spinner';
 
 class CommentSection extends Component {
   constructor(props) {
@@ -28,7 +32,6 @@ class CommentSection extends Component {
 
   componentDidMount() {
     this.getNotificationSate();
-    // setTimeout(this.getNotificationSate, 3000);
 
     if (!_.includes(this.props.user.hidden, 'viewComment')) {
       this.getComments();
@@ -97,7 +100,7 @@ class CommentSection extends Component {
   }
 
   onGoToAdd() {
-    this.props.commentReply.getWrappedInstance().focusInput();
+    this.props.commentReply.focusInput();
   }
 
   onMute = () => {
@@ -172,7 +175,7 @@ class CommentSection extends Component {
         commentsLoading: true,
       });
       if (this.props.commentReply) {
-        this.props.commentReply.getWrappedInstance().loadingStarted();
+        this.props.commentReply.loadingStarted();
       }
       this.loadComments();
     }
@@ -206,7 +209,7 @@ class CommentSection extends Component {
         },
       );
       if (this.props.commentReply) {
-        this.props.commentReply.getWrappedInstance().loadingCompleted();
+        this.props.commentReply.loadingCompleted();
       }
       if (this.props.live) {
         this.loadTimer = setTimeout(() => {
@@ -612,5 +615,5 @@ const mapStateToProps = state => {
   };
 };
 
-const commentSection = connect(mapStateToProps, {}, null, { withRef: true })(CommentSection);
+const commentSection = connect(mapStateToProps, {}, null, { forwardRef: true })(CommentSection);
 export { commentSection as CommentSection };

package/src/components/FormCardSectionOptionLauncher.js

@@ -2,23 +2,26 @@ import React, { PureComponent } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { connect } from 'react-redux';
-import { TEXT_DARK, getMainBrandingColourFromState } from '../colours';
+import { TEXT_DARK, TEXT_LIGHT, getMainBrandingColourFromState } from '../colours';
 import { FormCardSection } from './FormCardSection';
 
 class FormCardSectionOptionLauncher extends PureComponent {
   render() {
+    const { onPress, sectionStyle, textStyle, title, description, value, icon, colourBrandingMain } = this.props;
+
     return (
-      <TouchableOpacity onPress={this.props.onPress}>
-        <FormCardSection hasContent sectionStyle={this.props.sectionStyle}>
+      <TouchableOpacity onPress={onPress}>
+        <FormCardSection hasContent sectionStyle={sectionStyle}>
           <View style={styles.container}>
-            <Text style={[styles.text, { marginRight: 16, flex: 1 }, this.props.textStyle]}>{this.props.title}</Text>
-            <Text style={[styles.text, { marginRight: 16 }]}>{this.props.value}</Text>
+            <Text style={[styles.text, { marginRight: 16, flex: 1 }, textStyle]}>{title}</Text>
+            <Text style={[styles.text, { marginRight: 16 }]}>{value}</Text>
             <Icon
-              name={this.props.icon ? this.props.icon : 'angle-right'}
+              name={icon ? icon : 'angle-right'}
               type="font-awesome"
-              iconStyle={[styles.text, { fontSize: 20, color: this.props.colourBrandingMain }]}
+              iconStyle={[styles.text, { fontSize: 20, color: colourBrandingMain }]}
             />
           </View>
+          {description ? <Text style={styles.description}>{description}</Text> : null}
         </FormCardSection>
       </TouchableOpacity>
     );
@@ -36,6 +39,12 @@ const styles = {
     fontSize: 17,
     color: TEXT_DARK,
   },
+  description: {
+    fontFamily: 'sf-regular',
+    fontSize: 15,
+    color: TEXT_LIGHT,
+    marginTop: 8,
+  },
 };
 
 const mapStateToProps = state => {

package/src/components/ImageUploadProgress.js

@@ -5,7 +5,7 @@ import { Spinner } from './Spinner';
 
 class ImageUploadProgress extends Component {
   onRetryUpload = (imageUri, uploadUri) => {
-    this.props.uploader.getWrappedInstance().retryUpload(imageUri, uploadUri);
+    this.props.uploader.retryUpload(imageUri, uploadUri);
   };
 
   render() {

package/src/components/ImageUploader.js

@@ -3,7 +3,7 @@ import { View, ScrollView, TouchableOpacity, Text, Platform, Linking, Modal, Dim
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
 import _ from 'lodash';
-import * as Permissions from 'expo-permissions';
+import { Camera } from 'expo-camera';
 import * as MediaLibrary from 'expo-media-library';
 import * as ImageManipulator from 'expo-image-manipulator';
 import * as ImagePicker from 'expo-image-picker';
@@ -60,7 +60,7 @@ class ImageUploader extends Component {
   }
 
   loadLocalAlbums = async () => {
-    const hasPermission = await Permissions.getAsync(Permissions.CAMERA_ROLL);
+    const hasPermission = await MediaLibrary.getPermissionsAsync();
     if (!hasPermission.granted) return;
 
     this.setState({ loadingLocalFolders: true }, async () => {
@@ -254,8 +254,8 @@ class ImageUploader extends Component {
   }
 
   askPermissionsAsync = async () => {
-    const cameraPermission = await Permissions.askAsync(Permissions.CAMERA);
-    const rollPermission = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+    const cameraPermission = await Camera.requestCameraPermissionsAsync();
+    const rollPermission = await MediaLibrary.requestPermissionsAsync();
     if (cameraPermission.status !== 'granted' || rollPermission.status !== 'granted') {
       this.showWarningPopup(cameraPermission.status !== 'granted', rollPermission.status !== 'granted');
       return false;
@@ -786,4 +786,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps, { stockImagesLoaded, imageLibraryLoaded }, null, { withRef: true })(ImageUploader);
+export default connect(mapStateToProps, { stockImagesLoaded, imageLibraryLoaded }, null, { forwardRef: true })(ImageUploader);

package/src/components/PlussChat.js

@@ -158,7 +158,7 @@ class PlussChat extends Component {
   };
 
   showUploadMenu() {
-    this.imageUploader.getWrappedInstance().showUploadMenu();
+    this.imageUploader.showUploadMenu();
   }
 
   onFocusInput = () => {

package/src/components/VideoPopup.js

@@ -3,7 +3,8 @@ import { Platform, View, Modal, TouchableOpacity, StyleSheet } from 'react-nativ
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBarHeight, getCompressed, imageExists } from '../helper';
 import { Pl60Icon } from '../fonts';
-import { SharingTools, MediaPlayer } from './';
+import { SharingTools } from './SharingTools';
+import { MediaPlayer } from './MediaPlayer';
 
 class VideoPopup extends Component {
   constructor(props) {

package/src/components/expo-image-picker-multiple/ImageBrowser.js

@@ -3,7 +3,7 @@ import { StyleSheet, View, FlatList, Dimensions, ActivityIndicator, Platform } f
 import _ from 'lodash';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import * as MediaLibrary from 'expo-media-library';
-import * as Permissions from 'expo-permissions';
+import { Camera } from 'expo-camera';
 import { isVideo } from '../../helper';
 import ImageTile from './ImageTile';
 
@@ -49,8 +49,8 @@ export default class ImageBrowser extends React.Component {
   };
 
   getPermissionsAsync = async () => {
-    const { status: camera } = await Permissions.askAsync(Permissions.CAMERA);
-    const { status: cameraRoll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+    const { status: camera } = await Camera.requestCameraPermissionsAsync();
+    const { status: cameraRoll } = await MediaLibrary.requestPermissionsAsync();
     this.setState({
       hasCameraPermission: camera === 'granted',
       hasCameraRollPermission: cameraRoll === 'granted',

package/src/components/index.js

@@ -36,6 +36,7 @@ export * from './FontScalePopup';
 export * from './FontScaleButton';
 export * from './UserListPopup';
 export * from './Reactions';
+export * from './AudienceSelectorLauncher';
 export { default as EmptyStateWidget } from './EmptyStateWidget';
 export { default as EmptyStateMain } from './EmptyStateMain';
 export { default as LoadingStateWidget } from './LoadingStateWidget';
@@ -48,3 +49,4 @@ export { default as PlussChat } from './PlussChat';
 export { default as PositionedImage } from './PositionedImage';
 export { default as FormattedText } from './FormattedText';
 export { default as MediaPlayer } from './MediaPlayer';
+export { default as AudienceSelectorPage } from './AudienceSelectorPage';