Share Tweet and URL From React Native App to Twitter

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.

<br />
import React, { useState } from ‘react’;</p>
<p>import { Alert, Linking, StyleSheet, View, Text, TouchableOpacity, TextInput, Platform } from ‘react-native’;

import React, { useState } from ‘react’;

import { Alert, Linking, StyleSheet, View, Text, TouchableOpacity, TextInput, Platform } from ‘react-native’;

2. Creating our main App component.

<br />
export default function App() {</p>
<p>}

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.

<br />
  const [shareURL_Twitter, setShareURL_Twitter] = useState(‘https://reactnativecode.com’);

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.

<br />
  const [tweet, setTweet] = useState(‘Hello Friends, Welcome to our website.’);

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.

<br />
  const [tweetAccount, setTweetAccount] = useState(‘CodeReactNative’);

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.

<br />
  const postTweet = () => {<br />
    let params = [];<br />
    if (shareURL_Twitter)<br />
      params.push(‘url=’ + encodeURI(shareURL_Twitter));<br />
    if (tweet)<br />
      params.push(‘text=’ + encodeURI(tweet));<br />
    if (tweetAccount)<br />
      params.push(‘via=’ + encodeURI(tweetAccount));</p>
<p>    const shareURL =<br />
      ‘https://twitter.com/intent/tweet?’<br />
      + params.join(‘&’);</p>
<p>    Linking.openURL(shareURL)<br />
      .then((data) => {<br />
        Alert.alert(‘Open…’);<br />
      })<br />
      .catch(() => {<br />
        Alert.alert(‘Something went wrong’);<br />
      });<br />
  };

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.

<br />
return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={styleSheet.title}> Share Tweet and URL From React Native App to Twitter </Text></p>
<p>      <Text style={styleSheet.text}> Enter Tweet </Text></p>
<p>      <TextInput<br />
        value={tweet}<br />
        onChangeText={<br />
          (tweet) => setTweet(tweet)<br />
        }<br />
        placeholder={‘Enter Tweet Content’}<br />
        style={styleSheet.textInput}<br />
      /></p>
<p>      <Text style={styleSheet.text}> Enter URL to Share </Text></p>
<p>      <TextInput<br />
        value={shareURL_Twitter}<br />
        onChangeText={(shareURL_Twitter) =><br />
          setShareURL_Twitter(shareURL_Twitter)<br />
        }<br />
        placeholder={‘Enter URL to Share’}<br />
        style={styleSheet.textInput}<br />
      /></p>
<p>      <Text style={styleSheet.text}> Enter Via Account </Text></p>
<p>      <TextInput<br />
        value={tweetAccount}<br />
        onChangeText={(tweetAccount) =><br />
          setTweetAccount(tweetAccount)<br />
        }<br />
        placeholder={‘Enter Via Account’}<br />
        style={styleSheet.textInput}<br />
      /></p>
<p>      <TouchableOpacity<br />
        activeOpacity={0.7}<br />
        style={styleSheet.button}<br />
        onPress={postTweet}><br />
        <Text style={styleSheet.buttonText}><br />
          Post Tweet<br />
        </Text><br />
      </TouchableOpacity></p>
<p>    </View><br />
  );

return (

<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}>

Post Tweet

</Text>

</TouchableOpacity>

</View>

);

8. Creating Style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,<br />
    alignItems: ‘center’<br />
  },</p>
<p>  title: {<br />
    fontSize: 28,<br />
    color: ‘black’,<br />
    textAlign: ‘center’,<br />
    fontWeight: ‘bold’<br />
  },</p>
<p>  text: {<br />
    fontSize: 22,<br />
    color: ‘black’,<br />
    marginTop: 5,<br />
    marginBottom: 5<br />
  },</p>
<p>  textInput: {<br />
    height: 44,<br />
    borderColor: ‘green’,<br />
    borderWidth: 1,<br />
    width: ‘88%’,<br />
    paddingHorizontal: 10,<br />
    borderRadius: 7<br />
  },</p>
<p>  button: {<br />
    justifyContent: ‘center’,<br />
    width: ‘88%’,<br />
    padding: 12,<br />
    backgroundColor: ‘#AEEA00’,<br />
    marginTop: 12<br />
  },</p>
<p>  buttonText: {<br />
    color: ‘#fff’,<br />
    textAlign: ‘center’,<br />
    fontSize: 20<br />
  }</p>
