react-native#Modal JavaScript Examples

ScrollModal = props  => {

  return (
        <Modal visible = {props.visible}>
            <View style = {styles.myModal}>
                <Button title = "go back" onPress={props.onClose}/>
            </View>
        </Modal>
  );
}

render() {
    const { open, close } = this.props;
    return (
      <Modal transparent animated animationType="fade" visible={open}>
        <View style={style.bottomSheetContainer}>
          <TouchableWithoutFeedback
            onPress={() => {
              this.sheetRef.current.snapTo(1);
              this.props.close();
            }}>
            <View style={style.fullFlex}>
              <BottomSheet
                ref={this.sheetRef}
                snapPoints={[250, 0]}
                borderRadius={30}
                initialSnap={1}
                enabledInnerScrolling={false}
                renderHeader={this.renderHeader}
                enabledContentTapInteraction
                overdragResistanceFactor={10}
                renderContent={this.renderContent}
                onCloseEnd={() => {
                  close();
                }}
              />
            </View>
          </TouchableWithoutFeedback>
        </View>
      </Modal>
    );
  }

Overlay = ({
  children,
  style,
  visible,
} = {}) => (
  <Modal
    transparent
    visible={visible}
    style={[
      style,
      styles.wrapper,
    ]}
  >
    {children}
  </Modal>
)

render() {
    const { visible, close } = this.props;

    return (
      <Modal transparent animated animationType="fade" visible={visible}>
        <View style={style.reactionDetailBottomSheet}>
          <BottomSheet
            ref={this.sheetRef}
            snapPoints={[Dimensions.get('window').height - 80, 0]}
            borderRadius={30}
            initialSnap={1}
            enabledInnerScrolling={false}
            enabledContentTapInteraction
            overdragResistanceFactor={10}
            renderContent={this.renderContent}
            onCloseEnd={() => {
              close();
            }}
          />
        </View>
      </Modal>
    );
  }

function UploadScreen({ onDone, progress = 0, visible = false }) {
	return (
		<Modal visible={visible}>
			<View style={styles.container}>
				{progress < 1 ? (
					<Progress.Bar
						color={colors.primary}
						progress={progress}
						width={200}
					/>
				) : (
					<LottieView
						autoPlay
						loop={false}
						onAnimationFinish={onDone}
						source={require("../assets/animations/done.json")}
						style={styles.animation}
					/>
				)}
			</View>
		</Modal>
	);
}

render() {
    const { visible, page } = this.state;
    return (
      <Modal visible={visible} animationType="slide" presentationStyle="formSheet" onDismiss={this.onClose}>
        <View style={styles.container}>
          <KeyboardAvoidingView
            style={styles.keyboardAvoidingView}
            behavior={Platform.select({ ios: "padding", android: null })}
          >
            <View style={styles.backContainer}>
              <TouchableOpacity onPress={this.onClose}>
                <Text style={styles.backText}>{getCaption("back")}</Text>
              </TouchableOpacity>
            </View>
            <ScrollView
              style={styles.scrollView}
              keyboardDismissMode="on-drag"
              onScrollBeginDrag={Keyboard.dismiss}
            >
              {page === 1 && this.renderFirstPage()}
              {page === 2 && this.renderSecondPage()}
            </ScrollView>
          </KeyboardAvoidingView>
        </View>
      </Modal>
    );
  }

render() {
  return (
    <Modal
        animationType="fade"
        visible={this.props.visible}
        transparent={true}
        >
        <View style={styles.mainOuterComponent}>
          <ActivityIndicator size={50} color={'#FFFFFF'}/>
        </View>
     </Modal>
  );
}

_renderModal() {
    const { animated, accessible, dropdownStyle } = this.props;
    const { showDropdown, loading } = this.state;

    if (showDropdown && this._buttonFrame) {
      const frameStyle = this._calcPosition();
      const animationType = animated ? 'fade' : 'none';

      return (
        <Modal
          animationType={animationType}
          visible
          transparent
          onRequestClose={this._onRequestClose}
          supportedOrientations={[
            'portrait',
            'portrait-upside-down',
            'landscape',
            'landscape-left',
            'landscape-right',
          ]}
        >
          <TouchableWithoutFeedback
            accessible={accessible}
            disabled={!showDropdown}
            onPress={this._onModalPress}
          >
            <View style={styles.modal}>
              <View style={[styles.dropdown, dropdownStyle, frameStyle]}>
                {loading ? this._renderLoading() : this._renderDropdown()}
              </View>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
      );
    }
  }

