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>
Related
<View style={styles.bottomContainer} >
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} onPress = {loginHandler} >
<Text style={styles.buttontext} >LOG IN</Text>
</Pressable>
</Animated.View>
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} >
<Text style={styles.buttontext} onPress = {registerHandler} >REGISTER</Text>
</Pressable>
</Animated.View>
<Animated.View style={[styles.inputformcontainer, formAnimatedStyle ]}>
<TextInput placeholder="Email"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Full Name"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Password"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<View style = {styles.formButton}>
<Text style={styles.buttontext}> LOG IN </Text>
</View>
</Animated.View>
</View>
Here is the Styling of above views:
bottomContainer: {
justifyContent: 'center',
height: height / 3,
},
inputformcontainer:{
backgroundColor:'grey',
color: '#000',
marginBottom: 70,
...StyleSheet.absoluteFill,
justifyContent : "center",
},
DETAILS OF THE CODE
so basically I am trying to create an aninated view where the "forminput" container should pop up when user taps on log in or register button. But the problem is that my buttons dont work when because the forminput container lands on top of them somehow (eventho it is invisible). The person I am following used
zIndex: -1
to place it underneath the view but it does not work in android.
PS: I have also tried "elevation" Prop but that doest seem to work either.
I am trying to style two elements that need to appear on the same line in my react native app. What I have thus far positions them on the same line - using nested <Text> elements - but I'm unclear how to then be able to create some distance between them. For instance, in the example below, I want the icon to be left-aligned, which it is now, but I want the this.props.client.name text to be center-aligned. From my understanding margin is ignored in children elements. How can I accomplish this?
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
You can try styling them using "flex" css properties.
for example if you have:
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
TRY
<View>
<Text>
<View style={{ display: "flex", alignItems: "center",
position: "relative", zIndex: 1 }}>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
style={{position: "absolute", zIndex: 2, left: 0 }}
/>
<Text>{this.props.client.name}</Text>
</View>
</Text>
</ View>
You should now have your Icon on the left and your text centered.
Read more about Flexbox here. reactnative.dev/docs/flexbox
as the title states, I am attempting to implement a modal in such way that it only takes up some part of the screen so as to allow the user to be able to interact with some of the background components. For reference I am using the react-native-modal library. The current screen looks like this:
I would like to be able to interact with the icons in the header (both are already wrapped in Touchable components so already clickable). However when the Modal is visible I am unable to interact with those.
My implementation is as such:
<Modal
isVisible={showModal}
style={styles.modalContainer}
customBackdrop={<CustomBackdrop />}
onBackdropPress={() => setShowModal(false)}
animationIn="fadeInDown"
animationOut="fadeOutUp"
>
<View style={styles.container}>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>A</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>B</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>C</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>D</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.itemContainer,
{ borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
]}
>
<Text style={styles.label}>E</Text>
</TouchableOpacity>
</View>
</Modal>
And my custom background looks like this:
<View
style={{
marginTop: hp("50%"),
flex: 1,
}}
>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View
style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
/>
</TouchableWithoutFeedback>
</View>
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?
I made a scrollable header for an app I am building for a company. When I try to use a TouchableHighlight to trigger an onPress() event it does not register because the position key is set to 'absolute':
Ive tried the following after scouring the internet for hours:
-raising the zIndex/elevation
-making sure TouchableHighlight is imported from 'react-native'
-Animated library from 'react-native-reanimated'
When I comment out the position:absolute in the main header it works perfectly, but the header leaves a view behind it when it scrolls up that I cant lay a view on top of.
I'm running out of options here...any help would be GREATLY appreciated!
<Animated.View style={globalStyles.tabNavbar}>
<TouchableHighlight
style={{backgroundColor: 'white', height: 50, width: 100, zIndex: 99999, elevation: 99999}}
underlayColor="#eee"
onPress={() => {
console.log('PLZ WORK');
this.updateTabs('projectsTab');
}} >
<Animated.View style={{ alignItems: 'center'}}>
<Text onPress={() => { this.updateTabs('projectsTab');}} style={{fontWeight: 'bold'}}>Close</Text>
</Animated.View>
</TouchableHighlight>
<TouchableHighlight
style={{color: 'white'}}
underlayColor="#eee"
onPress={() => {
console.log('PLZ WORK');
this.updateTabs('notificationTab');
}} >
<View style={{alignItems: 'center'}}>
<Text style={{fontWeight: 'bold'}}>Close</Text>
</View>
</TouchableHighlight>
</Animated.View>
For those wondering, If you alter the View order of the Components to where the component with position: absolute is last, the buttons will work. In this situation I had to put my header last in the order even though it appears at the top of my screen.