I'm creating an application using react native and I need to allow user to open all the available social networks of another user.
I saw that question and this one, but they doesn't works for me.
can anyone help
EDIT
I know how to create icons and call social networks' website, however, what I want is to open a user profile in a social networks app
I remarked that for instagram, the user profile url, opens the app, howover for Fb, it opens the website,
For instagram this is working for me,
Linking.openURL('https://www.instagram.com/profile_username/');
for facebook its just opening the facebook app.
Linking.openURL('fb://profile_username/');
This following is used in my project. Its the contact US page of my react native app.
Works fine for me.
import React, { Component } from 'react';
import { StyleSheet, Text, Dimensions, View, TouchableNativeFeedback, TouchableOpacity, Image, Linking, ScrollView, Platform } from 'react-native';
import { Icon, Card, CardItem } from 'native-base';
import Colors from '../config/Colors';
import Dimens from '../config/Dimens';
import { RNToasty } from 'react-native-toasty';
import OneSignal from 'react-native-onesignal';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { colors } from 'react-native-elements';
import { Header } from 'react-navigation';
import HeaderBackground from '../components/HeaderBackground';
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
class SocialMedia extends Component {
constructor(props) {
super(props);
}
static navigationOptions = ({ navigation }) => {
return {
header: (props) => <HeaderBackground {...props} />,
headerStyle: {
backgroundColor: Colors.transparent,
paddingTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
height: Header.HEIGHT + (Platform.OS === 'ios' ? 0 : getStatusBarHeight()),
},
title: 'Social Media',
headerTintColor: Colors.white,
headerTitleStyle: {
fontWeight: 'bold',
padding: 5,
paddingTop: 10
},
headerMode: 'float',
headerLeft: <Icon
onPress={() => navigation.goBack()}
name="arrow-back"
type='MaterialIcons'
style={{ color: 'white', marginLeft: 10, padding: 5, paddingTop: 10 }}
/>,
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.cardContainer}>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.facebook.com/max/') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_Facebook.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>Facebook</Text>
</CardItem>
</Card>
</TouchableOpacity>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.instagram.com/max/') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_Insta.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>Instagram</Text>
</CardItem>
</Card>
</TouchableOpacity>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.youtube.com/channel/UCnQoipGmBRC1XTOUY8c1UdA') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_YT.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>YouTube</Text>
</CardItem>
</Card>
</TouchableOpacity>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://max.com/') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_web.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>Website</Text>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 8
},
contentContainer: {
paddingBottom: 20
},
cardContainer: {
flex: 1,
padding: 5,
width: '100%',
},
card: {
padding: 5,
height: height * .20,
width: '100%',
backgroundColor: '#fff',
flexDirection: 'column',
//alignItems: 'center',
//justifyContent: 'center',
shadowColor: '#1A9EAEFF',
shadowOffset: { width: 3, height: 3 },
shadowOpacity: 3,
shadowRadius: 2,
elevation: 10,
borderRadius: 5,
overflow: 'hidden'
},
cardBody: {
flex: 1,
flexDirection: 'row',
},
iconText: {
flex: 1,
fontWeight: 'bold',
alignItems: 'center',
justifyContent: 'center',
fontSize: 18,
color: '#1A9EAEFF'
},
icon: {
flex: 1,
width: '100%',
height: width * .18,
},
});
export default SocialMedia;Hope this helps..
You're good to go!!