ModalMensagemMapa = ({ modalVisible, fecharModal }) => {
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent
        visible={modalVisible}
        onRequestClose={() => {
          fecharModal();
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>
              Para encontrar mais pontos de aglomeração, navegue pelo mapa ou
              pesquise o nome de um local no campo acima.
            </Text>

            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#94D451' }}
              onPress={() => {
                fecharModal();
              }}
            >
              <Text style={styles.textStyle}>OK</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    </View>
  );
}

export default function ErrorModal(props) {
  const { title, error, onPress, buttonText } = props;
  return (
    <Modal transparent >
      <View style={styles.wrapper}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.body}>Error: {error}</Text>
        <Button title={buttonText} onPress={onPress} />
      </View>
    </Modal>);
}

function NfcPromptAndroid(props) {
  const [visible, setVisible] = React.useState(false);
  const animValue = React.useRef(new Animated.Value(0)).current;
  const [_data, _setData] = useOutlet('androidPrompt');
  const {visible: _visible, message = ''} = _data || {};

  React.useEffect(() => {
    if (_visible) {
      setVisible(true);
      Animated.timing(animValue, {
        duration: 300,
        toValue: 1,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(animValue, {
        duration: 200,
        toValue: 0,
        useNativeDriver: true,
      }).start(() => {
        setVisible(false);
      });
    }
  }, [_visible, animValue]);

  function cancelNfcScan() {
    setTimeout(() => {
      NfcManager.cancelTechnologyRequest().catch(() => 0);
    }, 200);
    _setData({visible: false, message});
  }

  const bgAnimStyle = {
    backgroundColor: 'rgba(0,0,0,0.3)',
    opacity: animValue,
  };

  const promptAnimStyle = {
    transform: [
      {
        translateY: animValue.interpolate({
          inputRange: [0, 1],
          outputRange: [300, 0],
        }),
      },
    ],
  };

  return (
    <Modal transparent={true} visible={visible}>
      <View style={[styles.wrapper]}>
        <View style={{flex: 1}} />

        <Animated.View style={[styles.prompt, promptAnimStyle]}>
          <View
            style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Image
              source={require('../../images/nfc-512.png')}
              style={{width: 120, height: 120, padding: 20}}
              resizeMode="contain"
            />

            <Text>{message}</Text>
          </View>

          <Button mode="contained" onPress={cancelNfcScan}>
            CANCEL
          </Button>
        </Animated.View>

        <Animated.View style={[styles.promptBg, bgAnimStyle]} />
      </View>
    </Modal>
  );
}

render() {
    return (
      <Modal
        transparent
        animated
        animationType="fade"
        visible={this.props.open}
        onRequestClose = {() =>{
          this.sheetRef.current.snapTo(1);
          this.props.close();
        }} >
        <TouchableOpacity
          onPress={() => this.props.close()}
          style={style.outerContainer}>
          <BottomSheet
            ref={this.sheetRef}
            snapPoints={[Dimensions.get('window').height - 80, 0]}
            borderRadius={30}
            initialSnap={0}
            enabledInnerScrolling={false}
            enabledContentTapInteraction={false}
            overdragResistanceFactor={10}
            renderContent={() => {
              return (
                <TouchableWithoutFeedback>
                  <View style={style.bottomSheetContainer}>
                    <TouchableOpacity
                      style={style.crossImgContainer}
                      onPress={this.props.close}>
                      <Image
                        source={cross}
                        style={style.crossImg}
                        resizeMode="contain"
                      />
                    </TouchableOpacity>
                    <View style={style.outerImageContainer}>
                      <View style={[style.mainContainer]}>
                        <Image
                          source={{
                            uri: _get(this.props, 'message.data.url', ''),
                          }}
                          resizeMode="contain"
                          style={style.imageStyles}
                        />
                      </View>
                    </View>
                  </View>
                </TouchableWithoutFeedback>
              );
            }}
            onCloseEnd={() => {
              this.props.close();
            }}
          />
        </TouchableOpacity>
      </Modal>
    );
  }

PendingRequestsModal = ({modalVisible, toggleVisibility,data}) => {
	const renderer = ({item}) => {
		console.log(item._id,"id");
        return (
            <List pending={true} item = {item} />
        )
    }

	return (
		<Modal
			animationType="fade"
			transparent={false}
			visible={modalVisible}
			onRequestClose={() => {
				toggleVisibility(!modalVisible);
			}}>
			<LinearGradientComp
				bgcolors={{
					colorOne: 'rgba(0, 0, 0, 0.3)',
					colorTwo: 'rgba(0, 0, 0, 1)',
				}}>
				<View>
					<View style={styles.modalView}>
						{
							data.length > 0 ? (
								<>
									<View style={{
										justifyContent:'center',
										alignItems:"center",
										marginBottom:40
									}}> 
									
										<Text style={{
											color:"white",
											fontSize:28,
											fontWeight:"bold"
										}}>
											Pending Requests
										</Text>
									</View>

									<FlatList
										keyExtractor={(item) => (item._id).toString()}
										data={data}
										renderItem={renderer}
										showsVerticalScrollIndicator={false}
									/>
								</>
							): (
								<>
									<FillerContent fillerImage ={FillerImage} text="No pending requests"/>
								</>
							)
						}
                    </View>       
				</View>
			</LinearGradientComp>
		</Modal>
	);
}

export default function ModalLinksNoticias({ modalVisible, closeModal }) {
  const handlePressButtonAsync = (site) => {
    WebBrowser.openBrowserAsync(site);
  };

  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        visible={modalVisible}
        onRequestClose={() => {
          closeModal();
        }}
      >
        <TouchableOpacity
          style={styles.container}
          activeOpacity={1}
          onPressOut={() => {
            closeModal();
          }}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.titulo}>Veja as últimas notícias</Text>
              <FlatList
                data={newsLinks}
                renderItem={({ item }) => (
                  <TouchableOpacity
                    style={styles.card}
                    onPress={() => {
                      handlePressButtonAsync(item.url);
                    }}
                  >
                    <Text style={styles.text}>{item.name}</Text>
                  </TouchableOpacity>
                )}
                keyExtractor={(item) => String(item.id)}
              />
            </View>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
}

render() {
    return (
      <Modal
        transparent
        animated
        animationType="fade"
        visible={this.props.open}
        onRequestClose = {() =>{
          this.sheetRef.current.snapTo(1);
          this.props.close();
        }} >
        <TouchableOpacity
          onPress={() => this.props.close()}
          style={style.outerContainer}>
          <BottomSheet
            ref={this.sheetRef}
            snapPoints={[Dimensions.get('window').height - 80, 0]}
            borderRadius={30}
            initialSnap={0}
            enabledInnerScrolling={false}
            enabledContentTapInteraction={false}
            overdragResistanceFactor={10}
            renderContent={() => {
              return (
                <TouchableWithoutFeedback>
                  <View style={style.bottomSheetContainer}>
                    <TouchableOpacity
                      style={style.crossImgContainer}
                      onPress={this.props.close}>
                      <Image
                        source={cross}
                        style={style.crossImg}
                        resizeMode="contain"
                      />
                    </TouchableOpacity>
                    <View style={style.outerImageContainer}>
                      <View style={[style.mainContainer]}>
                        <VideoPlayer
                          source={{
                            uri: this.props.message.data.url,
                          }} // Can be a URL or a local file.
                          navigator={this.props.navigator}
                          style={style.messageVideo}
                          disableBack
                          disableVolume
                          disableFullscreen
                          paused
                          resizeMode="contain"
                        />
                      </View>
                    </View>
                  </View>
                </TouchableWithoutFeedback>
              );
            }}
            onCloseEnd={() => {
              this.props.close();
            }}
          />
        </TouchableOpacity>
      </Modal>
    );
  }

ModalComp = ({
  visible,
  children,
  close,
  contentStyle,
  closeAnimation,
}) => {

  if (!closeAnimation && !visible) return null;

  const colorScheme = useColorScheme();

  const topBar = (
    <TopBar
      rightOnPress={close}
      right={(
        <AntDesign
          name="close"
          color={colorScheme === "light" ? "black": "white"}
          size={22}
        />
      )}
    />
  )

  if (device('web')) {
    return !visible ? null : (
      <Modal
        transparent
        style={[styles.webModalStyle, colorScheme === 'light' ? null : styles.webModalStyle_dark]}
      >
        <View style={[styles.wrapper, colorScheme === 'light' ? null : styles.wrapper_dark]}>
          <ScrollView style={{minHeight: '100%'}}>
            <Page center style={{minHeight: '100vh'}}>

              {/** heading */}
              <View style={[styles.heading, colorScheme === 'light' ? null : styles.heading_dark]}>
                {topBar}
              </View>

              {/** contents */}
              <View style={[styles.contents, colorScheme === 'light' ? null : styles.contents_dark, contentStyle]}>
                {children}
              </View>
            </Page>
          </ScrollView>
        </View>
      </Modal>
    );
  }

  return (
    <RNModal
      isVisible={visible}
      onBackButtonPress={close}
      onBackdropPress={close}
      useNativeDriver={false}
      hideModalContentWhileAnimating={true}
      propagateSwipe
      animationInTiming={DURATION}
      animationOutTiming={DURATION}
      backdropTransitionInTiming={DURATION}
      backdropTransitionOutTiming={0}

    >
      <View style={[styles.wrapper, colorScheme === 'light' ? null : styles.wrapper_dark]}>

        {/** heading */}
        <View style={[styles.heading, colorScheme === 'light' ? null : styles.heading_dark]}>
          {topBar}
        </View>

        {/** contents */}
        <ScrollView style={[ styles.contents, colorScheme === 'light' ? null : styles.contents_dark, contentStyle ]}>
          {children}
        </ScrollView>
      </View>
    </RNModal>
  )
}

render() {
    return (
      <Modal
        transparent
        animated
        animationType="fade"
        visible={this.props.open}>
        <View style={style.outerContainer}>
          <BottomSheet
            ref={this.sheetRef}
            snapPoints={[Dimensions.get('window').height - 80, 0]}
            borderRadius={30}
            initialSnap={0}
            enabledInnerScrolling={false}
            enabledContentTapInteraction={false}
            overdragResistanceFactor={10}
            renderContent={() => {
              return (
                <View style={style.bottomSheetContainer}>
                  <TouchableOpacity
                    style={style.crossImgContainer}
                    onPress={this.props.close}>
                    <Image
                      source={cross}
                      style={style.crossImg}
                      resizeMode="contain"
                    />
                  </TouchableOpacity>
                  <View style={style.outerImageContainer}>
                    {this.isLoading ? (
                      <View style={style.loaderContainer}>
                        <ActivityIndicator
                          size="large"
                          color={theme.color.primary}
                        />
                        <Text style={{ marginTop: 10 }}>Loading...</Text>
                      </View>
                    ) : null}
                    <View style={[style.mainContainer]}>
                      <WebView
                        javaScriptEnabled={true}
                        domStorageEnabled={true}
                        onError={(syntheticEvent) => {
                          const { nativeEvent } = syntheticEvent;
                          this.isLoading = false;
                          console.warn('WebView error: ', nativeEvent);
                        }}
                        onLoad={(syntheticEvent) => {
                          this.isLoading = false;
                        }}
                        onHttpError={(syntheticEvent) => {
                          const { nativeEvent } = syntheticEvent;
                          this.isLoading = false;
                          console.warn(
                            'WebView received error status code: ',
                            nativeEvent.statusCode,
                          );
                        }}
                        startInLoadingState={true}
                        style={{
                          height: '100%',
                          width: '100%',
                          borderWidth: 3,
                        }}
                        source={{ uri: this.props.url }}
                        renderError={(errorName) => <Text>errorName</Text>}
                      />
                    </View>
                  </View>
                </View>
              );
            }}
            onCloseEnd={() => {
              this.props.close();
            }}
          />
        </View>
      </Modal>
    );
  }

function AppPicker({
	icon,
	items,
	numberOfColumns = 1,
	onSelectItem,
	PickerItemComponent = PickerItem,
	placeholder,
	selectedItem,
	width = "100%",
}) {
	const [modalVisible, setModalVisible] = useState(false);

	return (
		<>
			<TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
				<View style={[styles.container, { width }]}>
					{icon && (
						<MaterialCommunityIcons
							name={icon}
							size={20}
							color={defaultStyles.colors.medium}
							style={styles.icon}
						/>
					)}
					{selectedItem ? (
						<Text style={styles.text}>{selectedItem.label}</Text>
					) : (
						<Text style={styles.placeholder}>{placeholder}</Text>
					)}

					<MaterialCommunityIcons
						name="chevron-down"
						size={20}
						color={defaultStyles.colors.medium}
					/>
				</View>
			</TouchableWithoutFeedback>

			<Modal visible={modalVisible} animationType="slide">
				{/* Wrap Button and FlatList in <Screen> in case of iPhone issues - 'Close' getting hidden behind notch */}
				{/* <Screen> */}
				<Button title="Close" onPress={() => setModalVisible(false)} />
				<FlatList
					data={items}
					keyExtractor={(item) => item.value.toString()}
					numColumns={numberOfColumns}
					renderItem={({ item }) => (
						<PickerItemComponent
							item={item}
							label={item.label}
							onPress={() => {
								setModalVisible(false);
								onSelectItem(item);
							}}
						/>
					)}
				/>
			</Modal>
		</>
	);
}

export default function ModalFormNotificacao({ modalVisible, closeModal }) {
  const [observacao, setObservacao] = useState('');
  const [estimativa, setEstimativa] = useState('');
  const [estimativaPicker, setEstimativaPicker] = useState('');
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent
        visible={modalVisible}
        onRequestClose={() => {}}
      >
        <TouchableOpacity
          style={styles.containerTouchable}
          activeOpacity={1}
          onPressOut={() => {
            closeModal();
            setEstimativaPicker('');
            setObservacao('');
          }}
        >
          <TouchableWithoutFeedback onPress={() => {}}>
            <View style={styles.modalView}>
              <Text style={styles.label}>Estimativa de pessoas</Text>
              <View style={styles.inputPicker}>
                <Picker
                  selectedValue={estimativaPicker}
                  onValueChange={(value) => setEstimativaPicker(value)}
                >
                  <Picker.Item label="5 a 9" value="5" />
                  <Picker.Item label="10 a 19" value="10" />
                  <Picker.Item label="20 a 39" value="20" />
                  <Picker.Item label="40 a 79" value="40" />
                  <Picker.Item label="80 a 99" value="80" />
                  <Picker.Item label="100 a 999" value="100" />
                  <Picker.Item label="1000 ou mais" value="1000" />
                </Picker>
              </View>
              <Text style={styles.label}>Observação</Text>
              <TextInput
                style={styles.input}
                placeholder="(Opicional)"
                multiline
                value={observacao}
                onChangeText={(text) => setObservacao(text)}
              />

              <TouchableHighlight
                style={{ ...styles.openButton, backgroundColor: '#94D451' }}
                onPress={() => {
                  if (estimativa != '') {
                    const enviarNotificacao = async () => {
                      try {
                        await enviarNotificacaoAglomeracao(
                          estimativaPicker,
                          observacao
                        );
                      } catch (error) {
                        console.log(`Error ao enviar notificação: ${error}`);
                      }
                    };
                    enviarNotificacao();
                  }
                  setObservacao('');
                  setEstimativaPicker('');
                  closeModal();
                }}
              >
                <Text style={styles.textStyle}>Enviar notificação</Text>
              </TouchableHighlight>
            </View>
          </TouchableWithoutFeedback>
        </TouchableOpacity>
      </Modal>
    </View>
  );
}

