Skip to content

Commit 4bc78a6

Browse files
dabit3dabit3
committed
updated reamde
0 parents  commit 4bc78a6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+7193
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎.buckconfig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎.flowconfig

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
.*/Libraries/react-native/ReactNative.js
16+
17+
[include]
18+
19+
[libs]
20+
node_modules/react-native/Libraries/react-native/react-native-interface.js
21+
node_modules/react-native/flow
22+
flow/
23+
24+
[options]
25+
emoji=true
26+
27+
module.system=haste
28+
29+
experimental.strict_type_args=true
30+
31+
munge_underscores=true
32+
33+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
34+
35+
suppress_type=$FlowIssue
36+
suppress_type=$FlowFixMe
37+
suppress_type=$FixMe
38+
39+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
40+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
41+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
42+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
43+
44+
unsafe.enable_getters_and_setters=true
45+
46+
[version]
47+
^0.40.0

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎.gitignore

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
50+
51+
fastlane/report.xml
52+
fastlane/Preview.html
53+
fastlane/screenshots

‎.watchmanconfig

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎ImageBrowser.js

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React from 'react'
2+
3+
import {
4+
View,
5+
Text,
6+
Button,
7+
Image,
8+
ActivityIndicator,
9+
StyleSheet,
10+
Dimensions,
11+
ScrollView,
12+
CameraRoll,
13+
TouchableHighlight,
14+
Platform,
15+
Alert
16+
} from 'react-native'
17+
18+
import RNFetchBlob from 'react-native-fetch-blob'
19+
20+
const { width, height } = Dimensions.get('window')
21+
let styles
22+
class ImageBrowser extends React.Component {
23+
static navigationOptions = {
24+
title: 'Unsplash Images',
25+
}
26+
27+
state = {
28+
images: [],
29+
loading: true,
30+
page: 1
31+
}
32+
33+
componentDidMount() {
34+
this.fetchPhotos()
35+
}
36+
37+
fetchPhotos = () => {
38+
this.setState({ loading: true })
39+
fetch(`https://api.unsplash.com/photos/?page=${this.state.page}&per_page=30&client_id=${YOURAPPID}`)
40+
.then(res => res.json())
41+
.then(images => {
42+
this.state.images.push(...images)
43+
console.log('this.state.images: ', this.state.images)
44+
this.setState({ images: this.state.images, loading: false, page: this.state.page + 1 })
45+
})
46+
}
47+
48+
saveToCameraRoll = (image) => {
49+
if (Platform.OS === 'android') {
50+
RNFetchBlob
51+
.config({
52+
fileCache : true,
53+
appendExt : 'jpg'
54+
})
55+
.fetch('GET', image.urls.small)
56+
.then((res) => {
57+
CameraRoll.saveToCameraRoll(res.path())
58+
.then(Alert.alert('Success', 'Photo added to camera roll!'))
59+
.catch(err => console.log('err:', err))
60+
})
61+
} else {
62+
CameraRoll.saveToCameraRoll(image.urls.small)
63+
.then(Alert.alert('Success', 'Photo added to camera roll!'))
64+
}
65+
}
66+
67+
render() {
68+
return (
69+
<View style={{flex: 1}}>
70+
<Text style={styles.title}>Unsplash Images</Text>
71+
{
72+
this.state.loading ? (
73+
<Text style={{ padding: 10, textAlign: 'center' }}>Loading...</Text>
74+
) : (
75+
<Button
76+
onPress={this.fetchPhotos}
77+
title='View More'
78+
/>
79+
)
80+
}
81+
<ScrollView contentContainerStyle={styles.scrollContainer}>
82+
{
83+
this.state.images.map((image, i) => {
84+
return (
85+
<TouchableHighlight
86+
key={i}
87+
onPress={() => this.saveToCameraRoll(image)}
88+
underlayColor='transparent'
89+
>
90+
<Image
91+
style={styles.image}
92+
source={{ uri: image.urls.small }}
93+
/>
94+
</TouchableHighlight>
95+
)
96+
})
97+
}
98+
</ScrollView>
99+
</View>
100+
)
101+
}
102+
}
103+
104+
styles = StyleSheet.create({
105+
scrollContainer: {
106+
flexDirection: 'row',
107+
flexWrap: 'wrap'
108+
},
109+
centerLoader: {
110+
height: height - 100,
111+
width,
112+
justifyContent: 'center',
113+
alignItems: 'center'
114+
},
115+
image: {
116+
width: width / 2, height: width / 2
117+
},
118+
title: {
119+
textAlign: 'center',
120+
padding: 20
121+
}
122+
})
123+
124+
export default ImageBrowser

‎README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Mastering the Camera Roll in React Native
2+
3+
[React Native Training](Mastering the Camera Roll in React Native)
4+
5+
This repo goes along with the medium tutorial [Mastering the Camera Roll in React Native](https://medium.com/@dabit3/mastering-the-camera-roll-in-react-native-13b3b1963a2d)
6+
7+
## Getting Started
8+
9+
1. clone the repo
10+
11+
```
12+
git clone [email protected]:react-native-training/react-native-camera-roll-tutorial.git
13+
```
14+
15+
2. install dependencies
16+
```
17+
yarn
18+
```
19+
or
20+
```
21+
npm i
22+
```
23+
24+
3. link dependencies
25+
```
26+
react-native link
27+
```
28+
29+
4. start in ios or android
30+
31+
```
32+
react-native run-ios
33+
```
34+
or
35+
```
36+
react-native run-android
37+
```

‎__tests__/index.android.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.android.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

‎__tests__/index.ios.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.ios.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

‎android/app/BUCK

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# To learn about Buck see [Docs](https://buckbuild.com/).
2+
# To run your application with Buck:
3+
# - install Buck
4+
# - `npm start` - to start the packager
5+
# - `cd android`
6+
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7+
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8+
# - `buck install -r android/app` - compile, install and run application
9+
#
10+
11+
lib_deps = []
12+
13+
for jarfile in glob(['libs/*.jar']):
14+
name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
15+
lib_deps.append(':' + name)
16+
prebuilt_jar(
17+
name = name,
18+
binary_jar = jarfile,
19+
)
20+
21+
for aarfile in glob(['libs/*.aar']):
22+
name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
23+
lib_deps.append(':' + name)
24+
android_prebuilt_aar(
25+
name = name,
26+
aar = aarfile,
27+
)
28+
29+
android_library(
30+
name = "all-libs",
31+
exported_deps = lib_deps,
32+
)
33+
34+
android_library(
35+
name = "app-code",
36+
srcs = glob([
37+
"src/main/java/**/*.java",
38+
]),
39+
deps = [
40+
":all-libs",
41+
":build_config",
42+
":res",
43+
],
44+
)
45+
46+
android_build_config(
47+
name = "build_config",
48+
package = "com.rncameraroll",
49+
)
50+
51+
android_resource(
52+
name = "res",
53+
package = "com.rncameraroll",
54+
res = "src/main/res",
55+
)
56+
57+
android_binary(
58+
name = "app",
59+
keystore = "//android/keystores:debug",
60+
manifest = "src/main/AndroidManifest.xml",
61+
package_type = "debug",
62+
deps = [
63+
":app-code",
64+
],
65+
)

0 commit comments

Comments
 (0)