react-native-elements#Header JavaScript Examples

render(){
      return(
        <View style ={styles.container}>
           <Header 
                backgroundColor = {'pink'}
                centerComponent = {{
                    text : 'Bed Time Stories',
                    style : { color: 'white', fontSize: 20}
                }}
            />
          <View styles ={{height:20,width:'100%'}}>
              <SearchBar
              placeholder="Type Here..."
              onChangeText={text => this.SearchFilterFunction(text)}
              onClear={text => this.SearchFilterFunction('')}
              value={this.state.search}
            />
          </View>
          
          <FlatList
                data={this.state.search === "" ?  this.state.allStories: this.state.dataSource}
                renderItem={({ item }) => (
                  <View style={styles.itemContainer}>
                    <Text>  Title: {item.title}</Text>
                    <Text>  Author : {item.author}</Text>
                  </View>
                )}
                keyExtractor={(item, index) => index.toString()}
                /> 
          
          
          
        </View>  
      );      
    }

render(){
    return(
        <Header
          leftComponent={<Icon name='bars' type='font-awesome' color='#696969'  onPress={() => this.props.navigation.toggleDrawer()}/>}
          centerComponent={{ text: this.props.title, style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
          rightComponent={<this.BellIconWithBadge {...this.props}/>}
          backgroundColor = "#eaf8fe"
        />

)
}

render(){
    return(
        <Header
          leftComponent={<Icon name='bars' type='font-awesome' color='#ffffff'  onPress={() => this.props.navigation.toggleDrawer()}/>}
          centerComponent={{ text: this.props.title, style: { color: '#ffffff', fontSize:20,fontWeight:"bold", } }}
          rightComponent={<this.BellIconWithBadge {...this.props}/>}
          backgroundColor = "#32867d"
        />

)
}

render() {
      const { t } = this.props;
        return(
            <View style={{
                backgroundColor: this.props.screenProps.theme.backgroundColour,
                flex: 1,
            }}>
                <Header
                    containerStyle={{ borderBottomWidth:0, borderBottomColor:'transparent' }}
                    leftComponent={{
                        icon: 'navigate-before',
                        color: this.props.pageNum === 0 ? this.props.screenProps.theme.notVeryVisibleColour : this.props.screenProps.theme.primaryColour,
                        onPress: () => {
                            if (this.props.pageNum <= 0) {
                                return;
                            }

                            this.props.changePage(this.props.pageNum - 1);
                        }
                    }}
                    centerComponent={{
                        text: `${t('page')} ${this.props.pageNum + 1} / ${this.getMaxPage()}`,
                        style: {
                            color: this.props.screenProps.theme.primaryColour,
                            fontSize: 16,
                            fontFamily: 'Montserrat-SemiBold'
                        }
                    }}
                    rightComponent={{
                        icon: 'navigate-next',
                        color: this.props.pageNum === this.getMaxPage() - 1 ? this.props.screenProps.theme.notVeryVisibleColour : this.props.screenProps.theme.primaryColour,
                        onPress: () => {
                            if (this.props.pageNum >= this.getMaxPage() - 1) {
                                return;
                            }

                            this.props.changePage(this.props.pageNum + 1);
                        }
                    }}
                    backgroundColor={this.props.screenProps.theme.backgroundColour}
                />

                <List style={{
                    backgroundColor: this.props.screenProps.theme.backgroundColour,
                    borderTopWidth: 0
                }}>
                    <FlatList
                        style={{paddingLeft: 25, paddingRight: 25}}
                        extraData={this.state.index}
                        data={this.props.transactions}
                        keyExtractor={item => item.hash}
                        renderItem={({item}) => (

                            <ListItem
                                title={prettyPrintAmount(Math.abs(item.totalAmount()) - (item.totalAmount() > 0 ? 0 : item.fee), Config)}
                                subtitle={item.timestamp === 0 ? t('processing') + prettyPrintDate2(Date.now() / 1000) : t('completed') + prettyPrintDate2(item.timestamp)}
                                leftIcon={
                                    <View style={{width: 30, alignItems: 'center', justifyContent: 'center', marginRight: 10}}>
                                        <Ionicons name={this.getIconName(item)} size={30} color={this.getIconColour(item)}/>
                                    </View>
                                }
                                titleStyle={{
                                    color: this.props.screenProps.theme.primaryColour,
                                    fontFamily: 'Montserrat-SemiBold'
                                }}
                                subtitleStyle={{
                                    color: this.props.screenProps.theme.slightlyMoreVisibleColour,
                                    fontFamily: 'Montserrat-Regular'
                                }}
                                onPress={() => this.props.navigation.navigate('TransactionDetails', { transaction: item })}
                            />

                        )}
                    />
                </List>
            </View>
        )
    }

render(){
        return(
            <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
                <Header 
                    backgroundColor = {'pink'}
                    centerComponent = {{
                        text : 'Bed Time Stories',
                        style : { color: 'white', fontSize: 20}
                    }}
                />
                <TextInput 
                    placeholder="Story Title"
                    onChangeText= {(text)=>{
                        this.setState({
                            title: text
                        })
                    }}
                    value={this.state.title}
                    style={styles.title}/>
                <TextInput
                    placeholder="Author"
                    onChangeText= {(text)=>{
                        this.setState({
                            author: text
                        })
                    }}
                    value={this.state.author}
                    style={styles.author} />
                <TextInput 
                    placeholder="Write your story"
                    onChangeText= {(text)=>{
                        this.setState({
                            storyText: text
                        })
                    }}
                    value={this.state.storyText}
                    style={styles.storyText}
                    multiline={true}/>
                
                <TouchableOpacity
                    style={styles.submitButton}
                    onPress={this.submitStory}
                    >
                    <Text style={styles.buttonText}>Submit</Text>
                </TouchableOpacity>
            </KeyboardAvoidingView>
        );
    }

render(){
    return(
      <View style={styles.container}>
        <View style={{flex:0.1}}>
          <Header
            leftComponent ={<Icon name='arrow-left' type='feather' color='#696969'  onPress={() => this.props.navigation.goBack()}/>}
            centerComponent={{ text:"Exchange Items", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
            backgroundColor = "#eaf8fe"
          />
        </View>
        <View style={{flex:0.3}}>
          <Card
              title={"Item Information"}
              titleStyle= {{fontSize : 20}}
            >
            <Card >
              <Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
            </Card>
            <Card>
              <Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
            </Card>
          </Card>
        </View>
        <View style={{flex:0.3}}>
          <Card
            title={"receiver Information"}
            titleStyle= {{fontSize : 20}}
            >
            <Card>
              <Text style={{fontWeight:'bold'}}>Name: {this.state.receiverName}</Text>
            </Card>
            <Card>
              <Text style={{fontWeight:'bold'}}>Contact: {this.state.receiverContact}</Text>
            </Card>
            <Card>
              <Text style={{fontWeight:'bold'}}>Address: {this.state.receiverAddress}</Text>
            </Card>
          </Card>
        </View>
        <View style={styles.buttonContainer}>
          {
            this.state.receiverId !== this.state.userId
            ?(
              <TouchableOpacity
                  style={styles.button}
                  onPress={()=>{
                    this.updateBarterStatus()
                    this.addNotification()
                    this.props.navigation.navigate('MyBarters')
                  }}>
                <Text>I want to Exchange</Text>
              </TouchableOpacity>
            )
            : null
          }
        </View>
      </View>
    )
  }

render(){
    return(
      <View style={styles.container}>
        <View style={{flex:0.1}}>
          <Header
            leftComponent ={<Icon name='arrow-left' type='feather' color='#ffff'  onPress={() => this.props.navigation.goBack()}/>}
            centerComponent={{ text:"Exchange Items", style: { color:'#ffff', fontSize:20,fontWeight:"bold", } }}
            backgroundColor = "#32867d"
          />
        </View>
        <View style={{flex:0.3,marginTop:RFValue(20)}}>
          <Card
              title={"Item Information"}
              titleStyle= {{fontSize : 20}}
            >
            
              <Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
            
              <Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
          
          </Card>
        </View>
        <View style={{flex:0.3}}>
          <Card
            title={"Receiver Information"}
            titleStyle= {{fontSize : 20}}
            >
            <Card>
              <Text style={{fontWeight:'bold'}}>Name: {this.state.receiverName}</Text>
            
              <Text style={{fontWeight:'bold'}}>Contact: {this.state.receiverContact}</Text>
            
              <Text style={{fontWeight:'bold'}}>Address: {this.state.receiverAddress}</Text>
            </Card>
          </Card>
        </View>
        <View style={styles.buttonContainer}>
          {
            this.state.receiverId !== this.state.userId
            ?(
              <TouchableOpacity
                  style={styles.button}
                  onPress={()=>{
                    this.updateBarterStatus()
                    this.addNotification()
                    this.props.navigation.navigate('MyBarters')
                  }}>
                <Text style={{color:'#ffff'}}>I want to Exchange</Text>
              </TouchableOpacity>
            )
            : null
          }
        </View>
      </View>
    )
  }

MyHeader = props => {
  return (
    <Header
      centerComponent={{ text: props.title, style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
      backgroundColor = "#eaf8fe"
    />
  );
}

render(){
    return(
      <View style={styles.container}>
        <View style={{flex:0.1}}>
          <Header
            leftComponent ={<Icon name='arrow-left' type='feather' color='#696969'  onPress={() => this.props.navigation.goBack()}/>}
            centerComponent={{ text:"Exchange Items", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
            backgroundColor = "#eaf8fe"
          />
        </View>
        <View style={{flex:0.3}}>
          <Card
              title={"Item Information"}
              titleStyle= {{fontSize : 20}}
            >
            <Card >
              <Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
            </Card>
            <Card>
              <Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
            </Card>
          </Card>
        </View>
        <View style={{flex:0.3}}>
          <Card
            title={"Reciever Information"}
            titleStyle= {{fontSize : 20}}
            >
            <Card>
              <Text style={{fontWeight:'bold'}}>Name: {this.state.recieverName}</Text>
            </Card>
            <Card>
              <Text style={{fontWeight:'bold'}}>Contact: {this.state.recieverContact}</Text>
            </Card>
            <Card>
              <Text style={{fontWeight:'bold'}}>Address: {this.state.recieverAddress}</Text>
            </Card>
          </Card>
        </View>
        <View style={styles.buttonContainer}>
          {
            this.state.recieverId !== this.state.userId
            ?(
              <TouchableOpacity
                  style={styles.button}
                  onPress={()=>{
                    this.updateBarterStatus()
                    this.props.navigation.navigate('MyBarters')
                  }}>
                <Text>I want to Exchange</Text>
              </TouchableOpacity>
            )
            : null
          }
        </View>
      </View>
    )
  }

render(){
      return(
        <View style={styles.container}>
          <View style={{flex:0.1}}>
            <Header
              leftComponent ={<Icon name='arrow-left' type='feather' color='#696969'  onPress={() => this.props.navigation.goBack()}/>}
              centerComponent={{ text:"Donate Books", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
              backgroundColor = "#eaf8fe"
            />
          </View>
          <View style={{flex:0.3}}>
            <Card
                title={"Book Information"}
                titleStyle= {{fontSize : 20}}
              >
              <Card >
                <Text style={{fontWeight:'bold'}}>Name : {this.state.bookName}</Text>
              </Card>
              <Card>
                <Text style={{fontWeight:'bold'}}>Reason : {this.state.reason_for_requesting}</Text>
              </Card>
            </Card>
          </View>
          <View style={{flex:0.3}}>
            <Card
              title={"Reciever Information"}
              titleStyle= {{fontSize : 20}}
              >
              <Card>
                <Text style={{fontWeight:'bold'}}>Name: {this.state.recieverName}</Text>
              </Card>
              <Card>
                <Text style={{fontWeight:'bold'}}>Contact: {this.state.recieverContact}</Text>
              </Card>
              <Card>
                <Text style={{fontWeight:'bold'}}>Address: {this.state.recieverAddress}</Text>
              </Card>
            </Card>
          </View>
          <View style={styles.buttonContainer}>
            {
              this.state.recieverId !== this.state.userId
              ?(
                <TouchableOpacity
                    style={styles.button}
                    onPress={()=>{
                      this.updateBookStatus()
                      this.addNotification()
                      this.props.navigation.navigate('MyDonations')
                    }}>
                  <Text>I want to Donate</Text>
                </TouchableOpacity>
              )
              : null
            }
          </View>
        </View>
      )
    }

Result = (props) => {
    const [downloadTask, setDownloadTask] = useState(null);
    const [isDownloading, setIsDownloading] = useState(false);
    const [downloadDestinationPath, setDownloadDestinationPath] = useState(null);
    const [downloadDetails, setDownloadDetails] = useState({
        total: 0,
        received: 0,
    });

    // Get var from navigator
    const {type, content} = props.route.params;

    // list different items to display
    let mediaDetails = null, newMediaDetails = null;
    if (content.mediaDetails)
        mediaDetails = getDetailsFromMedia(content.mediaDetails, content.mediaType);
    if (content.newMediaDetails)
        newMediaDetails = getDetailsFromMedia(content.newMediaDetails, content.newMediaType);

    /**
     * Handle download whether remote or local file
     * @returns {Promise<void>}
     */
    const handleDownload = async () => {
        // Get proper source media
        const sourceMediaDetails = content.newMediaDetails
            ? content.newMediaDetails
            : content.mediaDetails;

        // Get source media type
        const mediaType = content.newMediaDetails ? content.newMediaType : content.mediaType;

        // Set android base path
        const androidBasepath = mediaType === 'audio' ? FS.dirs.MusicDir : FS.dirs.MovieDir;

        // Get basepath according to platform
        const basepath = Platform.OS === 'android'
            ? androidBasepath : FS.dirs.LibraryDir;

        // Create destination filename
        let destinationFileFullPath = `${basepath}/${sourceMediaDetails.filename}.${sourceMediaDetails.extension}`;

        // Check if the file already exits
        const isDestinationFileExist = await FS.exists(destinationFileFullPath).catch(() => true);

        if (isDestinationFileExist) {
            // Give random name in case original name already exits
            destinationFileFullPath = `${basepath}/${Date.now()}.${sourceMediaDetails.extension}`;
        }

        // Save resources to state in order to be able to stop remote downloading
        setDownloadDestinationPath(destinationFileFullPath);

        // Ask permission to access file
        const _isFilePermissionGranted = await isFilePermissionGranted();

        // The following line is NOT a mistake
        if (_isFilePermissionGranted === false) {
            toast.error("You need to grant permission in order to continue");
            return;
        } else if (_isFilePermissionGranted === null) {
            toast.error("An error occur asking permission. Please try again later");
            return;
        }

        try {
            // Check if the media's source is a remote one
            if (sourceMediaDetails.isRemoteMedia) {
                setIsDownloading(true);
                // Initiate downloading
                const task = RNFetchBlob.config({path : destinationFileFullPath})
                    .fetch('GET', sourceMediaDetails.path);

                // Save in order to be able to cancel later
                setDownloadTask(task);

                // Download the file
                await task.progress((received, total) => {
                        setDownloadDetails({
                            total,
                            received,
                        });
                    });
            } else {
                // Copy the file instead
                await FS.cp(sourceMediaDetails.path, destinationFileFullPath);
            }

            // Hide download box
            setIsDownloading(false);
            setDownloadDetails({
                bytesWritten: 0,
                contentLength: 0,
            });

            if (Platform.OS === 'android') {
                toast.success(`File downloaded successfully. You can get it into ${mediaType === 'audio' ? 'Music' : 'Movies'} folder`);
            } else {
                toast.success(`File downloaded successfully. You can get it into library folder`);
            }
        } catch (e) {}
    };

    /**
     * Handle stop download action
     * @returns {Promise<void>}
     */
    const stopDownload = async () => {
        try {
            if (downloadTask && downloadDestinationPath) {
                downloadTask.cancel(() => {
                    toast.success("The download was stopped.");
                    setIsDownloading(false);
                    setDownloadDetails({
                        bytesWritten: 0,
                        contentLength: 0,
                    });
                });
            }
        } catch (e) {
            toast.error("An error occur while stopping download");
        }
    };

    /**
     * Left component on header
     * @returns {*}
     */
    const renderLeftComponent = () => {
        return (
            <TouchableOpacity
                onPress={() => props.navigation.goBack()}
                hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}
            >
                <Icon
                    name='arrowleft'
                    type="antdesign"
                    color={COLORS.White}
                />
            </TouchableOpacity>
        );
    };

    /**
     * Right component on header
     * @returns {*}
     */
    const renderRightComponent = () => {
        // Hide download button while downloading or when result is a text instead
        if (isDownloading || type === 'text') {
            return <View />
        }

        return (
            <Button
                icon={
                    <Icon
                        name="download"
                        type="antdesign"
                        size={15}
                        color="white"
                        style={{
                            marginLeft: 5
                        }}
                    />
                }
                iconRight
                title="Download"
                onPress={handleDownload}
            />
        );
    };

    return (
        <View style={{flex: 1}}>
            <Header
                placement="left"
                leftComponent={renderLeftComponent()}
                centerComponent={{ text: 'Result', style: { color: COLORS.White, fontSize: 20 } }}
                rightComponent={renderRightComponent()}
            />
            {isDownloading && (
                <SimpleProgressBar
                    onCancelPress={stopDownload}
                    completed={getPercentage(downloadDetails.received, downloadDetails.total)}
                />
            )}
            {type === 'text' ? (
                <ScrollView style={styles.container}>
                    {
                        mediaDetails && mediaDetails.map((detail, i) => (
                            <ListItem key={i} bottomDivider>
                                <ListItem.Content>
                                    <ListItem.Title>{detail[0]}</ListItem.Title>
                                    <ListItem.Subtitle>{detail[1]}</ListItem.Subtitle>
                                </ListItem.Content>
                            </ListItem>
                        ))
                    }
                </ScrollView>
            ) : (
                <View style={styles.container}>
                    <MediaPlayer
                        style={styles.video}
                        resizeMode={'contain'}
                        source={{uri: content.url}}
                    />
                    <ScrollView style={styles.scrollView}>
                        <View style={styles.scrollViewWrapper}>
                            <View style={styles.sideView}>
                                <Text style={styles.introText}>Media details <Text style={{fontWeight: 'bold'}}>before</Text> action</Text>
                                {
                                    mediaDetails && mediaDetails.map((detail, i) => {
                                        return (
                                            <ListItem key={i} bottomDivider>
                                                <ListItem.Content>
                                                    <ListItem.Title>{detail[0]}</ListItem.Title>
                                                    <ListItem.Subtitle>{detail[1]}</ListItem.Subtitle>
                                                </ListItem.Content>
                                            </ListItem>
                                        );
                                    })
                                }
                            </View>
                            <View style={styles.centerView}>
                                <View style={styles.dividerBar} />
                            </View>
                            <View style={styles.sideView}>
                                <Text style={styles.introText}>Media details <Text style={{fontWeight: 'bold'}}>after</Text> action</Text>
                                {
                                    newMediaDetails && newMediaDetails.map((detail, i) => (
                                        <ListItem key={i} bottomDivider>
                                            <ListItem.Content>
                                                <ListItem.Title>{detail[0]}</ListItem.Title>
                                                <ListItem.Subtitle>{detail[1]}</ListItem.Subtitle>
                                            </ListItem.Content>
                                        </ListItem>
                                    ))
                                }
                            </View>
                        </View>
                    </ScrollView>
                </View>
            )}
        </View>
    );
}

Layout = ({navigation, viewContent, controlPanel, headerText, onUploadPressed, type}) => {
    const [remoteUrl, setRemoteUrl] = useState('');
    const [isSelectModalVisible, setIsSelectModalVisible] = useState(false);
    const [isUrlInputModalVisible, setIsUrlInputModalVisible] = useState(false);

    // Get default remote media url to use
    const defaultRemoteMediaUrl = type === 'audio'
        ? DEFAULT_REMOTE_AUDIO_URL
        : DEFAULT_REMOTE_VIDEO_URL;

    /**
     * Display url modal
     */
    const getFileFromUrl = () => {
        setIsUrlInputModalVisible(true);
        setIsSelectModalVisible(false);
    };

    /**
     * Handle remote url button press action
     * @param action
     */
    const onRemoteUrlBtnAction = (action) => {
        if (action === 'Ok') {
            if (isValidUrl(remoteUrl)) {
                onUploadPressed(remoteUrl);
                setIsUrlInputModalVisible(false);
                setRemoteUrl('');
            }
            else toast.error("Please enter a valid url");
        } else {
            setIsSelectModalVisible(true);
            setIsUrlInputModalVisible(false);
        }
    };

    /**
     * Ask permission to perform operation on file file
     * @returns {Promise<null|boolean>}
     */
    const isFilePermissionGranted = async () => {
        try {
            const readPermission = await askPermission(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                "RNAudioVideoTools App Read Permission",
                "In order to save your media, We need permission to access your phone folder"
            );
            const writePermission = await askPermission(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                "RNAudioVideoTools App Write Permission",
                "In order to save your media, We need permission to access your phone folder"
            );
            return readPermission === PermissionsAndroid.RESULTS.GRANTED
                && writePermission === PermissionsAndroid.RESULTS.GRANTED;
        } catch (err) {
            return null;
        }
    };

    /**
     * Select a file from picker and return its full path
     * @returns {Promise<void>}
     */
    const getFileFromPicker = async () => {
        try {

            // Ask permission to access file
            const _isFilePermissionGranted = await isFilePermissionGranted();

            // The following line is NOT a mistake
            if (_isFilePermissionGranted === false) {
                toast.error("You need to grant permission in order to continue");
                return;
            } else if (_isFilePermissionGranted === null) {
                toast.error("An error occur asking permission. Please try again later");
                return;
            }

            // Pick a single file
            const res = await DocumentPicker.pick({
                type: [DocumentPicker.types[type]],
            });

            // Get information about file in order to have its full path
            const result = await FS.stat(res.uri);

            // Remove ending "/" if present
            const path = result.path[result.path.length - 1] === '/'
                ? result.path.substring(0, result.path.length - 1) : result.path;

            // Prepend file protocol in order to be compatible with RNAudioVideoTools
            const destinationFileFullPath = 'file://' + path;

            // Return the response path
            onUploadPressed(destinationFileFullPath);
            setIsSelectModalVisible(false);
        } catch (err) {}
    };

    /**
     * Left component on header
     * @returns {*}
     */
    const renderLeftComponent = () => {
        return (
            <TouchableOpacity
                onPress={() => navigation.toggleDrawer()}
                hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}
            >
                <Icon
                    name='menu'
                    color={COLORS.White}
                />
            </TouchableOpacity>
        );
    };

    /**
     * Right component on header
     * @returns {*}
     */
    const renderRightComponent = () => {
        return (
            <Button
                iconRight
                title="Select"
                icon={
                    <Icon
                        name="video-library"
                        type="material"
                        size={15}
                        color={COLORS.White}
                        style={{marginLeft: 5}}
                    />
                }
                onPress={() => setIsSelectModalVisible(true)}
            />
        );
    };

    return (
        <>
            <Header
                leftComponent={renderLeftComponent()}
                centerComponent={{ text: headerText, style: { color: COLORS.White, fontSize: 18 } }}
                rightComponent={renderRightComponent()}
            />
            <View style={styles.container}>
                <View style={styles.viewContent}>
                    {viewContent}
                </View>
                <View style={styles.middleContent} />
                <View style={styles.controlPanel}>
                    {controlPanel}
                </View>
            </View>
            <CustomModal
                title={"Choose a file"}
                isVisible={isSelectModalVisible}
                leftText={"From phone"}
                rightText={"From url"}
                onLeftClick={() => getFileFromPicker()}
                onRightClick={() => getFileFromUrl()}
                onCloseClick={() => setIsSelectModalVisible(false)}
                content={(
                    <Text style={{textAlign: 'center'}}>{`Please select ${type === 'audio' ? 'an audio' : 'a video'} file...`}</Text>
                )}
            />
            <CustomModal
                title={"Url"}
                isVisible={isUrlInputModalVisible}
                leftText={"Back"}
                rightText={"Ok"}
                onLeftClick={() => onRemoteUrlBtnAction('Cancel')}
                onRightClick={() => onRemoteUrlBtnAction('Ok')}
                onCloseClick={() => onRemoteUrlBtnAction('Cancel')}
                content={(
                    <View>
                        <Text>Please enter a remote url.</Text>
                        <Text>Example:
                            <Text
                                style={{color: PRIMARY_COLOR}}
                                onPress={() => setRemoteUrl(defaultRemoteMediaUrl)}
                            >
                                {' ' + defaultRemoteMediaUrl}
                            </Text>
                        </Text>
                        <Input
                            value={remoteUrl}
                            placeholder='url...'
                            onChangeText={setRemoteUrl}
                            containerStyle={{marginTop: 5}}
                        />
                    </View>
                )}
            />
        </>
    );
}

HeaderPlayground = () => {
  const params = useView({
    componentName: "Header",
    props: {
      backgroundColor: {
        type: PropTypes.String,
        value: null,
      },
      backgroundImage: {
        type: PropTypes.Object,
        value: null,
      },
      backgroundImageStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },
      barStyle: {
        type: PropTypes.Enum,
        options: {
          default: "default",
          "light-content": "light-content",
          "dark-content": "dark-content",
        },
        value: "default",
      },

      centerComponent: {
        type: PropTypes.Object,
        value: `{ text: 'MY TITLE', style: { color: '#fff' } }`,
        description:
          "{ text: string, ...Text props} OR { icon: string, ...Icon props} OR  React element or component",
      },
      centerContainerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },
      containerStyle: {
        type: PropTypes.Object,
        value: `{width:350}`,
      },
      leftComponent: {
        type: PropTypes.Object,
        value: `{ icon: 'menu', color: '#fff' }`,
      },
      leftContainerStyle: {
        type: PropTypes.Object,
        value: `{}`,
        description: `{...Gradient props}`,
      },
      linearGradientProps: {
        type: PropTypes.Object,
        value: `{}`,
      },

      placement: {
        type: PropTypes.Enum,
        options: {
          center: "center",
          left: "left",
          right: "right",
        },
        value: "center",
      },

      rightComponent: {
        type: PropTypes.Object,
        value: `{ icon: 'home', color: '#fff' }`,
      },
      rightContainerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },
      statusBarProps: {
        type: PropTypes.Object,
        value: `{}`,
      },
      ViewComponent: {
        type: PropTypes.ReactNode,
        value: null,
      },
    },
    scope: {
      Header,
      Icon,
    },
    imports: {
      "react-native-elements": {
        named: ["Header", "Icon"],
      },
      "react-native-safe-area-context": {
        named: ["SafeAreaProvider"],
      },
    },
  });

  return (
    <React.Fragment>
      <SafeAreaProvider>
        <Playground params={params} />
      </SafeAreaProvider>
    </React.Fragment>
  );
}

render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 0.1 }}>
          <Header
            leftComponent={
              <Icon
                name="arrow-left"
                type="feather"
                color="#ffffff"
                onPress={() => this.props.navigation.goBack()}
              />
            }
            centerComponent={{
              text: "Donate Books",
              style: {
                color: "#ffffff",
                fontSize: RFValue(20),
                fontWeight: "bold",
              },
            }}
            backgroundColor="#32867d"
          />
        </View>
        <View style={{ flex: 0.9 }}>
          <View
            style={{
              flex: 0.3,
              flexDirection: "row",
              paddingTop: RFValue(30),
              paddingLeft: RFValue(10),
            }}
          >
            <View style={{ flex: 0.4,}}>
              <Image
                source={{ uri: this.state.bookImage }}
                style={{
                  width: "100%",
                  height: "100%",
                  resizeMode: "contain",
                }}
              />
            </View>
            <View
              style={{
                flex: 0.6,
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Text
                style={{
                  fontWeight: "500",
                  fontSize: RFValue(25),
                  textAlign: "center",
                }}
              >
                {this.state.bookName}
              </Text>
              <Text
                style={{
                  fontWeight: "400",
                  fontSize: RFValue(15),
                  textAlign: "center",
                  marginTop: RFValue(15),
                }}
              >
                {this.state.reason_for_requesting}
              </Text>
            </View>
          </View>
          <View
            style={{
              flex: 0.7,
              padding: RFValue(20),
            }}
          >
            <View style={{ flex: 0.7 ,justifyContent:'center',alignItems:'center',marginTop:RFValue(50),borderWidth:1,borderColor:'#deeedd',padding:RFValue(10)}}>
              <Text
                style={{
                  fontWeight: "500",
                  fontSize: RFValue(30),
                }}
              >
                Reciever Information
              </Text>
              <Text
                style={{
                  fontWeight: "400",
                  fontSize: RFValue(20),
                  marginTop: RFValue(30),
                }}
              >
                Name : {this.state.recieverName}
              </Text>
              <Text
                style={{
                  fontWeight: "400",
                  fontSize: RFValue(20),
                  marginTop: RFValue(30),
                }}
              >
                Contact: {this.state.recieverContact}
              </Text>
              <Text
                style={{
                  fontWeight: "400",
                  fontSize: RFValue(20),
                  marginTop: RFValue(30),
                }}
              >
                Address: {this.state.recieverAddress}
              </Text>
            </View>
            <View
              style={{
                flex: 0.3,
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              {this.state.recieverId !== this.state.userId ? (
                <TouchableOpacity
                  style={styles.button}
                  onPress={() => {
                    this.updateBookStatus();
                    this.addNotification();
                    this.props.navigation.navigate("MyDonations");
                  }}
                >
                  <Text>I want to Donate</Text>
                </TouchableOpacity>
              ) : null}
            </View>
          </View>
        </View>
      </View>
    );
  }