MoreOptions = ({
	visible = false,
	onClose = () => {},
	title = 'Song Title',
	moreOptions = [
		{
			text: 'Play',
			onPress: () => alert('Play song'),
		},
		{
			text: 'Add to favorite',
			onPress: () => alert('Add song to favorite'),
		},
		{
			text: 'Add to playlist',
			onPress: () => alert('Add song to playlist'),
		},
	],
}) => {
	const [animation, setAnimation] = useState('slideInUp');

	const closeModal = () => {
		setAnimation('fadeOutDown');

		const x = setTimeout(() => {
			onClose(false);
			clearTimeout(x);
		}, 300);
	};

	useEffect(() => {
		if (visible) {
			setAnimation('slideInUp');
		}
	}, [visible]);

	return (
		<Modal visible={visible} transparent animationType="fade">
			<TouchableOpacity
				style={[{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, width, height, backgroundColor: 'rgba(0, 0, 0, .5)', zIndex: 999 }]}
				activeOpacity={1}
				onPress={closeModal}
			/>
			<Animatable.View style={styles.modal} animation={animation} duration={300}>
				<Text style={{ color: 'rgba(0, 0, 0, .5)', fontSize: 24, fontWeight: 'bold', letterSpacing: 1, marginBottom: 20 }}>{title}</Text>
				{moreOptions.map(({ text, onPress }, key) => (
					<TouchableOpacity key={key} style={{ paddingVertical: 10, paddingHorizontal: 15, backgroundColor: '#E6E6E6', marginBottom: 10, borderRadius: 5 }} onPress={onPress} activeOpacity={0.6}>
						<Text style={{ color: 'rgba(0, 0, 0, .5)', fontSize: 16, letterSpacing: 1 }}>{text}</Text>
					</TouchableOpacity>
				))}
			</Animatable.View>
		</Modal>
	);
}

