I am using modal from react-native to display a bigger view of an image:
import { Modal } from 'react-native'
<Modal
animationType="slide"
visible={this.state.modalOpen}
presentationStyle="pageSheet"
swipeDirection='down'
swipeThreshold={50}
onSwipeComplete={()=> this.closeImageModal()}
onDismiss={() => this.closeImageModal()}>
<View style={{ flex: 1, backgroundColor: '#121212', justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity
style={{padding: 15}}
onPress = { () => this.closeImageModal() }>
<Ionicons name="ios-close-circle" size={30} color="red" />
</TouchableOpacity>
<Image
source={{ uri: this.state.image }}
style={styles.fullScreenImage}
/>
</View>
</Modal>
Right now, I need to press the touchable opacity above the image to close the modal.
I have tried using react-native-modal, and it has been extremely glitchy and difficult to use in my application, so I decided to stick with the modal from react native. Is there any way I can implement swiping down to close with this modal, without having to use react-native-modal?
Related
I want to add my social media links on my app.
But when I add them with url, they are opening on browser.
When I use facebook:// system, It doesnt work on Android.
I want my URL's to work as "if app is exist, then open it on app."
That doesnt work on Android:
import * as Linking from 'expo-linking'
<TouchableOpacity style={[styles.iconButton, { backgroundColor: '#3b5998' }]} onPress={() => Linking.openURL('fb://page/blablabla')}>
<FontAwesome name="facebook" size={26} color="#fff" />
</TouchableOpacity>
That doesnt open URL's on their native app:
<TouchableOpacity style={[styles.iconButton, { backgroundColor: '#3b5998' }]} onPress={() => Linking.openURL('https://www.facebook.com/blablabla')}>
<FontAwesome name="facebook" size={26} color="#fff" />
</TouchableOpacity>
this is how you can open link.
import { View, Text, Image, Linking, TouchableOpacity} from 'react-native'
<TouchableOpacity style={{ marginVertical: 5 }} onPress={()=>{ Linking.openURL(item.link)}}>
<Text style={{ alignSelf: 'center', color: '#2575FC' }}>
Click here to read more
</Text>
</TouchableOpacity>
I am making an application in react native. Here I am able to open Modal at a click and also able to close the modal when clicked inside of the Modal. But I also want to close the Modal when clicked outside of it.
Below is my code:
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Modal, TouchableWithoutFeedback, Alert } from 'react-native';
function Main({ navigation }) {
const [modalVisible, setModalVisible] = useState(false);
return (
{/* This is not working */}
<TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}>
<View>
{/* MODAL FOR LANGUAGE */}
<Modal animationType="slide" transparent={true} visible={modalVisible}>
<View>
<Text>Select Language</Text>
</View>
{/* Close modal*/}
<TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
<Text>English</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
<Text>Hindi</Text>
</TouchableOpacity>
</Modal>
<View>
{/* Open modal*/}
<TouchableOpacity onPress={() => { setModalVisible(true); }} >
<Text>Language</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
);
}
I hope from the comments you can see that I am opening modal when clicked on <Text>Language</Text> , and I am able to close modal when clicked on <Text>English</Text> and <Text>Hindi</Text>, which is inside the modal.
To close the modal when clicked on outside of modal I used <TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}> , but this is not working.
NOTE: I have intentionally removed all the styling part so that my code here looks clean and that I can make it clear about what I want.
I believe when modal is visible it covers all the screen and you do not have access to the underlaying components. Did you try to create a backdrop inside modal?
Here's an example:
return (
<View>
{/* MODAL FOR LANGUAGE */}
<View>
{/* Open modal*/}
<TouchableOpacity
onPress={() => {
this.setModalVisible(true);
}}
>
<Text>Language</Text>
</TouchableOpacity>
</View>
<Modal animationType="slide" transparent={true} visible={modalVisible}>
<TouchableOpacity
activeOpacity={0.5}
style={{
height: '100%',
backgroundColor: '#e74655',
opacity: 0.5
}}
onPress={() => {
this.setModalVisible(!modalVisible);
}}
/>
<View
style={{
width: '100%',
height: '80%',
borderWidth: 1,
borderColor: '#000',
position: 'absolute',
bottom: 0,
backgroundColor: '#fff'
}}
>
<View>
<Text>Select Language</Text>
</View>
{/* Close modal*/}
<TouchableOpacity
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text>English</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text>Hindi</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
)
Which produces this result, where the red area is touchable and closes the modal when you press on it
Good day,
I'm building a React Native app with expo and I have a list of photos that I need to render but further down the screen.
My problem is that I need a scrollview to render the content before, but I can't have a list inside a scrollview so I tried to put my flatlist just after the closing tag scrollview but now the flatlist renders mid-page and the above content is scrollable from mid page up.
What i'm trying to do is have a continued view from the top of the screen to the end of my flatlist.
I've tried setting the flex of my scrollview at 1 so it would take up all the screen but it doesn't.
Thank you for your help!!!
EDIT
renderFeed = (data) =>
<View style={{ marginTop: 25, marginLeft: 5 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('EditContact', { id: data.item.id })}>
<Image style={{ width: 300, height: 300, marginRight: 5 }}
source={{ uri: data.item.profile }}>
</Image>
</TouchableOpacity>
<Text style={{ color: '#fff', fontSize: 20, marginBottom: 10, marginTop: 10, marginLeft: 5, alignSelf: 'center' }}>{data.item.name}</Text>
</View>
render() {
return (
<View style={styles.container}>
<View>
// top of the page outside of scrollview
</View>
<ScrollView>
<View>
// some text and a horizontal flatlist that renders as
// expected
</View>
</ScrollView>
<FlatList
data={this.state.infoSource}
renderItem={item => this.renderFeed(item)}
keyExtractor={item => item.id.toString()}
numColumns={2}
/>
</View>
);
}
}
I want to show a modal when the user taps a button, without dismissing the keyboard. Unfortunately, the keyboard is dismissed as soon as the modal appears.
Minimum repro case:
import * as React from "react";
import { Button, Modal, Text, TextInput, View } from "react-native";
function TestComp() {
const [showingModal, setshowingModal] = React.useState(false);
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center", marginTop: 22 }}>
<Modal visible={showingModal} transparent onRequestClose={() => setshowingModal(false)}>
<View style={{ flex: 1, marginTop: 22 }}>
<Button title={"hide modal"} onPress={() => setshowingModal(false)} />
</View>
</Modal>
<TextInput placeholder="Focus to show keyboard" />
<Button title={"Show modal"} onPress={() => setshowingModal(true)} />
</View>
);
}
FYI, I am using expo.
How can I force the keyboard to persist?
You can add a hidden TextInput inside the modal with the attribute autoFocus, it's a pretty simple workaround, when you press the button and the modal showsup the focus will go to the hidden input keeping the keyboard open
https://snack.expo.io/Q01r_WD2A
import * as React from 'react';
import {Button,Modal,Text,TextInput,View,Keyboard,ScrollView} from 'react-native';
export default function TestComp() {
const [showingModal, setshowingModal] = React.useState(false);
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center", marginTop: 22 }}>
<Modal
visible={showingModal}
transparent
onRequestClose={() => setshowingModal(false)}>
<View style={{ flex: 1, marginTop: 22 }}>
<TextInput autoFocus={true} placeholder="Autofocus to keep the keyboard" style={{display: 'none'}} />
<Button title={'hide modal'} onPress={() => setshowingModal(false)} />
</View>
</Modal>
<TextInput placeholder="Focus to show keyboard" />
<Button title={'Show modal'} onPress={() => setshowingModal(true)} />
</View>
);
}
How can i display animation on Button when screen is loading in react-native ?
I want to apply animation on Button and display it's effect when it is loading in screen.so please help me.How i can achieve this functionality in react-native.
Use this spinner button library and change your flag according to the api response.
Using react-native-animatable and react-native-button you can achieve the animation on a button , One of the simple expression is as below
<View style={styles.container}>
<Button onPress={this.onPress}>
<Animatable.Text
animation="pulse"
easing="ease-out"
iterationCount="infinite"
style={{ textAlign: 'center', fontSize: 100 }}>
OK
</Animatable.Text>
</Button>
</View>
You can set state of isLoading and set iterationCount to 0 when the loading completes
<View style={styles.container}>
<Button onPress={this.onPress}>
{this.state.isLoading ?
<React.Fragment>
<Text style={{ textAlign: 'center', fontSize: 100 }}>
Loading ...
</Text>
<ActivityIndicator/>
</React.Fragment> : <Text>Press me <Text>
</Button>
</View>