Hello friends, In today’s tutorial we would learn about sharing message(tweet) directly from react native application to Twitter. This can be possible via Linking component of react native. Now what we actually do in this tutorial is use twitter’s own URL ‘https://twitter.com/intent/tweet + Params’ to open the Twitter in mobile. If Twitter app is installed in our mobile then it will open Twitter app and If we don’t have the App then it will open the default browser of mobile. So in this tutorial we would Share Tweet and URL From React Native App to Twitter.
Contents in this project Share Tweet and URL From React Native App to Twitter :-
1. Open your project’s main App.js file and import useState, Alert, Linking, StyleSheet, View, Text, TouchableOpacity, TextInput and Platform component.
1
2
3
|
import React, { useState } from ‘react’;
import { Alert, Linking, StyleSheet, View, Text, TouchableOpacity, TextInput, Platform } from ‘react-native’;
|
2. Creating our main App component.
1
2
3
4
5
|
export default function App() {
}
|
3. Creating a State named as shareURL_Twitter with State update method setShareURL_Twitter. In this state we would store the HTTP URL.
1
|
const [shareURL_Twitter, setShareURL_Twitter] = useState(‘https://reactnativecode.com’);
|
4. Creating another state named as tweet with state update method setTweet. In this state we would store the Tweet we would share on Twitter.
1
|
const [tweet, setTweet] = useState(‘Hello Friends, Welcome to our website.’);
|
5. Creating another State named as tweetAccount with State update method setTweetAccount. In this state we would store the Account from which we want to share Tweet.
1
|
const [tweetAccount, setTweetAccount] = useState(‘CodeReactNative’);
|
6. Creating a function named as postTweet(). In this method we would simply add all above 3 States with Twitter share URL.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const postTweet = () => {
let params = [];
if (shareURL_Twitter)
params.push(‘url=’ + encodeURI(shareURL_Twitter));
if (tweet)
params.push(‘text=’ + encodeURI(tweet));
if (tweetAccount)
params.push(‘via=’ + encodeURI(tweetAccount));
const shareURL =
‘https://twitter.com/intent/tweet?’
+ params.join(‘&’);
Linking.openURL(shareURL)
.then((data) => {
Alert.alert(‘Open…’);
})
.catch(() => {
Alert.alert(‘Something went wrong’);
});
};
|
7. Creating return() block, Now we would make 3 Text Input component with a Button to share Tweet.
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
|
return (
<View style={styleSheet.MainContainer}>
<Text style={styleSheet.title}> Share Tweet and URL From React Native App to Twitter </Text>
<Text style={styleSheet.text}> Enter Tweet </Text>
<TextInput
value={tweet}
onChangeText={
(tweet) => setTweet(tweet)
}
placeholder={‘Enter Tweet Content’}
style={styleSheet.textInput}
/>
<Text style={styleSheet.text}> Enter URL to Share </Text>
<TextInput
value={shareURL_Twitter}
onChangeText={(shareURL_Twitter) =>
setShareURL_Twitter(shareURL_Twitter)
}
placeholder={‘Enter URL to Share’}
style={styleSheet.textInput}
/>
<Text style={styleSheet.text}> Enter Via Account </Text>
<TextInput
value={tweetAccount}
onChangeText={(tweetAccount) =>
setTweetAccount(tweetAccount)
}
placeholder={‘Enter Via Account’}
style={styleSheet.textInput}
/>
<TouchableOpacity
activeOpacity={0.7}
style={styleSheet.button}
onPress={postTweet}>
<Text style={styleSheet.buttonText}>
Post Tweet
</Text>
</TouchableOpacity>
</View>
);
|
8. 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
35
36
37
38
39
40
41
42
43
44
45
46
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
alignItems: ‘center’
},
title: {
fontSize: 28,
color: ‘black’,
textAlign: ‘center’,
fontWeight: ‘bold’
},
text: {
fontSize: 22,
color: ‘black’,
marginTop: 5,
marginBottom: 5
},
textInput: {
height: 44,
borderColor: ‘green’,
borderWidth: 1,
width: ‘88%’,
paddingHorizontal: 10,
borderRadius: 7
},
button: {
justifyContent: ‘center’,
width: ‘88%’,
padding: 12,
backgroundColor: ‘#AEEA00’,
marginTop: 12
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
fontSize: 20
}
});
|
9. 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import React, { useState } from ‘react’;
import { Alert, Linking, StyleSheet, View, Text, TouchableOpacity, TextInput, Platform } from ‘react-native’;
export default function App() {
const [shareURL_Twitter, setShareURL_Twitter] = useState(‘https://reactnativecode.com’);
const [tweet, setTweet] = useState(‘Hello Friends, Welcome to our website.’);
const [tweetAccount, setTweetAccount] = useState(‘CodeReactNative’);
const postTweet = () => {
let params = [];
if (shareURL_Twitter)
params.push(‘url=’ + encodeURI(shareURL_Twitter));
if (tweet)
params.push(‘text=’ + encodeURI(tweet));
if (tweetAccount)
params.push(‘via=’ + encodeURI(tweetAccount));
const shareURL =
‘https://twitter.com/intent/tweet?’
+ params.join(‘&’);
Linking.openURL(shareURL)
.then((data) => {
Alert.alert(‘Open…’);
})
.catch(() => {
Alert.alert(‘Something went wrong’);
});
};
return (
<View style={styleSheet.MainContainer}>
<Text style={styleSheet.title}> Share Tweet and URL From React Native App to Twitter </Text>
<Text style={styleSheet.text}> Enter Tweet </Text>
<TextInput
value={tweet}
onChangeText={
(tweet) => setTweet(tweet)
}
placeholder={‘Enter Tweet Content’}
style={styleSheet.textInput}
/>
<Text style={styleSheet.text}> Enter URL to Share </Text>
<TextInput
value={shareURL_Twitter}
onChangeText={(shareURL_Twitter) =>
setShareURL_Twitter(shareURL_Twitter)
}
placeholder={‘Enter URL to Share’}
style={styleSheet.textInput}
/>
<Text style={styleSheet.text}> Enter Via Account </Text>
<TextInput
value={tweetAccount}
onChangeText={(tweetAccount) =>
setTweetAccount(tweetAccount)
}
placeholder={‘Enter Via Account’}
style={styleSheet.textInput}
/>
<TouchableOpacity
activeOpacity={0.7}
style={styleSheet.button}
onPress={postTweet}>
<Text style={styleSheet.buttonText}>
Post Tweet
</Text>
</TouchableOpacity>
</View>
);
};
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
alignItems: ‘center’
},
title: {
fontSize: 28,
color: ‘black’,
textAlign: ‘center’,
fontWeight: ‘bold’
},
text: {
fontSize: 22,
color: ‘black’,
marginTop: 5,
marginBottom: 5
},
textInput: {
height: 44,
borderColor: ‘green’,
borderWidth: 1,
width: ‘88%’,
paddingHorizontal: 10,
borderRadius: 7
},
button: {
justifyContent: ‘center’,
width: ‘88%’,
padding: 12,
backgroundColor: ‘#AEEA00’,
marginTop: 12
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
fontSize: 20
}
});
|
Screenshots :-