render() {
    return (
        <Modal
            visible={this.props.visible}
            onRequestClose={this.props.onClose}
            transparent={true}
            animationType={"fade"}>
            <View style={styles.mainOuterComponent} >
             <View style={[styles.viewalert,{height: this.props.details.State === 'Work at client office' ? 400:420}]}>
              <View style={styles.view1}>
                <Text style={styles.text}>{this.props.details.State}</Text>
                <View style={styles.viewPhoto}>
                  <View style={{display: this.props.details.Photo === null ? 'flex' : 'none',marginTop:100}}>
                    <Person width={70} height={70}/>
                    </View>
                  <Image style={{width: 100, height: 100, borderRadius:100/2}} source={{uri:this.props.details.Photo}}/>                  
                </View>
                <Text style={[styles.text1, {paddingTop:10}]}>{this.props.details.Name} <Text style={styles.text2}>needs your approval</Text></Text>
                <Text style={styles.text1}>Working on : <Text style={styles.text2}>{this.props.details.ProjectName}</Text></Text>
                <View style={{display: this.props.details.State === 'Work at client office' ? 'flex':'none'}}>
                  <Text style={styles.text1}>Client : <Text style={styles.text2}>{this.props.details.ClientName}</Text></Text>
                  <Text style={styles.text1}>Company : <Text style={styles.text2}>{this.props.details.CompanyName}{'\n'}</Text></Text>
                </View>
                <View style={{display: this.props.details.State !== 'Work at client office' ? 'flex':'none'}}>
                  <Text style={styles.text1}>Notes : <Text style={styles.text2}>{this.props.details.Note}</Text></Text>
                </View>

                <View style={{height:20, flexDirection:'row', marginTop:10}}>
                  <View style={{width:20, height:'100%', flex:1}}>
                    <FontAwesome5 name='map-marker-alt' size={16} color='#1A446D' style={{marginTop:2, marginLeft:50}}/>
                  </View>
                  <View style={{width:250, height:'100%', justifyContent:'center', flex:3}}>
                    <Text style={styles.textLocation}>{this.props.details.Location}</Text>
                  </View>              
                </View>
              </View>

                <View style={styles.viewButton}>
                    <TouchableOpacity style={styles.button} onPress={this.props.decline}>
                        <Text style={styles.textDecline}>Decline</Text>
                    </TouchableOpacity>  
                    <TouchableOpacity style={styles.button1} onPress={this.props.approve}>
                        <Text style={styles.textApprove}>Approve</Text>
                    </TouchableOpacity>
                </View>
             </View>
            </View>
        </Modal>
    );
  }