<p>});

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 :-

<br />
import React, { useState } from ‘react’;</p>
<p>import { Alert, Linking, StyleSheet, View, Text, TouchableOpacity, TextInput, Platform } from ‘react-native’;</p>
<p>export default function App() {</p>
<p>  const [shareURL_Twitter, setShareURL_Twitter] = useState(‘https://reactnativecode.com’);</p>
<p>  const [tweet, setTweet] = useState(‘Hello Friends, Welcome to our website.’);</p>
<p>  const [tweetAccount, setTweetAccount] = useState(‘CodeReactNative’);</p>
<p>  const postTweet = () => {<br />
    let params = [];<br />
    if (shareURL_Twitter)<br />
      params.push(‘url=’ + encodeURI(shareURL_Twitter));<br />
    if (tweet)<br />
      params.push(‘text=’ + encodeURI(tweet));<br />
    if (tweetAccount)<br />
      params.push(‘via=’ + encodeURI(tweetAccount));</p>
<p>    const shareURL =<br />
      ‘https://twitter.com/intent/tweet?’<br />
      + params.join(‘&’);</p>
<p>    Linking.openURL(shareURL)<br />
      .then((data) => {<br />
        Alert.alert(‘Open…’);<br />
      })<br />
      .catch(() => {<br />
        Alert.alert(‘Something went wrong’);<br />
      });<br />
  };</p>
<p>  return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={styleSheet.title}> Share Tweet and URL From React Native App to Twitter </Text></p>
<p>      <Text style={styleSheet.text}> Enter Tweet </Text></p>
<p>      <TextInput<br />
        value={tweet}<br />
        onChangeText={<br />
          (tweet) => setTweet(tweet)<br />
        }<br />
        placeholder={‘Enter Tweet Content’}<br />
        style={styleSheet.textInput}<br />
      /></p>
<p>      <Text style={styleSheet.text}> Enter URL to Share </Text></p>
<p>      <TextInput<br />
        value={shareURL_Twitter}<br />
        onChangeText={(shareURL_Twitter) =><br />
          setShareURL_Twitter(shareURL_Twitter)<br />
        }<br />
        placeholder={‘Enter URL to Share’}<br />
        style={styleSheet.textInput}<br />
      /></p>
<p>      <Text style={styleSheet.text}> Enter Via Account </Text></p>
<p>      <TextInput<br />
        value={tweetAccount}<br />
        onChangeText={(tweetAccount) =><br />
          setTweetAccount(tweetAccount)<br />
        }<br />
        placeholder={‘Enter Via Account’}<br />
        style={styleSheet.textInput}<br />
      /></p>
<p>      <TouchableOpacity<br />
        activeOpacity={0.7}<br />
        style={styleSheet.button}<br />
        onPress={postTweet}><br />
        <Text style={styleSheet.buttonText}><br />
          Post Tweet<br />
        </Text><br />
      </TouchableOpacity></p>
<p>    </View><br />
  );<br />
};</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,<br />
    alignItems: ‘center’<br />
  },</p>
<p>  title: {<br />
    fontSize: 28,<br />
    color: ‘black’,<br />
    textAlign: ‘center’,<br />
    fontWeight: ‘bold’<br />
  },</p>
<p>  text: {<br />
    fontSize: 22,<br />
    color: ‘black’,<br />
    marginTop: 5,<br />
    marginBottom: 5<br />
  },</p>
<p>  textInput: {<br />
    height: 44,<br />
    borderColor: ‘green’,<br />
    borderWidth: 1,<br />
    width: ‘88%’,<br />
    paddingHorizontal: 10,<br />
    borderRadius: 7<br />
  },</p>
<p>  button: {<br />
    justifyContent: ‘center’,<br />
    width: ‘88%’,<br />
    padding: 12,<br />
    backgroundColor: ‘#AEEA00’,<br />
    marginTop: 12<br />
  },</p>
<p>  buttonText: {<br />
    color: ‘#fff’,<br />
    textAlign: ‘center’,<br />
    fontSize: 20<br />
  }</p>
<p>});

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 (

<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}>

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 :-

Share Tweet and URL From React Native App to Twitter

Contents in this project Share Tweet and URL From React Native App to Twitter :-

Also Read :

Recent Posts

Search Here