Share API is used to share any Text message from react native android iOS application to any pre installed and post installed apps in both Android and iOS mobile phone device. The Share API gives us a platform to sharing content between apps. We can share Text message from directly our app to What’s App contacts, Hike Contacts, Groups, SMS, Copy to Clipboard, Share to Google drive, Memo, Bluetooth, Add to OneNote, Email, Gmail, Hangouts, and One Drive and any installed application. So in this tutorial we would going to create a react native app with Share API example to Share TextInput message from App in both Android iOS devices example tutorial.
Contents in this project Share API example to Share TextInput message from App iOS Android example:
1. Import Platform, View, Text, StyleSheet, Share, TextInput and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, View, Text, StyleSheet, Share, TextInput, Button, Alert } from ‘react-native’;
|
2. Create constructor() in your project. Now make a state named as TextInputValueHolder . This state is used to store the TextInput entered value.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor()
{
super();
this.state =
{
TextInputValueHolder: ”
}
}
|
3. Create a function named as ShareMessage(). Inside this function we would create the Share API component call its inbuilt method Share.share({ message : Your Message }). We would pass the State as message in here. So any text stored in TextInputValueHolder State shall share as message.
|
1
2
3
4
5
6
7
8
9
|
ShareMessage=()=>
{
Share.share(
{
message: this.state.TextInputValueHolder.toString()
}).then(result => console.log(result)).catch(errorMsg => console.log(errorMsg));
}
|
4. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
);
}
|
5. Create 1 TextInput and 1 Button component in Root View. We would store the TextInput inside typed value in State and call the ShareMessage() function on button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render()
{
return(
<View style = { styles.MainContainer }>
<TextInput
underlineColorAndroid = “transparent”
placeholder=“Enter Text Here To Share”
style = { styles.TextInputStyle }
onChangeText = { ( TextInputText ) => { this.setState({ TextInputValueHolder: TextInputText })} }
/>
<Button title=“Click Here To Share TextInput Inside Typed Text as Message” onPress={ this.ShareMessage } />
</View>
);
}
|
6. Create Style for Root View and TextInput.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
margin:10
},
TextInputStyle:
{
borderWidth: 1,
borderColor: ‘#009688’,
width: ‘100%’,
height: 40,
borderRadius: 10,
marginBottom: 10,
textAlign: ‘center’
}
});
|
7. 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
|
import React, { Component } from ‘react’;
import { Platform, View, Text, StyleSheet, Share, TextInput, Button, Alert } from ‘react-native’;
export default class Myapp extends Component<{}>
{
constructor()
{
super();
this.state =
{
TextInputValueHolder: ”
}
}
ShareMessage=()=>
{
Share.share(
{
message: this.state.TextInputValueHolder.toString()
}).then(result => console.log(result)).catch(errorMsg => console.log(errorMsg));
}
render()
{
return(
<View style = { styles.MainContainer }>
<TextInput
underlineColorAndroid = “transparent”
placeholder=“Enter Text Here To Share”
style = { styles.TextInputStyle }
onChangeText = { ( TextInputText ) => { this.setState({ TextInputValueHolder: TextInputText })} }
/>
<Button title=“Click Here To Share TextInput Inside Typed Text as Message” onPress={ this.ShareMessage } />
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
margin:10
},
TextInputStyle:
{
borderWidth: 1,
borderColor: ‘#009688’,
width: ‘100%’,
height: 40,
borderRadius: 10,
marginBottom: 10,
textAlign: ‘center’
}
});
|
Screenshot in Android device :
Screenshots in iOS device:
Also Read :
Animated useNativeDriver was not specified This is a required option React Native Error Solution
React Native Call Function Task After Some Time Delay Using setTimeout(function())
Add Header Footer to ListView Component in React Native iOS Android
React Native Drawer Navigator Android iOS Tutorial with Hamburger Icon
Set Change Text Font Size in React Native Android iOS Tutorial