PostsPreview = ({
  theme,
  selectedPost,
  handlePostClose,
}) => {
  const styling = styles(theme)

  return (
    <Modal visible={selectedPost.length > 0} transparent>
      <ImageViewer
        imageUrls={selectedPost}
        saveToLocalByLongPress={false}
        renderIndicator={() => null}
        enableSwipeDown
        backgroundColor="#000000"
        onSwipeDown={handlePostClose}
        onCancel={handlePostClose}
        loadingRender={() => <ActivityIndicator size="small" color="#ffffff" />}
        swipeDownThreshold={120}
        renderHeader={() => (
          <View style={styling.header}>
            <TouchableOpacity onPress={handlePostClose}>
              <CloseIcon
                fill="#ffffff"
              />
            </TouchableOpacity>
          </View>
        )}
        renderFooter={() => (
          <Animatable.View animation="bounce" easing="ease-out" iterationCount={2}>
            <TouchableOpacity onPress={handlePostClose} style={styling.footer}>
              <SwipeIcon
                fill="#ffffff"
              />

              <Caption style={styling.helper}>Swipe to close</Caption>
            </TouchableOpacity>
          </Animatable.View>
        )}
      />
    </Modal>
  )
}

render() {
    const {
      children,
      hasDraggableIcon,
      backgroundColor,
      sheetBackgroundColor,
      dragIconColor,
      dragIconStyle,
      draggable = true,
      onRequestClose,
      onClose = () => this.close(),
      radius,
    } = this.props;
    const { animatedHeight, pan, modalVisible } = this.state;
    const panStyle = {
      transform: pan.getTranslateTransform(),
    };

    return (
      <Modal transparent visible={modalVisible} onRequestClose={onRequestClose}>
        <View
          style={[
            styles.wrapper,
            { backgroundColor: backgroundColor || "#25252599" },
          ]}
        >
          <TouchableOpacity
            style={styles.background}
            activeOpacity={1}
            onPress={onClose}
          />
          <Animated.View
            {...(draggable && this.panResponder.panHandlers)}
            style={[
              panStyle,
              styles.container,
              {
                height: animatedHeight,
                borderTopRightRadius: radius || 10,
                borderTopLeftRadius: radius || 10,
                backgroundColor: sheetBackgroundColor || "#F3F3F3",
              },
            ]}
          >
            {hasDraggableIcon && (
              <View style={styles.draggableContainer}>
                <View
                  style={[
                    styles.draggableIcon,
                    dragIconStyle,
                    {
                      backgroundColor: dragIconColor || "#A3A3A3",
                    },
                  ]}
                />
              </View>
            )}
            {children}
          </Animated.View>
        </View>
      </Modal>
    );
  }

