Как добавить в этот код опцию обмена изображениями?

Question

Это приложение на базе React Native. Ниже приведен код файла с именем «NotificationScreen. js». Я хочу добавить в этот код опцию обмена изображениями. Когда я запускаю это приложение на своем устройстве, я вижу изображение на экране уведомлений. Мне сказали добавить в WhatsApp долю для этого изображения. Я абсолютный новичок. Пожалуйста, не судите.

import React, {Component} from 'react';
import Accordion from 'react-native-collapsible/Accordion';
import {colors, fonts} from '../../styles';
import {
  StyleSheet,
  View,
  Text,
  ImageBackground,
  ScrollView,
  Image,
} from 'react-native';
 import Share from "react-native-share";

  
import {getSectionData} from '../CloudMessaging/CloudMessaging';
import LinearGradient from 'react-native-linear-gradient';
import Unorderedlist from 'react-native-unordered-list';
import Icon from 'react-native-vector-icons/AntDesign';

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    //flex: 1,
    //alignItems: 'center',
    //justifyContent: 'space-around',
  },
  bgImage: {
    flex: 1,
    width: 395,
    paddingHorizontal: -20,
  },
  section: {
    flex: 1,
    paddingHorizontal: 20,
  },

  sectionLarge: {
    flex: 2,
    justifyContent: 'space-around',
  },
  sectionHeader: {
    marginBottom: 8,
  },
  priceContainer: {
    alignItems: 'center',
  },
  description: {
    padding: 15,
    lineHeight: 25,
  },
  titleDescription: {
    color: '#19e7f7',
    textAlign: 'center',
    fontFamily: fonts.primaryRegular,
    fontSize: 15,
  },
  title: {
    marginTop: 30,
  },
  tabBarItemContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 2,
    borderBottomColor: colors.white,
    paddingHorizontal: 10,
  },
  tabBarIcon: {
    width: 23,
    height: 23,
  },
  tabBarIconFocused: {
    tintColor: colors.primary,
  },
  headerContainer: {
    height: 70,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 10,
  },
  headerImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    height: 70,
    resizeMode: 'cover',
  },
  headerText: {
    fontFamily: fonts.primaryBold,
    color: 'rgb(239, 103, 86)',
    fontSize: 15,
    padding: 10,
    lineHeight: 30,
  },
  content: {
    fontFamily: fonts.primaryBold,
    color: 'rgb(239, 103, 86)',
    fontSize: 15,
    padding: 10,
    lineHeight: 30,
    marginLeft: 15,
  },
}
);


export default class Collapsible extends React.Component {
  state = {
    activeSections: [],
    sectionData: [],
    loaded: false,
  };

  componentWillMount(): void {
    console.log('inside component Did Mount of Collapsible');
    getSectionData().then(secData => {
      console.log('constructor secData: ' + secData);
      this.setState({loaded: true});
      this.setState({sectionData: secData.reverse()});
      return secData;
    });
  }

  _renderSectionTitle = section => {
    console.log('rendering section  title');
    return (
      <View style={styles.content}>
        <Text>{section.body}</Text>
      </View>
    );
  };

  _renderHeader(section, index, isActive, sections) {
    let unicodeType = isActive ? '0x2043' : '0x2023';
    return (
      <LinearGradient
        colors={['rgb(37, 44, 59)', 'rgb(37, 44, 59)']}
        style={{
          marginTop: 10,
          marginLeft: 30,
          marginRight: 30,
          backgroundColor: 'white',
          borderRadius: 10,
          borderWidth: 1,
          borderColor: 'lightgrey',
        }}>
        <Unorderedlist bulletUnicode={unicodeType} color="rgb(239, 103, 86)">
          <Text style={styles.headerText}>{section.title}</Text>
        </Unorderedlist>
      </LinearGradient>
    );
  }

  _renderContent(section, i, isActive, sections) {
    if (section.hasOwnProperty('picture')) {
      console.log('inside if part');
      return (
        <LinearGradient colors={['white', colors.white]}>
          <Text style={styles.content}>{section.body}</Text>
          <Image
            source={{uri: section.picture}}
            style={{width: 388, height: 200, marginLeft: 3}}
          />

        </LinearGradient>
      );
    } else {
      return (
        <LinearGradient colors={['white', colors.white]}>
          <Text style={styles.content}>{section.body}</Text>
        </LinearGradient>
      );
    }
  }


  render() {
    if (!this.state.loaded) {
      return <Text> Loading ... </Text>;
    }
    if (this.state.sectionData.length == 0 && this.state.loaded) {
      return <Text>No Messages</Text>;
    } else {
      console.log('Render state : ' + JSON.stringify(this.state.sectionData));
      return (
        <ScrollView style={styles.container}>
          <Accordion
            sections={this.state.sectionData}
            activeSections={this.state.activeSections}
            //renderSectionTitle={this._renderSectionTitle}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
            onChange={this._updateSections}
          />
        </ScrollView>
      );
    }
  }





}