3
3
This is a helper module which brings react native as an engine to drive share extension for your app.
4
4
5
5
<p align =" center " >
6
- <img src ="assets/ios-demo.gif" />
7
- <img src ="assets/android-demo.gif" />
6
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios-demo.gif" />
7
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/android-demo.gif" />
8
8
</p >
9
9
10
10
# Installation
@@ -25,89 +25,89 @@ the setup requires a little bit more work. I will try to describe as detail as p
25
25
- click on ` + ` sign
26
26
27
27
<p align =" center " >
28
- <img src ="assets/ios_step_01.png" />
28
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_01.png" />
29
29
</p >
30
30
31
31
- select ` Share Extension ` under ` iOS > Application Extension `
32
32
33
33
<p align =" center " >
34
- <img src ="assets/ios_step_02.png" />
34
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_02.png" />
35
35
</p >
36
36
37
37
- select a name for your new share extension, in my case I chose ` MyShareEx `
38
38
39
39
<p align =" center " >
40
- <img src ="assets/ios_step_03.png" />
40
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_03.png" />
41
41
</p >
42
42
43
43
- delete both ` ShareViewController.h ` and ` ShareViewController.m ` . make sure to click on ` Move to Trash ` button during deletion.
44
44
45
45
<p align =" center " >
46
- <img src ="assets/ios_step_04.png" />
46
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_04.png" />
47
47
</p >
48
48
49
49
- create new file under your share extension group. in my case it was ` MyShareEx `
50
50
51
51
<p align =" center " >
52
- <img src ="assets/ios_step_05.png" />
52
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_05.png" />
53
53
</p >
54
54
55
55
- make sure the type of that object is ` Objective-c File ` and name it ` MyShareEx.m `
56
56
57
57
<p align =" center " >
58
- <img src ="assets/ios_step_06.png" />
58
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_06.png" />
59
59
</p >
60
60
61
61
<p align =" center " >
62
- <img src ="assets/ios_step_07.png" />
62
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_07.png" />
63
63
</p >
64
64
65
65
- since we deleted ` ShareViewController.m ` , we need to tell the storyboard of your share extension where the view needs to be loaded. So click on ` MainInterface.storyboard ` and replace the class field from ` ShareViewController ` to ` MyShareEx `
66
66
67
67
<p align =" center " >
68
- <img src ="assets/ios_step_08.png" />
68
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_08.png" />
69
69
</p >
70
70
71
71
- now it's time to add our library. Right click on ` Libraries ` group and select ` Add Files to "Sample1"... `
72
72
73
73
<p align =" center " >
74
- <img src ="assets/ios_step_09.png" />
74
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_09.png" />
75
75
</p >
76
76
77
77
- select ` node_modules ` > ` react-native-share-extension ` > ` ios ` > ` ReactNativeShareExtension.xcodeproj `
78
78
79
79
<p align =" center " >
80
- <img src ="assets/ios_step_10.png" />
80
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_10.png" />
81
81
</p >
82
82
83
83
- now we need to tell the share extension that we want to read new header files. click on project name, in my case ` Sample1 ` then click on ` MyShareEx ` . After that click on Build Settings and search for ` Header Search Paths `
84
84
85
85
<p align =" center " >
86
- <img src ="assets/ios_step_11.png" />
86
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_11.png" />
87
87
</p >
88
88
89
89
- add the new path ` $(SRCROOT)/../node_modules/react-native-share-extension/ios ` with ` recursive ` selected.
90
90
91
91
<p align =" center " >
92
- <img src ="assets/ios_step_12.png" />
92
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_12.png" />
93
93
</p >
94
94
95
95
- we need to add some flags as well, so search for ` Other Linker Flags ` and add ` -Objc ` and ` lc++ `
96
96
97
97
<p align =" center " >
98
- <img src ="assets/ios_step_13.png" />
98
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_13.png" />
99
99
</p >
100
100
101
101
- we also need to add all the static libraries such as react and Share Extension. so select ` General ` tab and under ` Linked frameworks and Libraries ` click on ` + ` and add all of the selected static binaries there.
102
102
103
103
<p align =" center " >
104
- <img src ="assets/ios_step_14.png" />
104
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_14.png" />
105
105
</p >
106
106
107
107
- we need to modify ` MyShareEx/Info.plist ` to make sure that our share extension can connect to ineternet. This is useful if you need your share extension connects to your api server or react-native remote server dev. For doing that we need to ` App Transport Security Settings ` to ` Info.plist `
108
108
109
109
<p align =" center " >
110
- <img src ="assets/ios_step_15.png" />
110
+ <img src ="https://raw.githubusercontent.com/alinz/react-native-share-extension/master/ assets/ios_step_15.png" />
111
111
</p >
112
112
113
113
- now go back to ` MyShareEx.m ` and paste the following code there.
0 commit comments