FriendsModal = ({modalVisible, toggleVisibility,data,currentUser}) => {
	console.log(currentUser,"item from friend");

	const renderer = ({item}) => {
        return (
            <List friends={true} item = {item} currentUser={currentUser._id}/>
        )
    }
	
	return (
		<Modal
			animationType="fade"
			transparent={false}
			visible={modalVisible}
			onRequestClose={() => {
				toggleVisibility(!modalVisible);
			}}>

			<LinearGradientComp
				bgcolors={{
					colorOne: '#7a7adb',
					colorTwo: 'rgba(0, 0, 0, 1)',
				}}>
				<View>
					<View style={styles.modalView}>
					{
						data.length > 0 ? (
							<>
								<View style={{
									justifyContent:'center',
									alignItems:"center",
									marginBottom:40
								}}> 
									<Text style={{
										color:"white",
										fontSize:28,
										fontWeight:"bold"
									}}>
										Friends
									</Text>
								</View>

								<FlatList
									keyExtractor={(item) => (item._id).toString()}
									data={data}
									renderItem={renderer}
									showsVerticalScrollIndicator={false}
								/>
							</>
						):(
							<FillerContent fillerImage={FillerImage} text={"No friends yet :/"} />
						)
					}
                    </View>       
				</View>
			</LinearGradientComp>
		</Modal>
	);
}

