Hello guys, As we all know Facebook covers a large amount of our lives. Social Media helps us to connect with our loved once, friends and family with a very significant way. In today’s tutorial we would learn about something new. Today we would learn about sharing Text message and web address from our react native app to Facebook news feed, wall and Story. This can be possible via Linking component in react native. Now what we’re going to do is we would make 2 Text Input component and on the First Text Input user will enter any web address which he wants to share and on the next Text input he can enter any message. Now when user click on the Post button then it will automatically redirect to Facebook App(If installed in mobile) or open the Facebook in mobile default web browser. So in this tutorial we would learn about Example of Share Post URL from React Native App to Facebook.
Contents in this project Example of Share Post URL from React Native App to Facebook :-
1. Open your project’s main App.js file and import Alert, Linking, View, StyleSheet, SafeAreaView, Text, TouchableOpacity and TextInput component.
|
1 2 3 |
import React, { useState } from 'react'; import { Alert, Linking, View, StyleSheet, SafeAreaView, Text, TouchableOpacity, TextInput } from 'react-native'; |
2. Creating our main component default App.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating a State named as fbShareURL with State update method setfbShareURL(). This state is used to hold the URL which we want to share on Facebook. Default value is our own website name.
|
1 |
const [fbShareURL, setfbShareURL] = useState('https://reactnativecode.com'); |
4. Creating another state named as content with State update method setContent(). This state is used to store the text post message which we want to share with our URL.
|
1 |
const [content, setContent] = useState('Hello, Welcome To our Website.'); |
5. Creating a function named as publishOnFB(). In this function we would simply add our URL and message to a params variable and send it to FB using linking component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const publishOnFB = () => { let params = []; if (fbShareURL) params.push('u=' + encodeURI(fbShareURL)); if (content) params.push('quote=' + encodeURI(content)); const url = 'https://www.facebook.com/sharer/sharer.php?' + params.join('&'); Linking.openURL(url) .then((data) => { Alert.alert('Facebook....'); }) .catch(() => { Alert.alert('Something went wrong'); }); }; |
6. Creating return() block, Now we would make 2 Text Input component and 1 Touchable opacity button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
return ( <SafeAreaView style={styleSheet.MainContainer}> <Text style={styleSheet.text}> Share Post and URL From React Native App to FaceBook </Text> <Text style={{ fontSize: 24, color: 'black', marginTop: 20, marginBottom: 10 }}> Enter Post Message </Text> <TextInput value={content} onChangeText={ (content) => setContent(content) } placeholder={'Enter Facebook Post Message'} style={styleSheet.textInput} /> <Text style={{ fontSize: 24, color: 'black', marginTop: 10, marginBottom: 10 }}> Enter URL to Share </Text> <TextInput value={fbShareURL} onChangeText={(fbShareURL) => setfbShareURL(fbShareURL) } placeholder={'Post URL to Share'} style={styleSheet.textInput} /> <TouchableOpacity activeOpacity={0.6} style={styleSheet.button} onPress={publishOnFB}> <Text style={{ color: 'white', textAlign: 'center', fontWeight: 'bold' }}> Share Content on Facebook </Text> </TouchableOpacity> </SafeAreaView> ); |
7. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', padding: 20 }, text: { fontSize: 28, color: 'black', textAlign: 'center', fontWeight: 'bold', }, textInput: { height: 42, borderColor: '#4CAF50', borderRadius: 7, borderWidth: 1, width: '90%', paddingHorizontal: 8, }, button: { marginTop: 10, padding: 10, justifyContent: 'center', backgroundColor: '#00B8D4', borderRadius:5, width: '80%' } }); |
8. Complete Source Code for App.js file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import React, { useState } from 'react'; import { Alert, Linking, View, StyleSheet, SafeAreaView, Text, TouchableOpacity, TextInput } from 'react-native'; export default function App() { const [fbShareURL, setfbShareURL] = useState('https://reactnativecode.com'); const [content, setContent] = useState('Hello, Welcome To our Website.'); const publishOnFB = () => { let params = []; if (fbShareURL) params.push('u=' + encodeURI(fbShareURL)); if (content) params.push('quote=' + encodeURI(content)); const url = 'https://www.facebook.com/sharer/sharer.php?' + params.join('&'); Linking.openURL(url) .then((data) => { Alert.alert('Facebook....'); }) .catch(() => { Alert.alert('Something went wrong'); }); }; return ( <SafeAreaView style={styleSheet.MainContainer}> <Text style={styleSheet.text}> Share Post and URL From React Native App to FaceBook </Text> <Text style={{ fontSize: 24, color: 'black', marginTop: 20, marginBottom: 10 }}> Enter Post Message </Text> <TextInput value={content} onChangeText={ (content) => setContent(content) } placeholder={'Enter Facebook Post Message'} style={styleSheet.textInput} /> <Text style={{ fontSize: 24, color: 'black', marginTop: 10, marginBottom: 10 }}> Enter URL to Share </Text> <TextInput value={fbShareURL} onChangeText={(fbShareURL) => setfbShareURL(fbShareURL) } placeholder={'Post URL to Share'} style={styleSheet.textInput} /> <TouchableOpacity activeOpacity={0.6} style={styleSheet.button} onPress={publishOnFB}> <Text style={{ color: 'white', textAlign: 'center', fontWeight: 'bold' }}> Share Content on Facebook </Text> </TouchableOpacity> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', padding: 20 }, text: { fontSize: 28, color: 'black', textAlign: 'center', fontWeight: 'bold', }, textInput: { height: 42, borderColor: '#4CAF50', borderRadius: 7, borderWidth: 1, width: '90%', paddingHorizontal: 8, }, button: { marginTop: 10, padding: 10, justifyContent: 'center', backgroundColor: '#00B8D4', borderRadius:5, width: '80%' } }); |
Screenshots :-