render() {
    if (this.state.callSettings) {
      return (
        <Modal animated animationType="fade">
          <View style={{ height: '100%', width: '100%', position: 'relative' }}>
            <KeepAwake />
            <CometChat.CallingComponent
              callsettings={this.state.callSettings}
            />
          </View>
        </Modal>
      );
    }

    let callScreen = null;
    let errorScreen = null;

    if (this.state.callInProgress) {
      if (this.state.errorScreen) {
        errorScreen = (
          <View>
            <Text>{this.state.errorMessage}</Text>
          </View>
        );
      }

      if (this.state.outgoingCallScreen) {
        callScreen = (
          <Modal animated animationType="fade">
            <View style={style.container}>
              <View style={style.header}>
                <Text style={style.headerLabel}>Calling...</Text>
                <Text style={style.headerName}>
                  {this.state.callInProgress.receiver.name}
                </Text>
              </View>
              <View style={style.thumbnail}>
                <CometChatAvatar
                  cornerRadius={1000}
                  borderColor={this.theme.color.secondary}
                  borderWidth={0}
                  textFontSize={60}
                  image={{ uri: this.state.callInProgress.receiver.avatar }}
                  name={this.state.callInProgress.receiver.name}
                />
              </View>
              {errorScreen}
              <View style={style.iconWrapper}>
                <TouchableOpacity onPress={this.cancelCall}>
                  <View style={style.cancelBtn}>
                    <Icon name="call-end" color="#FFFFFF" size={32} />
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          </Modal>
        );
      }
    }

    if (this.state.callInProgress) {
      return callScreen;
    }

    return null;
  }

PlayListModal = ({modalVisible,toggleVisibility}) => {

    const {updateUser,user,token} = useContext(GlobalContext);
    const [name,setName] = useState("");

    const handleNameChange = (text) => {
        setName(text)        
    }

    const createPlaylist = () => {
        axios.post(`${userApiUrl}/songs/newPlaylist`,{
            playlistName:name
        },{
            headers: {
				Authorization: "Bearer " + token,
			},
        })
        .then(async (res) => {
            console.log(res.data,"data log");
            updateUser(res.data);
            await AsyncStorage.setItem('user', JSON.stringify(res.data));
            toggleVisibility(!modalVisible);
        }).catch((err) => {
            console.log(err,"err");
            // console.log(Array.isArray(err.response.data.errors[0].msg));
            if (Array.isArray(err.response.data.errors)) {
                if (Platform.OS === 'android') {
                    ToastAndroid.show(err.response.data.errors[0].msg, ToastAndroid.SHORT);
                }
            }
        })
    }

    return (
        <Modal
			animationType="fade"
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => {
				toggleVisibility(!modalVisible);
			}}>
                <View style={styles.modalView}>
                    <InputBox
                        style={{
                            backgroundColor: "transparent",
                            color: "white",
                            borderLeftWidth:0,
                            fontSize: 16,
                            borderRightWidth:0,
                            borderTopWidth:0,
                            borderWidth: 1,
                        }}
                        label="PlaylistName"
                        value={name}
                        onChangeText={handleNameChange}
                        textContentType={'name'}
                        autoCompleteType={'name'}
                        viewStyle={{marginBottom: 2}}
                    />
                    <View style={{
                        marginLeft:180,
                        marginTop:20
                    }}>
                        <Button title="remove" onPressFunction={createPlaylist}>
                            Create
                        </Button>
                    </View>

                </View>       
		</Modal>
    )
}

render() {
    const { buttonColor } = this.state;
    const itemStyle = this.props.itemStyle || {};
    return (
      <Modal
        animationType="slide"
        transparent
        visible={this.state.modalVisible}
        onRequestClose={() => {
          console.log('Country picker has been closed.');
        }}
      >
        <View style={styles.basicContainer}>
          <View
            style={[
              styles.modalContainer,
              { backgroundColor: this.props.pickerBackgroundColor || 'white' },
            ]}
          >
            <View style={styles.buttonView}>
              <TouchableOpacity onPress={this.onPressCancel}>
                <Text
                  style={[{ color: buttonColor }, this.props.buttonTextStyle]}
                >
                  {this.props.cancelText || 'Cancel'}
                </Text>
              </TouchableOpacity>

              <TouchableOpacity onPress={this.onPressSubmit}>
                <Text
                  style={[{ color: buttonColor }, this.props.buttonTextStyle]}
                >
                  {this.props.confirmText || 'Confirm'}
                </Text>
              </TouchableOpacity>
            </View>

            <View style={styles.mainBox}>
              <Picker
                ref={ref => {
                  this.picker = ref;
                }}
                style={styles.bottomPicker}
                selectedValue={this.state.selectedCountry}
                onValueChange={country => this.onValueChange(country)}
                itemStyle={itemStyle}
                mode="dialog"
              >
                {Country.getAll().map((country, index) =>
                  this.renderItem(country, index),
                )}
              </Picker>
            </View>
          </View>
        </View>
      </Modal>
    );
  }

RemoveFriendModal = ({modalVisible,toggleVisibility,id}) => {

    const {updateUser,user,token} = useContext(GlobalContext);
    const [removingText,setRemovingText] = useState(false);

    const removeFriend = () => {
        console.log(id,"in remove");
        setRemovingText(true);
        axios.post(`${userApiUrl}/friends/removeFriend`,
        {
            friendId:id,
        },{
            headers: {
				Authorization: "Bearer " + token,
			},
        })
        .then(async (res) => {
            console.log(res.data,"remove user data");
            updateUser(res.data);
            setRemovingText(false);
            await AsyncStorage.setItem('user', JSON.stringify(res.data));
            ToastAndroid.show("Friend Removed", ToastAndroid.SHORT);
        }).catch((err) => {
            setRemovingText(false);
            console.log(err,"err");
            if (Array.isArray(err.response.data.errors)) {
                if (Platform.OS === 'android') {
                    ToastAndroid.show(err.response.data.errors[0].msg, ToastAndroid.SHORT);
                }
            }
        })     
    }

    const closeModal = () => {
        console.log("lol closed");
        toggleVisibility(!modalVisible);
    }

    return (
        <Modal
			animationType="fade"
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => {
				toggleVisibility(!modalVisible);
			}}>
                <View style={styles.modalView}>
                    <Text style={{
                        color:"black",
                        fontSize:18,
                        marginLeft:15,
                        fontFamily:"NotoSans-Regular"
                    }}>
                        Are you sure you want to remove them as friends?
                    </Text>
                    <View style={{
                        marginLeft:"70%",
                        marginTop:20
                    }}>
                        <View style={{
                            flexDirection:"row",
                            justifyContent:"space-between",
                            right:100,
                            top:20,
                        }}>
                        <Button title="Yes" onPressFunction={removeFriend}>
                            {removingText ? "Pro.." : "Yes"}
                        </Button>
                        <Button title="No" onPressFunction={closeModal}>
                            No
                        </Button>
                        </View>
                    </View>

                </View>       
		</Modal>
    )
}

function SaveRecordModal(props) {
  const {visible, onClose, title, onPersistRecord} = props;
  const [name, setName] = React.useState('');

  React.useEffect(() => {
    if (!visible) {
      setName('');
    }
  }, [visible]);

  return (
    <Modal visible={visible} animationType="slide">
      <Appbar.Header>
        <Appbar.Action
          icon={() => <Icon name="close" size={24} />}
          onPress={onClose}
        />
        <Appbar.Content title={title || 'SAVE RECORD'} />
      </Appbar.Header>
      <View style={[styles.wrapper, {padding: 15, backgroundColor: 'white'}]}>
        <TextInput
          value={name}
          onChangeText={setName}
          label="Name"
          mode="outlined"
          autoFocus={true}
          style={{marginBottom: 10}}
        />
        <Button
          mode="contained"
          onPress={() => {
            if (name) {
              onPersistRecord(name);
            }
          }}>
          SAVE
        </Button>
      </View>
    </Modal>
  );
}